<!----////////////////////////////////////////////////////////////---->
<link href="content/SFL-2018/Merchpage/custom-SFL-style.css?$staticlink$" type="text/css" rel="stylesheet" />
<div class="MyContent"> 
  <!------------------------------------------------------>
    <div class="AnchorTag" id="about"></div>
  <div class="MyBlock" id="V-FIRST">
    <div class="text">
    <h1>Celebrating the 20<sup>th</sup> <br>
      Anniversary of an icon</h1>
    <p class="Text">In honour of Shaping Facial Lift’s two-decade milestone, we’ve created something special! Indulge in the contouring icon’s limited edition in celebration of its <strong>20 years of passion, plants and heritage. </strong></p>
    <p class="Text">Featuring a gorgeous bottle in Clarins’ signature red to represent passion, prosperity and tradition, dressed in a lovely floral motif in white to reflect care and a touch of gold for prestige, it’s as desirable as it can be! </p>
    <p class="BtnLink"><a href="$url('Product-Show','pid','80030985')$" target="_blank" onclick="ga('send','event','SHAPING_FACIAL_LIFT_MERCH_PAGE_2018','click','Routine_The 20th anniversary of an icon')">shop now</a></p>
    </div>
    <div class="SFLvideo">
      <video autoplay loop>
          <source src="content/SFL-2018/2018_SFL20_years_Reveal_20s_Horizontal_ProRes.mp4?$staticlink$" type="video/mp4">
      </video>
    </div>
  </div>
  <!------------------------------------------------------>
  <div class="MyBlock" id="V-FIRST-bis">
    <h1>The 1<sup>st</sup> contouring serum, inspired by Asian women</h1>
    <p class="Text">Fulfilling the skincare needs of women has always been a core value of Clarins. Therefore, Clarins created the very first contouring solution, Shaping Facial Lift, when Asian journalists expressed their desire for slim, defined, features while enjoying a treatment at the Institut Clarins in Paris in 1998.</p>
    <div class="AnchorTag" id="celebrating-20-years"></div>
    <div class="Box">
      <h2>Two decades of <br>
        passion and expertise</h2>
      <p class="Text">The iconic Serum has consistently evolved to offer the most innovative solutions drawn from science and plants.</p>
      <div class="jcarousel" id="jcarousel-V-FIRST" data-jcarousel="true"  data-displayed-items="4|4|1" data-wrap="false" data-jcarouselswipe="true">
        <ul>
          <li><a href="%{Product=0138821 productUrl}%" target="_blank" onclick="ga('send','event','SHAPING_FACIAL_LIFT_MERCH_PAGE_2018','click','Routine_The 1st contouring serum, inspired by Asian women')"><img src="content/ShapingFacialLift-Anniversary-2018/Merchpage/img/section-4-item-1.png?$staticlink$" alt="" /></a> 1998</li>
          <li><a href="%{Product=0138821 productUrl}%" target="_blank" onclick="ga('send','event','SHAPING_FACIAL_LIFT_MERCH_PAGE_2018','click','Routine_The 1st contouring serum, inspired by Asian women')"><img src="content/ShapingFacialLift-Anniversary-2018/Merchpage/img/section-4-item-2.png?$staticlink$" alt="" /></a> 2005</li>
          <li><a href="%{Product=0138821 productUrl}%" target="_blank" onclick="ga('send','event','SHAPING_FACIAL_LIFT_MERCH_PAGE_2018','click','Routine_The 1st contouring serum, inspired by Asian women')"><img src="content/ShapingFacialLift-Anniversary-2018/Merchpage/img/section-4-item-3.png?$staticlink$" alt="" /></a> 2010</li>
          <li><a href="%{Product=0138821 productUrl}%" target="_blank" onclick="ga('send','event','SHAPING_FACIAL_LIFT_MERCH_PAGE_2018','click','Routine_The 1st contouring serum, inspired by Asian women')"><img src="content/ShapingFacialLift-Anniversary-2018/Merchpage/img/section-4-item-4.png?$staticlink$" alt="" /></a> 2014</li>
        </ul>
        <p class="jcarousel-pagination" data-jcarouselpagination="true"></p>
      </div>
    </div>
  </div>
  <!------------------------------------------------------>
  <div class="MyBlock" id="V-BEST">
    <h1>The <span class="red">V</span>-Shaping women love</h1>
    <div class="AnchorTag" id="4th-generation"></div>
    <div class="Box">
      <h2>Generating outstanding results</h2>
      <p class="Text">Through continuous innovation, Shaping Facial Lift Total V Contouring Serum’s 4<sup>th</sup> generation version has proven itself time and again to be a success! </p>
      <div class="jcarousel" id="jcarousel-V-BEST" data-jcarousel="true"  data-displayed-items="3|3|1" data-wrap="false" data-jcarouselswipe="true">
      <ul>
        <li>
          <p class="BigNum">N°<span class="num">1</span></p>
          <p class="Text">Contouring serum<br>
            in asia*</p>
        </li>
        <li>body, html {
  overflow-x: hidden;
  width: 100%;
}
.breadcrumb {
  display: none;
}
#main {
  margin-top: 0px;
}
.primary-content{
  padding:0;
}
.MyContent {
  width: 100%;
  display: block;
  position: relative;
  max-width: 1250px;
  min-width: 320px;
  margin-left: auto;
  margin-right: auto;
  font-family: "Gotham SSm book A", "Gotham SSm book B", Gotham, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4em;
  color: #000;
  text-align: center;
}

.MyContent  .jcarousel-pagination{
  display:none;
}
@media only screen and (max-width:1023px) {
.MyContent {
  margin-bottom: 0px;
}
}
.MyContent  #MainPackshotLink{
  display:none;
}
@media only screen and (max-width:761px) {

.MyContent  #MainPackshotLink{
  display: block;
    position: absolute;
    top: 40px;
    left: calc(50% - 70px);
    width: 140px;
    height: 340px;
}
}
@media only screen and (max-width:761px) {

.MyContent  .jcarousel-pagination{
  display:block;
}
}
.MyContent .red {
  color: #be0f34!important;
}
.MyContent * {
  -webkit-user-select: none; /* Chrome, Opera, Safari */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}
.MyContent .MyBlock {
  display: block;
  width: 1600px;
  position: relative;
  margin-left: -175px;
  text-align: center;
}

@media only screen and (max-width:1249px) {
.MyContent .MyBlock {
  width: 100%;
  margin-left: 0;
}
}
.MyContent h1 {
  display: inline-block;
  font-family: ClarinsRegular, Clarins;
  font-size: 50px;
  font-weight: normal;
  line-height: 1em;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
  z-index: 1;
}

@media only screen and (max-width:1023px) {
.MyContent h1 {
  /*font-size: 40px;
  line-height: 40px;*/
}
}

@media only screen and (max-width:761px) {
.MyContent h1 {
  width: calc(100% - 40px);
  margin-left: 20px;
  margin-right: 20px;
  font-size: 35px;
}
}
/***************************************/


/***************************************/
.MyContent .BtnLink {
  margin: 0px;
  margin-top: 40px;
}
.MyContent .BtnLink a {
  text-align: center;
  background-color: #000;
  display: inline-block;
  color: #FFF;
  padding: 18px 30px;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 11px;
  line-height: 14px;
  font-family: "Gotham SSm medium A", "Gotham SSm medium B", Gotham, Helvetica, Arial, sans-serif;
  /*border: 2px solid #e5e5e5;*/
  min-width: 16px;
}

@media only screen and (max-width:761px) {
.MyContent .BtnLink {
  display: block;
  white-space: nowrap;
}
}
/*-------------------------------------------*/

.MyContent #SFL-MENU, .SFL-StickyNav  {
  background-color: #b18d57;
  color: #FFF;
  min-height: 88px;
  border-top: 2px solid #e5e5e5;
}

.SFL-StickyNav  {
  background-color: #b18d57;
  color: #FFF;
  min-height: 88px;
  border-top: 2px solid #e5e5e5;
  position: fixed;
  top:60px;
  z-index:1000;
  width:100%;
  max-width:1600px;
  left:50%;
  transform:translateX(-50%)
}
@media only screen and (max-width:1023px) {
.SFL-StickyNav  {
    top:40px;
}
}
@media only screen and (max-width:761px) {
.SFL-StickyNav  {
    top:50px;
}
.MyContent #SFL-MENU{
    top: 430px;
    position: absolute;
    z-index: 2;
    border-top:0px solid;
}
}

.mega-menu-wrapper{
  border-bottom:0px solid;
}
.MyContent #SFL-MENU ul, .SFL-StickyNav ul {
  max-width: 660px;
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-size: 0;
}
@media only screen and (max-width:761px) {
  .MyContent #SFL-MENU ul, .SFL-StickyNav ul {
overflow-x: scroll;
white-space: nowrap;
}
}
.MyContent #SFL-MENU ul li ,.SFL-StickyNav ul li{
  display: inline-block;
  text-align: center;
  vertical-align: top;
  width: 20%;
  padding-top: 8px;
  padding-bottom: 8px;
}
@media only screen and (max-width:761px) {
.MyContent #SFL-MENU ul li ,.SFL-StickyNav ul li{
  width: 100px;
}
.MyContent #SFL-MENU ul li:first-child ,.SFL-StickyNav ul li:first-child{
  padding-left:30px;
}
.MyContent #SFL-MENU ul li:last-child ,.SFL-StickyNav ul li:last-child{
  padding-right:30px;
}
}
.MyContent #SFL-MENU ul li a ,.SFL-StickyNav ul li a{
  display: block;
  text-align: center;
  font-family: "Gotham SSm medium A", "Gotham SSm medium B", Gotham, Helvetica, Arial, sans-serif;
  color: #FFF;
  text-decoration: none;
  font-size: 11px;
  line-height: 14px;
  min-width: 100px;
}
@media only screen and (max-width:761px) {
.MyContent #SFL-MENU ul li a img ,.SFL-StickyNav ul li a img{
  display: inline-block;
  width: 42px;
}

}
/*--------------------------------------------*/
.MyContent #ANNIVERSARY {
  padding-top: 90px;
  color: #FFF;
  padding-bottom: 90px;
  background-position: top center;
  background-color:#550605;
}
@media only screen and (min-width:1024px) {
.MyContent #ANNIVERSARY {
  background-image: url(img/section-ANNIVERSARY-background.jpg);
} 
}
@media only screen and (max-width:1249px) {
.MyContent #ANNIVERSARY {
  background-position: top left 30%;
}
}
@media only screen and (max-width:1023px) {
.MyContent #ANNIVERSARY {
  background-image: url(img/section-ANNIVERSARY-background-mobile.jpg);
  
  padding-top:530px;
  background-repeat:no-repeat;
    padding-bottom: 50px;
    background-position: top center;
  
} 
}
@media only screen and (max-width:761px) {
.MyContent #ANNIVERSARY {
    background-repeat: no-repeat;
    padding-bottom: 50px;
    background-size: 600px auto;
    background-position: top center;
    padding-top: 540px;
}
}
.MyContent #ANNIVERSARY .Box {
  max-width: 1170px;
  width: calc(100% - 40px);
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  min-height: 400px;
  padding: 20px;
  padding-top: 0px;
  padding-bottom: 0px;
}
@media only screen and (max-width:1023px) {
.MyContent #ANNIVERSARY .Box {
    text-align: center;
    min-height: 40px;
} 
}
@media only screen and (max-width:761px) {
.MyContent #ANNIVERSARY .Box h1{
    padding-top: 20px;
} 
}
@media only screen and (max-width:1023px) {
.MyContent #ANNIVERSARY .Box h1 br{
    display:none;
} 
}
.MyContent #ANNIVERSARY p.Text {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 24px;
  padding-top: 20px;
}
@media only screen and (max-width:1023px) {
.MyContent #ANNIVERSARY p.Text {
  max-width: 500px;
  display: block;
  margin-left: auto;
  margin-right: auto;
} 
}
.MyContent #ANNIVERSARY p.Text strong {
/*font-weight:normal;
  font-family: "Gotham SSm medium A", "Gotham SSm medium B", Gotham, Helvetica, Arial, sans-serif;
*/
}
.MyContent #ANNIVERSARY .Box * {
  max-width: 400px;
  text-align: left;
}
@media only screen and (max-width:1023px) {
.MyContent #ANNIVERSARY .Box * {
    text-align: center;
    max-width: 1024px;
} 
}
.MyContent #ANNIVERSARY p.Title {
  margin: 0;
  max-width: 540px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-size: 22px;
  line-height:24px;
  padding: 40px;
}
@media only screen and (max-width:761px) {
.MyContent #ANNIVERSARY p.Title {
  width: calc(100% - 80px);
  padding: 20px;
} 
}
.MyContent #ANNIVERSARY .VideoLink {
  margin: 0;
  max-width: 540px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width:1023px) {
.MyContent #ANNIVERSARY .VideoLink {
  max-width: 540px;
  width: calc(100% - 40px);
  display: block;

} 
}
.MyContent #ANNIVERSARY .VideoLink a {
  display: inline-block;
  position: relative;

}
.MyContent #ANNIVERSARY .VideoLink a img {
  display: block;
  position: relative;
}
@media only screen and (max-width:1023px) {
.MyContent #ANNIVERSARY .VideoLink a img {
  max-width: 100%;
} 
}
.MyContent #ANNIVERSARY .VideoLink a::before {
  content: " ";
  display: block;
  width: 50px;
  height: 50px;
  background-image: url(img/VideoPlayBtn.png);
  position: absolute;
  bottom: 15px;
  left: 15px;
  z-index: 1;
}
/*--------------------------------------------*/
.MyContent #V-FIRST {
  padding-top: 70px;
  background-image: url(img/section-V-FIRST-background.jpg);
  padding-bottom: 48px;
  background-position:top center;
}
@media only screen and (max-width:1023px) {
.MyContent #V-FIRST {
  padding: 0px;
  background-position: top left;
  width: 100vw;
  padding-top: calc(68vw + 50px);
  background-size: 210%;
  background-repeat: no-repeat;
  padding-bottom: 50px;
}
}
.MyContent #V-FIRST p.Text {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  max-width: 470px;
  padding: 20px;
  padding-bottom: 0px;
  margin-left: auto;
  margin-right: auto;
}
.MyContent #V-FIRST a {
  background-color: #000;
  color: #FFF;
  /*border: 2px solid #e5e5e5;*/
}
@media only screen and (max-width:1023px) {
.MyContent #V-FIRST h1{
  max-width:700px;
} 
.MyContent #V-FIRST h1 br{
  display:none;
}
.MyContent #V-FIRST p.Text {
  max-width:700px;
} 
}
/*--------------------------------------------*/
.MyContent #V-FIRST-bis {
  background: radial-gradient(#971212 20%, #570505 80%);
  padding-top: 70px;
  color: #FFF;
  padding-bottom: 90px;
}
@media only screen and (max-width:1023px) {
  .MyContent #V-FIRST-bis  {
  padding-top: 50px;
  padding-bottom: 50px;
}
}
.MyContent #V-FIRST-bis::before {
  content: " ";
  width: 100%;
  height: 737px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-image: url(img/section-V-FIRST-bis-background.png);
}
@media only screen and (max-width:1023px) {
.MyContent #V-FIRST-bis::before {
display:none;
}
}
.MyContent #V-FIRST-bis h1 {
  max-width: 740px;
}

.MyContent #V-FIRST-bis p.Text {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  max-width: 720px;
  padding: 20px;
  padding-top: 20px;
  padding-bottom: 0px;
  margin-left: auto;
  margin-right: auto;
}

.MyContent #V-FIRST-bis .Box {
  background: linear-gradient(#c89a55, #835b2f);
  padding: 40px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  max-width: 420px;
  padding-right: 350px;
  position: relative;
  text-align: left;
}
@media only screen and (max-width:1023px) {
.MyContent #V-FIRST-bis .Box {
  width: calc(100% - 420px);
  max-width: 410px;
  padding-right: 340px;
}
}
@media only screen and (max-width:761px) {
.MyContent #V-FIRST-bis .Box {
  margin: 10px;
  padding: 10px;
  padding-right: 100px;
  width: calc(100% - 130px);
  margin-top: 100px;
  text-align:center;
  padding-top:20px;
  padding-bottom:20px;
}

}


.MyContent #V-FIRST-bis .Box h2 {
  font-size: 22px;
  font-weight: normal;
  margin: 0;
  padding-bottom: 20px;
}
.MyContent #V-FIRST-bis .Box .Text {
  padding: 0;
  max-width: 320px;
  margin-left: 0;
}
.MyContent #V-FIRST-bis .Box .jcarousel {
  display: block;
  position: absolute;
  width: 350px;
  bottom: 30px;
  left: 50%;
}
@media only screen and (max-width:1023px) {
.MyContent #V-FIRST-bis .Box .jcarousel .jcarousel-pagination{
  display:none;
}
}
@media only screen and (max-width:761px) {
.MyContent #V-FIRST-bis .Box .jcarousel .jcarousel-pagination{
  bottom:0;
  display:block;
}
}
@media only screen and (max-width:761px) {
.MyContent #V-FIRST-bis .Box .jcarousel {
     display: block;
    position: absolute;
    width: 100px;
    bottom: 30px;
    left: auto;
    right: 0;
    padding-bottom: 30px;
}
}
.MyContent #V-FIRST-bis .Box ul {
  font-size: 14px;
}
.MyContent #V-FIRST-bis .Box ul li {
  display: inline-block;
  font-size: 20px;
  text-align: center;
  font-family: ClarinsRegular, Clarins;
  border:0px solid;
}
.MyContent #V-FIRST-bis .Box ul li img{
  display:block;
    margin-left: auto;
  margin-right: auto;
  
}
/*--------------------------------------------*/
.MyContent #V-BEST {
  background-image: url(img/section-V-BEST-background.png);
  padding-top: 130px;
  background-color: #f7f7f7;
  padding-bottom: 100px;
}
@media only screen and (max-width:1023px) {
.MyContent #V-BEST {
  padding-top: 50px;
  padding-bottom: 50px;
} 
}
.MyContent #V-BEST .Box {
  background-image: url(img/section-V-BEST-texture.jpg);
  padding: 30px;
  max-width: 628px;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  color: #FFF;
  position: relative;
  padding-left: 100px;
  padding-right: 100px;
  margin-bottom: 60px;
}
@media only screen and (max-width:1023px) {
.MyContent #V-BEST .Box {
  padding-left: 150px;
  padding-right: 20px;
  max-width:760px;
  margin-left: 20px;
  margin-right: 20px;
} 
}
@media only screen and (max-width:761px) {
.MyContent #V-BEST .Box {
    padding-left: 100px;
    padding-right: 10px;
    max-width: 760px;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
  padding-top: 20px;
  background-size:cover;
}
}
.MyContent #V-BEST .Box::before {
  content: " ";
  width: 194px;
  height: 668px;
  position: absolute;
  top: -200px;
  left: -140px;
  z-index: 1;
  background-image: url(img/section-V-BEST-packshot.png);
}
@media only screen and (max-width:1023px) {
  .MyContent #V-BEST .Box::before {
  content: " ";
  width: 154px;
  height: 508px;
  position: absolute;
  top: -50px;
  left: -30px;
  z-index: 1;
  background-image: url(img/section-V-BEST-packshot.png);
  background-size: contain;
  background-repeat: no-repeat;
}
}
@media only screen and (max-width:761px) {
  .MyContent #V-BEST .Box::before {
  width: 124px;
height: 408px;
position: absolute;
top: -20px;
left: -22px;
}
}
.MyContent #V-BEST .Box h2 {
  font-size: 22px;
  font-weight: normal;
  margin: 0;
  padding-bottom: 20px;
  text-align: left;
}
@media only screen and (max-width:761px) {
.MyContent #V-BEST .Box h2 {
  text-align: center;
}
}
.MyContent #V-BEST .Box .Text {
  padding: 0;
  margin: 0;
  margin-left: 0;
  text-align: left;
}
@media only screen and (max-width:761px) {
  .MyContent #V-BEST .Box .Text {
  text-align: center;
}
}
.MyContent #V-BEST .Box ul {
  
}
@media only screen and (max-width:761px) {
.MyContent #V-BEST .Box .jcarousel {
padding-bottom:40px;
  
} 
}

@media only screen and (max-width:1023px) {
.MyContent #V-BEST .Box .jcarousel .jcarousel-pagination{
  bottom:0;
}
}
.MyContent #V-BEST .Box ul li {
  margin: 0;
  padding: 0;
  display: inline-block;
  
  padding-top: 30px;
  border:0px solid;
}
.MyContent #V-BEST .Box ul li .BigNum {
  margin: 0;
  padding: 0;
  display: block;
  font-size: 30px;
  font-family: ClarinsRegular, Clarins;
  text-align: center;
}

.MyContent #V-BEST .Box ul li .BigNum .num {
  font-size: 150px;
  line-height: 100px;
}
@media only screen and (max-width:761px) {
.MyContent #V-BEST .Box ul li .BigNum .num {
  font-size: 100px;
  line-height: 80px;
} 
}
.MyContent #V-BEST .Box ul li .Text {
  margin: 0;
  padding: 0;
  padding-top: 20px;
  display: block;
  font-size: 11px;
  font-family: "Gotham SSm medium A", "Gotham SSm medium B", Gotham, Helvetica, Arial, sans-serif;
  line-height: 16px;
  text-transform: uppercase;
  text-align: center;
}
.MyContent #V-BEST .Box .BtnLink {
  margin-top: 20px;
}
/*--------------------------------------------*/
.MyContent #V-ULTIMATE {
  background-image: url(img/section-V-ULTIMATE-background.png);
  padding-top: 220px;
  margin-top: -150px;
  background-repeat: no-repeat;
  background-position: top center;
  padding-bottom:50px;
}
@media only screen and (max-width:761px) {
  .MyContent #V-ULTIMATE {
  
  padding-top: 50px;
  margin-top: 0px;
  padding-bottom:50px;
}
}
.MyContent #V-ULTIMATE h2 {
  font-size: 22px;
  font-weight: normal;
  margin: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  color: #be0f34;
  line-height:24px;
}
@media only screen and (max-width:761px) {
.MyContent #V-ULTIMATE h2 {
  padding: 20px;
}
}
.MyContent #V-ULTIMATE .Text {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  max-width: 500px;
  padding: 20px;
  padding-top: 20px;
  padding-bottom: 0px;
  margin-left: auto;
  margin-right: auto;
}
.MyContent #V-ULTIMATE .jcarousel {
  width: 645px;
  margin: 0;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
}
@media only screen and (max-width:761px) {
  .MyContent #V-ULTIMATE .jcarousel {
  width: calc(100% - 40px);
  padding-bottom:20px;
}
}

@media only screen and (max-width:1023px) {
.MyContent #V-ULTIMATE .jcarousel .jcarousel-pagination{
  bottom:0;
}
}
.MyContent #V-ULTIMATE ul li {
  margin: 0;
  padding: 0;
  display: inline-block;
  width: 33%;
  vertical-align: top;
  text-align: center;
  border:0px solid;
  
}
.MyContent #V-ULTIMATE ul li .Visual {
  margin: 0;
  padding: 0;
  overflow:hidden;
}
.MyContent #V-ULTIMATE ul li img {
  width: 100%;
  display: block;
  position: relative;
  -webkit-transition: all ease-in-out 0.5s;
  transition: all ease-in-out 0.5s;
  -webkit-transform-origin:center;
  transform-origin:center;
  -webkit-transform:scale(1) translateZ(0); 
  transform: scale(1) translateZ(0); 
  cursor:pointer;
}
.MyContent #V-ULTIMATE ul li:hover img {
  -webkit-transform:scale(1.1) translateZ(0); 
  transform: scale(1.1) translateZ(0); 
}
.MyContent #V-ULTIMATE ul li h3 {
  margin: 0;
  color: #918f8f;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 14px;
  padding: 10px;
}
.MyContent #V-ULTIMATE ul li .Text {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  padding: 20px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
}
.MyContent #V-ULTIMATE .Mentions {
  margin: 0;
  font-size: 10px;
  line-height: 12px;
  padding: 20px;
  color: #8b8b8b;
}
.MyContent #V-ULTIMATE .Box {
  background-image: url(img/section-V-ULTIMATE-texture.png);
  margin-left: auto;
  margin-right: auto;
  height: 327px;
  background-size: auto 100%;
  width: 100%;
  display: block;
  background-repeat: no-repeat;
  background-position: top center;
  color: #FFF;
  padding-left: 200px;
  padding-right: 200px;
  max-width: 860px;
  margin-top:30px;
}

@media only screen and (max-width:1249px) {
.MyContent #V-ULTIMATE .Box {
  padding-left:0px;
  padding-right:0px;
  height:auto;
  padding-bottom:50px;
  background-size: 150% auto;
}
}

@media only screen and (max-width:1023px) {
.MyContent #V-ULTIMATE .Box {
  
  background-size: 150% auto;
} 
}

@media only screen and (max-width:761px) {
.MyContent #V-ULTIMATE .Box {
  height:400px;
  background-size: auto 400px;
  background-position: left -295px top;
    padding-bottom:0px;
} 
}
.MyContent #V-ULTIMATE .Box h2 {
  margin: 0;
  color: #FFF;
  margin-left: auto;
  margin-right: auto;
  padding-left: 170px;
  padding-right: 20px;
  padding-top: 30px;
  max-width: 660px;
  padding-bottom: 0;
}
@media only screen and (max-width:1023px) {
.MyContent #V-ULTIMATE .Box h2 {

  font-size:18px;
}
}
.MyContent #V-ULTIMATE .Box .jcarousel {

  margin-left: 170px;
  margin-right: 20px;
  max-width: 660px;
}
@media only screen and (max-width:1023px) {
.MyContent #V-ULTIMATE .Box .jcarousel {
  margin-left: 170px;
  margin-right: 20px;
  max-width: 570px;
  margin-top: 0px;
}
}
@media only screen and (max-width:761px) {
.MyContent #V-ULTIMATE .Box .jcarousel {
  margin-left: 152px;
margin-right: 0px;
max-width: 570px;
margin-top: 0px;
width: 160px;
}
}
.MyContent #V-ULTIMATE .Box ul li {
  margin: 0;
  padding: 0;
  display: inline-block;
  border:0px solid;
}
.MyContent #V-ULTIMATE .Box ul li .Stats {
  margin: 0;
  padding: 0;
  padding-top: 20px;
  display: block;
  font-size: 11px;
  font-family: "Gotham SSm medium A", "Gotham SSm medium B", Gotham, Helvetica, Arial, sans-serif;
  line-height: 16px;
  text-transform: uppercase;
  text-align: center;
}
.MyContent #V-ULTIMATE .Box ul li .Stats .num {
  width: 131px;
  height: 131px;
  margin: 0;
  padding: 0;
  display: block;
  font-size: 33px;
  font-family: "Gotham SSm book A", "Gotham SSm book B", Gotham, Helvetica, Arial, sans-serif;
  line-height: 131px;
  text-transform: none;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.MyContent #V-ULTIMATE .Box ul li .Stats #Stats-P1 {
  background-image: url(img/section-V-ULTIMATE-stats-1.png);
}
.MyContent #V-ULTIMATE .Box ul li .Stats #Stats-P2 {
  background-image: url(img/section-V-ULTIMATE-stats-2.png);
}
.MyContent #V-ULTIMATE .Box ul li .Stats #Stats-P3 {
  background-image: url(img/section-V-ULTIMATE-stats-3.png);
}
/*--------------------------------------------*/
.MyContent #V-ROUTINE {
  padding-top: 70px;
  background-image: url(img/section-V-ROUTINE-background.jpg);
  padding-bottom: 70px;
}
@media only screen and (max-width:761px) {
.MyContent #V-ROUTINE {
  padding-top: 50px;
  padding-bottom: 50px;
} 
}
.MyContent #V-ROUTINE .Text {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  max-width: 720px;
  padding: 20px;
  padding-top: 20px;
  padding-bottom: 0px;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width:761px) {
.MyContent #V-ROUTINE .Text {
    padding-bottom: 20px;
}
}
.MyContent #V-ROUTINE .jcarousel {
  margin: 0;
  padding: 0;
  display: block;
  list-style: none;

  max-width: 1024px;
  margin-left: auto;
  margin-right: auto
}

@media only screen and (max-width:1023px) {
.MyContent #V-ROUTINE .jcarousel {
  max-width: 316px;

} 
}
.MyContent #V-ROUTINE ul li {
  margin: 0;
  padding: 0;
  display: inline-block;
  padding-top: 30px;
    border:0px solid;
}
@media only screen and (max-width:761px) {
.MyContent #V-ROUTINE ul li {
    padding-top: 0px;

} 
}
.MyContent #V-ROUTINE ul li .VideoLink {
    margin: 0;
  padding: 0;
  position: relative;
  width:316px;
}
.MyContent #V-ROUTINE ul li .VideoLink span {
  position: absolute;
right: 175px;
bottom: 12px;
text-align: right;
font-size: 11px;
color: #be0f34;
line-height: 14px;
}
.MyContent #V-ROUTINE ul li img {
  width: 316px;
}
.MyContent #V-ROUTINE ul li h2 {
  margin: 0;
  padding: 0;
  display: block;
  font-size: 35px;
  font-family: ClarinsRegular, Clarins;
  text-align: center;
  line-height: 1em;
  color: #000;
  font-weight: normal;
}
.MyContent #V-ROUTINE ul li .Text {
  font-size: 14px;
  line-height: 22px;
}
.MyContent #V-ROUTINE ul li .BtnLink {
  margin-top: 20px;
}
@media only screen and (max-width:761px) {
.MyContent #V-ROUTINE ul li .BtnLink {
    margin-top: 20px;
    margin-bottom: 20px;
}
}
.products-pagination.jcarousel-control-prev {
    left: calc(50% - 210px);
    top: 50%;
}
.products-pagination.jcarousel-control-next {
    right: calc(50% - 210px);
    top: 50%;
}

@media only screen and (max-width:761px) {
.MyContent #V-ROUTINE .jcarousel-pagination {
    bottom: 20px;
  
}
}

/* UPDATE */
.MyContent #V-FIRST .SFLvideo{
  width: 854px;
  height: 480px;
  margin: auto;
  margin-top: 55px !important;
}

@media (max-width: 768px) and (max-width: 1024px){
  .MyContent #V-FIRST .SFLvideo, .MyContent #V-FIRST .SFLvideo video{
    width: 100%;
  }
  .MyContent #V-FIRST {
    background-position-x: -420px; 
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
  .MyContent #V-FIRST .SFLvideo, .MyContent #V-FIRST .SFLvideo video{
    width: 100%;
  }
  .MyContent #V-FIRST {
    background-position-x: -290px; 
  }
}

@media (max-width: 480px){
  .MyContent #V-FIRST .SFLvideo, .MyContent #V-FIRST .SFLvideo video{
    width: 100%;
  }
}

.MyContent #V-FIRST {
  background-repeat: no-repeat;
  background-color: #F7F7F7;
}

@media only screen and (max-width:480px) {
.MyContent #V-FIRST {
  background-position-x: -210px; 
}
}

@media only screen and (min-width: 1024px){
  .MyContent #V-FIRST .text{
    margin-top: 500px;
  }
}

@media only screen and (max-width: 768px){
  .MyContent #V-FIRST .text{
    margin-top: 0;
  }
}

@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) {
  .MyContent #V-FIRST {
      background-position-x: -368px;
  } 
}

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
  .MyContent #V-FIRST {
      background-position-x: -202px;
  }
}
          <p class="BigNum"><span class="num">120</span></p>
          <p class="Text">beauty awards<br>
            received worldwide</p>
        </li>
        <li>
          <p class="BigNum"> +<span class="num">7</span></p>
          <p class="Text">million serums<br>
            sold**</p>
        </li>
      </ul>
      <p class="jcarousel-pagination" data-jcarouselpagination="true"></p>
      </div>
      <p class="BtnLink"><a href="$url('Product-Show','pid','80030985')$" target="_blank" onclick="ga('send','event','SHAPING_FACIAL_LIFT_MERCH_PAGE_2018','click','Routine_The V-Shaping women love')">shop now</a></p>
    </div>
       <div class="AnchorTag" id="block-olapic"></div>
    <!----- start OLAPIC--->
     <div id="olapic_specific_widget"></div>
 <script type="text/javascript" src="https://photorankstatics-a.akamaihd.net/81b03e40475846d5883661ff57b34ece/static/frontend/latest/build.min.js"  
 data-olapic="olapic_specific_widget"
  data-instance="93b75dad11986f21662f3fd5ff95e22d" 
  data-apikey="9d34b6d19a4e1bea1c45c9b87547ac33f554e35b2b7e4cfe7db106d6ae9e34dd" async="async"></script>
  <!----- end OLAPIC--->
 		
        
        
  </div>
  <!------------------------------------------------------>
  <div class="MyBlock" id="V-ULTIMATE" onclick="ga('send','event','SHAPING_FACIAL_LIFT_MERCH_PAGE_2018','click','Routine_A pioneering plant-powered innovation')">
    <h1>A pioneering plant-powered innovation</h1>
    <h2>Drawing on only the best of nature and science</h2>
    <p class="Text">The powerful plants infused with Clarins’ skin care expertise help you achieve your ideal V.</p>
    <div class="AnchorTag" id="ingredients"></div>
    <div class="jcarousel" id="jcarousel-V-ULTIMATE-visuals" data-jcarousel="true"  data-displayed-items="3|3|1" data-wrap="circular" data-jcarouselswipe="true">
      <ul>
        <li>
          <p class="Visual"><img src="content/ShapingFacialLift-Anniversary-2018/Merchpage/img/section-V-ULTIMATE-item-1.jpg?$staticlink$" alt=""/></p>
          <h3>SLIM</h3>
          <p class="Text">with guarana for a thin, defined facial contour.</p>
        </li>
        <li>
          <p class="Visual"><img src="content/ShapingFacialLift-Anniversary-2018/Merchpage/img/section-V-ULTIMATE-item-2.jpg?$staticlink$" alt=""/></p>
          <h3>DEPUFF</h3>
          <p class="Text">with zerumbet ginger <br>
            for sharper features.</p>
        </li>
        <li>
          <p class="Visual"><img src="content/ShapingFacialLift-Anniversary-2018/Merchpage/img/section-V-ULTIMATE-item-3.jpg?$staticlink$" alt=""/></p>
          <h3>LIFT</h3>
          <p class="Text">with kaki for tightened skin.</p>
        </li>
      </ul>
      <p class="jcarousel-pagination" data-jcarouselpagination="true"></p>
    </div>
    
        <div class="AnchorTag" id="results"></div>
    <div class="Box">
      <h2>No wonder Total V Contouring Serum has been such a hit!</h2>
      <div class="jcarousel" id="jcarousel-V-ULTIMATE-Stats" data-jcarousel="true"  data-displayed-items="3|3|1" data-wrap="circular" data-jcarouselswipe="true">
        <ul>
          <li >
            <p class="Stats" > <span id="Stats-P1" class="num">83%</span> Facial features<br>
              are sharper*</p>
          </li>
          <li>
            <p class="Stats"> <span id="Stats-P2" class="num">77%</span> Facial puffiness<br>
              is visibly reduced**</p>
          </li>
          <li>
            <p class="Stats"> <span id="Stats-P3" class="num">82%</span> skin is lifted***</p>
          </li>
        </ul>
        <p class="jcarousel-pagination" data-jcarouselpagination="true"></p>
      </div>
    </div>
    <p class="Mentions">* Source: NPD France, skin care products sold in perfumeries, luxury brands, sales in value and units in 2012. *** Satisfaction test, 101 women, after 4 weeks.</p>
  </div>
  
  <!------------------------------------------------------>
  <div class="AnchorTag" id="application-method"></div>
  
  <div class="MyBlock" id="V-ROUTINE">
    <h1>Your <span class="red">V</span>-Routine</h1>
    <p class="Text">Indulge in the most complete contouring range.</p>
    <div class="jcarousel" id="jcarousel-V-ROUTINE" data-jcarousel="true"  data-displayed-items="3|1|1" data-wrap="circular" data-jcarouselswipe="true">
      <ul>
        <li>
          <p class="VideoLink">
          <img src="content/ShapingFacialLift-Anniversary-2018/Merchpage/img/section-8-item-1.png?$staticlink$" alt="" usemap="#Map-Bloc-1" />
          <span>Morning<br> &amp;/or evening</span>
          <map name="Map-Bloc-1">
             <area shape="rect" onclick="ga('send','event','SHAPING_FACIAL_LIFT_MERCH_PAGE_2018','click','Routine_Your V-Routine')" coords="211,6,276,229" href="$url('Product-Show','pid','80030985')$" target="_blank">
          <area shape="rect" onclick="ga('send','event','SHAPING_FACIAL_LIFT_MERCH_PAGE_2018','click','Routine_Your V-Routine')" coords="27,55,288,192" href="https://youtu.be/rrqM4vhA1Uk" target="_blank">
             </map>  
         </p>
          <h2>Slim<br>
            and lift</h2>
          <p class="Text">The iconic super serum for <br>
            contoured, defined features<br>
            <strong>Total V Contouring Serum</strong></p>
          <p class="BtnLink"><a href="$url('Product-Show','pid','0138818')$" target="_blank" onclick="ga('send','event','SHAPING_FACIAL_LIFT_MERCH_PAGE_2018','click','Routine_Your V-Routine')">make it mine</a></p>
        </li>
        <li>
          <p class="VideoLink">
          <img src="content/ShapingFacialLift-Anniversary-2018/Merchpage/img/section-8-item-2.png?$staticlink$" alt="" usemap="#Map-Bloc-2"/>
          <span>Morning<br> &amp;/or evening </span>
          <map name="Map-Bloc-2">
             <area shape="rect" onclick="ga('send','event','SHAPING_FACIAL_LIFT_MERCH_PAGE_2018','click','Routine_Your V-Routine')" coords="222,44,271,229" href="$url('Product-Show','pid','80011881')$" target="_blank">
          <area shape="rect" onclick="ga('send','event','SHAPING_FACIAL_LIFT_MERCH_PAGE_2018','click','Routine_Your V-Routine')" coords="28,54,286,190" href="https://youtu.be/AA7e_r-5BUo" target="_blank">
             </map>  
          </p>
          <h2>Brighten<br>
            and invigorate</h2>
          <p class="Text">The beauty ally for <br>
            awakened, rejuvenated eyes<br>
            <strong>Enhancing Eye Lift Serum</strong></p>
          <p class="BtnLink"><a href="$url('Product-Show','pid','80011881')$" onclick="ga('send','event','SHAPING_FACIAL_LIFT_MERCH_PAGE_2018','click','Routine_Your V-Routine')" target="_blank">make it mine</a></p>
        </li>
        <li>
          <p class="VideoLink">
          <img src="content/ShapingFacialLift-Anniversary-2018/Merchpage/img/section-8-item-3.png?$staticlink$" alt="" usemap="#Map-Bloc-3" />
          <span>Whenever you need <br> a depuffing effect  </span>
           <map name="Map-Bloc-3">   
           <area shape="rect" onclick="ga('send','event','SHAPING_FACIAL_LIFT_MERCH_PAGE_2018','click','Routine_Your V-Routine')" coords="181,131,307,227" href="$url('Product-Show','pid','80011853')$" target="_blank">
        
             <area shape="rect" onclick="ga('send','event','SHAPING_FACIAL_LIFT_MERCH_PAGE_2018','click','Routine_Your V-Routine')" coords="30,55,286,191" href="https://youtu.be/9Y6Gwct3Xws" target="_blank">
            </map>
          </p>
          <h2>Depuff<br>
            and relieve</h2>
          <p class="Text">The instant solution <br>
            to morning puffiness<br>
            <strong>V-Facial Intensive Wrap</strong></p>
          <p class="BtnLink"><a href="$url('Product-Show','pid','80011853')$" onclick="ga('send','event','SHAPING_FACIAL_LIFT_MERCH_PAGE_2018','click','Routine_Your V-Routine')" target="_blank">make it mine</a></p>
        </li>
      </ul>
     
      
    </div>     <p class="jcarousel-pagination" data-jcarouselpagination="true"></p><a href="javascript:;" class="products-pagination jcarousel-control-prev" data-jcarouselcontrol="true"><span class="svg-left-arrow-white"> </span></a> 
        <a href="javascript:;" class="products-pagination jcarousel-control-next" data-jcarouselcontrol="true"><span class="svg-right-arrow-white"> </span></a> 
   
  </div>
  <!------------------------------------------------------> 
</div>

<script type="text/javascript">
createStickyNav()
function GoAnchor(w,v){
	
	document.location=w
	var el=document.querySelector(w)
	if(window.innerWidth<762){
		jQuery('html, body').animate({ scrollTop: (el.offsetTop - 30)+ 'px' }, 50)
	}else if(window.innerWidth<1024){
		jQuery('html, body').animate({ scrollTop: (el.offsetTop - v)+ 'px' }, 50)
	}else{
 		jQuery('html, body').animate({ scrollTop: (el.offsetTop - v - 50)+ 'px' }, 50)
	}
}
function createStickyNav(){
	var n=document.createElement("div")
	n.className="SFL-StickyNav"
	n.innerHTML=document.querySelector("#SFL-MENU").innerHTML
	//document.querySelector(".mega-menu-wrapper").appendChild(n)
	document.querySelector("body").appendChild(n)
}
window.addEventListener("scroll",CheckScrollSFL,false)
function CheckScrollSFL(){
	var scrollflag=1
	var elem=document.querySelector("#SFL-MENU")
	var pos=getPosition(elem)
	if(pos.y <40 ) scrollflag=0
	if(scrollflag==0){	
		document.querySelector(".SFL-StickyNav").style.display="block"
	}else{
		document.querySelector(".SFL-StickyNav").style.display="none"
	}
}
CheckScrollSFL()
  function getPosition(el) {
	  var xPos = 0;
	  var yPos = 0;

	  while (el) {
		if (el.tagName == "BODY") {
		  var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
		  var yScroll = el.scrollTop || document.documentElement.scrollTop;
		  xPos += (el.offsetLeft - xScroll + el.clientLeft);
		  yPos += (el.offsetTop - yScroll + el.clientTop);
		} else {
		  xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
		  yPos += (el.offsetTop - el.scrollTop + el.clientTop);
		}
		el = el.offsetParent;
	  }
	  return {x:xPos,y:yPos}
}
</script>