body, html {
	margin:0;
	padding:0;
	overflow-x: hidden;
	width: 100%;
}
.breadcrumb {
	display: none!important;
}
.breadcrumb-container {
	display: none!important;
}
#main {
	margin-top: 0px;
}
.footer-wrapper {
	z-index: 2;
	position: relative;
}
.primary-content {
	padding-bottom: 0;
	margin-bottom: 0;
}
.MyContent a {
	outline: 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;
}

@media only screen and (max-width:1249px) {
.MyContent {
	overflow: hidden;
}
}
.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: 100%;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.MyContent .anchor-name {
	display: none;
}
.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;
}
.MyContent .HiddenText {
	display: none;
}
.MyContent h1 span {
	display: inline-block;
}

@media only screen and (max-width:761px) {
.MyContent h1 {
	font-size: 35px;
}
}
.MyContent .BtnLink {
	margin: 0;
	padding: 0;
	font-size: 0;
}
.MyContent .BtnLink a {
	font-family: "Gotham SSm medium A", "Gotham SSm medium B", Gotham, Helvetica, Arial, sans-serif;
	font-size: 11px;
	/*border-bottom: 1px solid #e5e5e5;*/
	text-transform: uppercase;
	color: #FFF;
	text-decoration: none;
	position: relative;
	background-color: #000;
	padding: 18px 30px;
	display: inline-block;
	line-height: 14px;
}
.MyContent .TextLink a{
	text-decoration:none;
	font-family: "Gotham SSm medium A", "Gotham SSm medium B", Gotham, Helvetica, Arial, sans-serif;
	color:#000;
	font-size:11px;
	text-transform:uppercase;
	border-bottom:1px solid #eee;

}
.MyContent .VideoLink  {

	margin:20px 0;
}
.MyContent .VideoLink a {
	display: inline-block;
	position: relative;
z-index: 1;
}
.MyContent .VideoLink a img {
	display: block;
	position: relative;
	max-width: 100%;
}
.MyContent .VideoLink a::after {
	content: " ";
	position: absolute;
	display: block;
	bottom: 15px;
	left: 15px;
	width: 50px;
	height: 50px;
	background-image: url("img/video-play.png");
	background-repeat: no-repeat;
}
/*------------------------------------------------------------*/
.MyContent .Bottom p{
	 margin:40px;
}

.MyContent .Sticky{
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 2000;
	width: 100%;
	height: 76px;
	border-top: #eeeeee 1px solid;
	border-bottom: #eeeeee 1px solid;
	background: linear-gradient(0deg, #FFFFFF 0%, #FFFFFF 80%, #eeeeee 100%);
	clear: both;
	display: flex;
	justify-content:center;
	align-items:center;
}
.MyContent .Sticky p{
	margin:0px;
}
.MyContent .Sticky p:nth-child(1) img{
	height:60px;
	width:auto;
	margin-left:20px;
}
.MyContent .Sticky p:nth-child(2){
	text-align:left;
	padding-left:20px;
	flex:1;
	font-size:12px;
}
@media only screen and (max-width:761px) {
.MyContent .Sticky{
	flex-wrap:wrap;
	height: 150px;
}
.MyContent .Sticky p:nth-child(1) img{
	margin-left:0px;
}
.MyContent .Sticky p:nth-child(2){
	font-size:10px;
	line-height:12px;
	padding-left:10px;
}
.MyContent .Sticky p:nth-child(3){
	flex-basis:80px;
	
}
.MyContent .Sticky div:nth-child(4){
	flex-basis:100%;
	text-align:center;
	
}
.MyContent .Sticky .product-quickshop{
	display:inline-block;
}
}
/*------------------------------------------------------------*/

@media only screen and (max-width:761px) {
.MyContent .jcarousel-pagination{
	bottom:0px;
	margin:0!important;
}
.MyContent .jcarousel{
	padding-bottom:40px;
}
}
/*------------------------------------------------------------*/
.MyContent .MyFirstScreen{
	text-align:center;
}
@media only screen and (min-width:1250px) {
.MyContent .MyFirstScreen{
	text-align:center;
	width:2000px;
	margin-left:-375px;
}
}

.MyContent .MyFirstScreen h1{
	font-size:60px;
	font-weight:normal;
	font-family:ClarinsRegular, Clarins;
	color:#000;
	padding:0;
	border-bottom:0px solid;
	display:block;
	margin:20px;
	margin-bottom:0;
}
@media only screen and (max-width:761px) {
.MyContent .MyFirstScreen h1{
	font-size:40px;
		margin-bottom:10px;
}
}
.MyContent .MyFirstScreen p{
	font-size:12px;
	font-weight:normal;
	font-family: "Gotham SSm book A", "Gotham SSm book B", Gotham, Helvetica, Arial, sans-serif;
	color:#000;
	margin:0;
	padding:0;
	display:block;
	margin-left:20px;
	margin-right:20px;
}

#HeaderAnim{
	display:-webkit-flex;
	display:flex;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	flex-direction:column;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	height:406px;
	background-color:#CCC;
}
#HeaderAnim div{
	text-align:center;
	overflow:hidden;
	flex-basis:203px;
	width:312px;
	position:relative;
	background-repeat:no-repeat;
	background-position:center center;
	transition:background-color 0.5s ease-in-out, background-image 0.5s ease-in-out;
}
#HeaderAnim div:nth-child(1){
	width:calc(50% - 312px);
	background-position:top 27px right 105px;
}
#HeaderAnim div:nth-child(2){
	width:calc(50% - 312px);
	background-position:bottom 38px right 105px;
}
#HeaderAnim div:nth-child(3){
	background-position:top 27px center;
}
#HeaderAnim div:nth-child(4){
	background-position:bottom 38px center;
}
#HeaderAnim div:nth-child(5){
	background-position:top 27px center;
}
#HeaderAnim div:nth-child(6){
	background-position:bottom 38px center;
}
#HeaderAnim div:nth-child(7){
	width:calc(50% - 312px);
	background-position:top 27px left 105px;
}
#HeaderAnim div:nth-child(8){
	width:calc(50% - 312px);
	background-position:bottom 38px left 105px;
}
@media only screen and (max-width:1249px) {
#HeaderAnim div:nth-child(1){
	width:33.33%;
	background-position:top 30px center;
}
#HeaderAnim div:nth-child(2){
	width:33.33%;
	background-position:bottom 30px center;
}
#HeaderAnim div:nth-child(3){
	width:33.33%;
	background-position:top 30px center;
}
#HeaderAnim div:nth-child(4){
	width:33.33%;
	background-position:bottom 30px center;
}
#HeaderAnim div:nth-child(5){
	width:33.33%;
	background-position:top 30px center;
}
#HeaderAnim div:nth-child(6){
	width:33.33%;
	background-position:bottom 30px center;
}
#HeaderAnim div:nth-child(7){
	width:33.33%;
	background-position:bottom 30px center;
}
#HeaderAnim div:nth-child(8){
	width:33.33%;
	background-position:bottom 30px center;
}
}
@media only screen and (max-width:520px) {
#HeaderAnim{
	height:76vw;
}
#HeaderAnim div{
	background-size:18vw auto;
	flex-basis:38vw;
}
}
.PCK1{
	background-image:url(img/product-header-1.png);
	background-color:#d8ae7a;
}
.PCK2{
	background-image:url(img/product-header-2.png);
	background-color:#be0f34;
}
.PCK3{
	background-image:url(img/product-header-8.png);
	background-color:#f6a8b5;
}
.PCK4{
	background-image:url(img/product-header-4.png);
	background-color:#009fe3;
}
.PCK5{
	background-image:url(img/product-header-5.png);
	background-color:#3db8a8;
}
.PCK6{
	background-image:url(img/product-header-6.png);
	background-color:#eb595e;
}
.PCK7{
	background-image:url(img/product-header-7.png);
	background-color:#af7353;
}
.PCK8{
	background-image:url(img/product-header-8.png);
	background-color:#d2a599;
}
.MyContent .MyFirstScreen p.BtnLink {
	padding-top: 25px;
	margin-bottom: 50px;
}

@media only screen and (max-width:1249px) {
.MyContent .MyFirstScreen p.BtnLink {
	padding-top: 15px;

}
}
/*--------------------------------------------------------------*/
.MyContent .NavContainer {
	padding-bottom: 0px;
	z-index: 2;
	position: relative;
	background-color: #FFF;
}

@media only screen and (max-width:761px) {
.MyContent .NavContainer {
	min-height: 72px;
	margin-top: 0px;
	/*border-top: 2px solid #CCC;*/
}
.MyContent .NavContainer h1 {
	top: 36px;
	padding: 0px;
	width: calc(100% - 140px);
	font-size: 11px;
	font-family: "Gotham SSm book A", "Gotham SSm book B", Gotham, Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	position: absolute;
	left: 70px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
}
.MyContent .NavContainer .BreadCrumb {
	/*padding: 20px;*/
	text-align: center;
	display: block;
	font-size: 0px;
}

.MyContent .NavContainer .BreadCrumb .NavBullet {
	color: #be0f34;
	text-decoration: none;
	font-size: 14px;
	position: relative;
	display: inline-block;
	border-radius: 50%;
	border: 1px solid #be0f34;
	background-color: #FFF;
	text-align: center;
	width: 24px;
	height: 24px;
	line-height: 24px;
	margin-left: 9px;
	margin-right: 9px;
}
.MyContent .NavContainer .BreadCrumb .NavBullet::before {
	content: " ";
	right: 100%;
	position: absolute;
	width: 10px;
	height: 1px;
	bottom: 50%;
	background-color: #be0f34;
}
.MyContent .NavContainer .BreadCrumb .NavBullet:first-child::before {
	display: none;
}
.MyContent .NavContainer .BreadCrumb .NavBullet::after {
	content: " ";
	left: 100%;
	position: absolute;
	width: 10px;
	height: 1px;
	bottom: 50%;
	background-color: #be0f34;
}
.MyContent .NavContainer .BreadCrumb .NavBullet:last-child::after {
	display: none;
}
.MyContent .NavContainer .BreadCrumb .Selected {
	color: #FFF;
	background-color: #be0f34;
	width: 34px;
	height: 34px;
	line-height: 34px;
	margin-left: 5px;
	margin-right: 5px;
}
.MyContent .NavContainer .BreadCrumb .LipsPicto {
	-webkit-background-image: url(img/lips.png);
	background-image: url(img/lips.svg);
	background-size:22px 22px;
	background-position:center center;
	background-repeat: no-repeat;
}
.MyContent .NavContainer .BreadCrumb .LipsPicto.Selected {
	-webkit-background-image: url(img/lips-white.png);
	background-image: url(img/lips-white.svg);
	background-size:22px 22px;
	background-position:center center;
	background-repeat: no-repeat;
}
.MyContent .HomeBtn {
	display: block;
	padding:20px;
}
.MyContent .HomeBtn a{
	font-size:60px;
	font-family:ClarinsRegular, Clarins;
	color:#000;
	border-bottom:0px solid;
	line-height:1em;
	text-decoration:none;
	
}
@media only screen and (max-width:761px) {
.MyContent .HomeBtn a{
	font-size:40px;
}
}
.MyContent .HomeBtn img{
	    display: block;
    position: relative;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;

}
.MyContent .BackBtn {
	display: none;
}
.MyContent .ScreenContainer {
	width: 100vw;
	margin-left: calc(625px - 50vw);
	background-color: #FFF;
	display: block;
	height: calc(100vh - 211px);
	min-height: 690px;
	position: relative;
	overflow: hidden;
	z-index: 1;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

@media only screen and (max-width:1249px) {
.MyContent .ScreenContainer {
	width: 100%;
	margin-left: 0;
	min-height: 690px;
}
}



@media only screen and (max-width:761px) {
.MyContent .ScreenContainer {
	/*	width: 1250px;*/
	margin-left: 0;
	min-height: 10px;
	height: auto!important;
}
}
.MyContent .ScreenBlock {
	position: absolute;
	top: 0px;
	left: calc(50% - 625px);
	width: 1250px;
	opacity: 0;
	display: block;
	-webkit-transition: left ease-in-out 1s, opacity ease-in-out 0.5s;
	transition: left ease-in-out 1s, opacity ease-in-out 0.5s;
	z-index: 2;
	overflow: hidden;
	height: 100%;
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	transform: translateZ(0);
	backface-visibility: hidden;
}
.MyContent .ScreenBlock .Wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0);
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	max-width: 1250px;
	width: 100%;
	
	/*-------------------------*/
	top: 0;
	-webkit-transform: translateX(-50%) translateZ(0);
	transform: translateX(-50%) translateZ(0);
}

@media only screen and (max-width:1024px) {
.MyContent .ScreenBlock .Wrapper {
	top:0;
	-webkit-transform: translateX(-50%)  translateZ(0);
	transform: translateX(-50%) translateZ(0);

}
}
.MyContent .ScreenBlock .Wrapper ul.PolaListe{
	display: block;
	width: 100%;
	text-align: center;
	font-size: 0;
	padding: 0;
	margin: 0;
	max-width: 996px;
	margin-left: auto;
	margin-right: auto;
}

@media only screen and (max-width:1023px) {
.MyContent .ScreenBlock .Wrapper ul.PolaListe {
	max-width: 720px;
}
}
@media only screen and (max-width:761px) {
.MyContent .ScreenBlock .Wrapper ul.PolaListe {
	max-width: 320px;
}
}

.MyContent .ScreenBlock .Wrapper ul.PolaListe li {
	display: inline-block;
	width: auto;
	vertical-align: top;
	font-size: 11px;
	position: relative;
	text-align: center;
}
/*
@media only screen and (max-width:1024px) {
.MyContent .ScreenBlock .Wrapper ul li {
	width: 240px;
}
}

@media only screen and (max-width:761px) {
.MyContent .ScreenBlock .Wrapper ul li {
	width: 300px;
}
}*/
.MyContent .ScreenBlock h2 {
	margin: 0;
	padding: 40px;
	font-family: ClarinsRegular, Clarins;
	font-size: 22px;
	line-height: 1em;
	font-weight: normal;
	display: block;
	text-align: center;
}

@media only screen and (max-width:761px) {
.MyContent .ScreenBlock h2 {
		font-size: 18px;padding: 20px;
}
}
.MyContent .BackgroundVisual {
	width: 100%;
	width: 1250px;
	max-width: 1250px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	height: 100%;
	position: relative;
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	transform: translateZ(0);
	backface-visibility: hidden;
}

@media only screen and (max-width:1249px) {
.MyContent .BackgroundVisual {
	margin-left: calc(50% - 625px);
}
}

@media only screen and (max-width:761px) {
.MyContent .BackgroundVisual {
	display:none!important;
}
}
.MyContent .BackgroundVisual div {
	position: absolute;
	left: calc(50% - 625px);
	top: 0px;
	opacity: 0;
	z-index: 1;
	-webkit-transition: all ease-in-out 1s;
	transition: all ease-in-out 1s;
	height: 100%;
	width: 1250px;
}

@media only screen and (max-width:1023px) {
.MyContent .BackgroundVisual div {
	-webkit-transition: none;
	transition: none;
}
}
.MyContent .BackgroundVisual div img {
	display: block;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: 100%;
}

@media only screen and (max-width:761px) {
.MyContent .BackgroundVisual div img {
	height: auto;
}
}
.MyContent .BackgroundVisual div img.js-loaded {
	width: auto;
}
.MyContent .BackgroundVisual div.Animated {
	top: 0%;
	left: calc(50% - 1000px);
	width: 2000px;
	background-color: #c7b19e;
	text-align: center;
}
.MyContent .BackgroundVisual div.Animated img:last-child {
	display: block;
	max-width: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
 @keyframes FadeIn {
 0% {
opacity:0;
}
 40% {
opacity:0;
}
 50% {
opacity:1;
}
 98% {
opacity:1;
}
 100% {
opacity:0;
}
}
.MyContent .ScreenBlock[data-selected="0"] {
	left: 100%;
	left: calc(50% - 625px);
}
 @keyframes hideFromRight {
0% {
left:calc(50% - 625px);
opacity:1;
}
99% {
left:100%;
opacity:0;
}
100% {
left:calc(50% - 625px);
opacity:0;
}
}
@keyframes hideFromLeft {
0% {
left:calc(50% - 625px);
opacity:1;
}
99% {
left:-1250px;
opacity:0;
}
100% {
left:calc(50% - 625px);
opacity:0;
}
}
.MyContent .ScreenBlock[data-selected="hideFromRight"] {
	animation: hideFromRight 0.5s ease-in-out;
}
.MyContent .ScreenBlock[data-selected="hideFromLeft"] {
	animation: hideFromLeft 0.5s ease-in-out;
}
.MyContent .ScreenBlock[data-selected="1"] {
	left: calc(50% - 625px);
	opacity: 1;
	z-index: 3;
}
.MyContent a.PolaroidBtn {
	font-size: 0px;
	background-color: #FFF;
	padding: 0px;
	display: inline-block;
	padding-bottom: 60px;
	position: relative;
	box-shadow: 0px 2px 10px rgba(0,0,0,0.1);
	margin: 2px;
	opacity:0;
	transform:translateX(100%);
	transition:opacity ease-in-out 0.2s, transform ease-in-out 0.8s;
}

.MyContent ul li:nth-child(1) a.PolaroidBtn{transition-delay:0.4s;}
.MyContent ul li:nth-child(2) a.PolaroidBtn{transition-delay:0.8s;}
.MyContent ul li:nth-child(3) a.PolaroidBtn{transition-delay:1.2s;}
.MyContent ul li:nth-child(4) a.PolaroidBtn{transition-delay:1.6s;}
.MyContent ul li:nth-child(5) a.PolaroidBtn{transition-delay:2s;}
.MyContent ul li:nth-child(6) a.PolaroidBtn{transition-delay:2.4s;}
.MyContent ul li:nth-child(7) a.PolaroidBtn{transition-delay:2.6s;}
.MyContent ul li:nth-child(8) a.PolaroidBtn{transition-delay:2.8s;}
.MyContent ul + ul li:nth-child(1) a.PolaroidBtn{transition-delay:1.6s;}
.MyContent ul + ul li:nth-child(2) a.PolaroidBtn{transition-delay:2s;}
.MyContent ul + ul li:nth-child(3) a.PolaroidBtn{transition-delay:2.4s;}

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


}
.MyContent .ScreenBlock[data-selected="1"]  a.PolaroidBtn {
	opacity:1;
	transform:translateX(0);
}
@media only screen and (max-width:761px) {
.MyContent .ScreenBlock[data-selected="1"]  a.PolaroidBtn {
	animation-name:AnimPolaFromLeft;
	animation-duration:1s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:both;
}
.MyContent ul li:nth-child(1) a.PolaroidBtn{animation-delay:0.4s;}
.MyContent ul li:nth-child(2) a.PolaroidBtn{animation-delay:0.6s;}
.MyContent ul li:nth-child(3) a.PolaroidBtn{animation-delay:0.8s;}
.MyContent ul li:nth-child(4) a.PolaroidBtn{animation-delay:1s;}
.MyContent ul li:nth-child(5) a.PolaroidBtn{animation-delay:1.2s;}
.MyContent ul li:nth-child(6) a.PolaroidBtn{animation-delay:1.4s;}
.MyContent ul li:nth-child(7) a.PolaroidBtn{animation-delay:1.6s;}
.MyContent ul li:nth-child(8) a.PolaroidBtn{animation-delay:1.8s;}

}
@keyframes AnimPolaFromLeft{
	0%{
		transform:translateX(100%);
		opacity:0;
	}100%{
		transform:translateX(0);
		opacity:1;
	}
}
@media only screen and (max-width:761px) {
.MyContent a.PolaroidBtn  {
	max-width:150px;
	transition:none;
/*padding:0;*/
}

}
.MyContent a.PolaroidBtn img {
	display: block;
	position: relative;
	max-width: 100%;
	transform:scale(1);
	transition:transform 0.5s ease-in-out;
}
@media only screen and (max-width:1024px) {
.MyContent a.PolaroidBtn img {
	max-width:245px;

}

}
@media only screen and (max-width:761px) {
.MyContent a.PolaroidBtn img {
	max-width:100%;

}

}
.MyContent a.PolaroidBtn span {
	overflow: hidden;
	display:inline-block;
	font-size: 0;
	line-height: 0;
	vertical-align:middle;
}
.MyContent a.PolaroidBtn:hover::before{
	content:" ";
	border:2px solid #000;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:4;
	box-sizing:border-box;
}
.MyContent a.PolaroidBtn:hover img{

	transform:scale(1.05);
}
.MyContent a.PolaroidBtn span.TextPola {
	font-size: 11px;
	display: block;
	line-height: 16px;
	font-family: "Gotham SSm medium A", "Gotham SSm medium B", Gotham, Helvetica, Arial, sans-serif;
	position: absolute;
	padding: 10px;
	bottom: 30px;
	-webkit-transform: translateY(50%);
	transform: translateY(50%);
	text-align: center;
	text-decoration: none;
	color: #FFF;
	left: 0;
	text-transform: uppercase;
	width: calc(100% - 20px);
}

.MyContent #Texture-01 {
	width: 1600px;
	height: 773px;
	left: calc(50% - 800px);
	top:0;
}
/*///////////////////////////////////////////////////////////*/

/*----------------------- SCREEN - 02 ----------------------*/
/*
.MyContent .AnimScreen-02 #Texture-01 {
	display: block;
	opacity: 1;
	top: calc(50% - 170px);
	top:0;
}
*/
/*
@media only screen and (max-width:761px) {
.MyContent .AnimScreen-02 #Texture-01 {
}
}*/


.MyContent .Screen-02 .Wrapper ul li:nth-child(1) .PolaroidBtn{
	background-color:#fcbb7f;
}
.MyContent .Screen-02 .Wrapper ul li:nth-child(1) .PolaroidBtn::before{
	border-color:#fcbb7f;
}
.MyContent .Screen-02 .Wrapper ul li:nth-child(2) .PolaroidBtn{
	background-color:#f198c1;
}
.MyContent .Screen-02 .Wrapper ul li:nth-child(2) .PolaroidBtn::before{
	border-color:#f198c1;
}
.MyContent .Screen-02 .Wrapper ul li:nth-child(3) .PolaroidBtn{
	background-color:#f8bc9d;
}
.MyContent .Screen-02 .Wrapper ul li:nth-child(3) .PolaroidBtn::before{
	border-color:#f8bc9d;
}
.MyContent .Screen-02 .Wrapper ul li:nth-child(4) .PolaroidBtn{
	background-color:#be0f34;
}
.MyContent .Screen-02 .Wrapper ul li:nth-child(4) .PolaroidBtn::before{
	border-color:#be0f34;
}
@media only screen and (max-width:1023px) {
.MyContent .Screen-02 .Wrapper ul {
	max-width: 480px;
}
}

/*----------------------- SCREEN - 03 ----------------------*/
@media only screen and (min-width:1024px) {
.MyContent .Screen-03  .Wrapper ul.PolaListe{
	max-width:1150px;
}

}
@media only screen and (max-width:1023px) {
.MyContent .Screen-03  .Wrapper ul.PolaListe{
	max-width:760px;
}
.MyContent .Screen-03  .Wrapper ul.PolaListe .PolaroidBtn img{
	max-width:240px;
}
}
@media only screen and (max-width:761px) {

.MyContent .Screen-03  .Wrapper ul.PolaListe .PolaroidBtn img{
	max-width:100%;
}
}

.MyContent .Screen-03 .Wrapper ul li:nth-child(1) .PolaroidBtn{
	background-color:#009fe3;
}
.MyContent .Screen-03 .Wrapper ul li:nth-child(1) .PolaroidBtn::before{
	border-color:#009fe3;
}
.MyContent .Screen-03 .Wrapper ul li:nth-child(2) .PolaroidBtn{
	background-color:#eb595e;
}
.MyContent .Screen-03 .Wrapper ul li:nth-child(2) .PolaroidBtn::before{
	border-color:#eb595e;
}
.MyContent .Screen-03 .Wrapper ul li:nth-child(3) .PolaroidBtn{
	background-color:#3db8a8;
}
.MyContent .Screen-03 .Wrapper ul li:nth-child(3) .PolaroidBtn::before{
	border-color:#3db8a8;
}
.MyContent .Screen-03 .Wrapper ul li:nth-child(4) .PolaroidBtn{
	background-color:#c20430;
}
.MyContent .Screen-03 .Wrapper ul li:nth-child(4) .PolaroidBtn::before{
	border-color:#c20430;
}
.MyContent .Screen-03 .Wrapper ul li:nth-child(5) .PolaroidBtn{
	background-color:#d8ae7a;
}
.MyContent .Screen-03 .Wrapper ul li:nth-child(5) .PolaroidBtn::before{
	border-color:#d8ae7a;
}
.MyContent .Screen-03 .Wrapper ul li:nth-child(6) .PolaroidBtn{
	background-color:#c0968b;
}
.MyContent .Screen-03 .Wrapper ul li:nth-child(6) .PolaroidBtn::before{
	border-color:#c0968b;
}
.MyContent .Screen-03 .Wrapper ul li:nth-child(7) .PolaroidBtn{
	background-color:#fa7c50;
}
.MyContent .Screen-03 .Wrapper ul li:nth-child(7) .PolaroidBtn::before{
	border-color:#fa7c50;
}
/*.MyContent .Screen-03 .Wrapper ul li:nth-child(8) .PolaroidBtn{
	background-color:#fa7c50;
}
.MyContent .Screen-03 .Wrapper ul li:nth-child(8) .PolaroidBtn::before{
	border-color:#fa7c50;
}*/

/*----------------------- SCREEN - 04 ----------------------*/
.MyContent .Screen-09 .Wrapper .ProductInfos h3,
.MyContent .Screen-09 .BeautySchool span.num,
.MyContent .Screen-09 .BeautyRoutine  h4 span.num{
	color:#d8ae7a;
}
.MyContent .Screen-09 .Wrapper .BeautyTips h3,
.MyContent .Screen-09 .Wrapper .CheckBox{
	background-color:#d8ae7a;
}
.MyContent .Screen-09 .Wrapper .BeautyTips {
	border-color:#d8ae7a;
	background-image:url(img/Product-01-Tips-Background-1.jpg), url(img/Product-01-Tips-Background-2.jpg);
	background-position:bottom left, top right;
	background-repeat:no-repeat, no-repeat;
	
}

.MyContent .Screen-09 .Wrapper .Packshot span{
    width: 28%;
    text-align: left;
    top: 15%;
}
@media only screen and (max-width:761px) {
.MyContent .Screen-09 .Wrapper .Packshot span {
	width: 20%;
	text-align: left;
	top: 0%;
}
}
.MyContent .Screen-09 .Wrapper .BeautyTips p.Ingredient:nth-child(1){
width: 100px;
	text-align: right;
	top: 15px;
	right: 200px;
}
.MyContent .Screen-09 .Wrapper .BeautyTips p.Ingredient:nth-child(2){
	width: 100px;
text-align: left;
bottom: 125px;
left: 140px;
}
/*----------------------- SCREEN - 05 ----------------------*/
.MyContent .Screen-08 .Wrapper .ProductInfos h3,
.MyContent .Screen-08 .BeautySchool span.num,
.MyContent .Screen-08 .BeautyRoutine  h4 span.num{
	color:#f6a8b5;
}
.MyContent .Screen-08 .Wrapper .BeautyTips h3,
.MyContent .Screen-08 .Wrapper .CheckBox{
	background-color:#f6a8b5;
}
.MyContent .Screen-08 .Wrapper .BeautyTips {
	border-color:#f6a8b5;
	background-image:url(img/Product-02-Tips-Background-1.jpg), url(img/Product-02-Tips-Background-2.jpg);
	background-position:top left, bottom right;
	background-repeat:no-repeat, no-repeat;
	
}

.MyContent .Screen-08 .Wrapper .Packshot span{
    width: 28%;
    text-align: left;
    top: 50%;
}
@media only screen and (max-width:761px) {
.MyContent .Screen-08 .Wrapper .Packshot span{
    width: 28%;
    text-align: left;
    top: 15%;
}
}
.MyContent .Screen-08 .Wrapper .BeautyTips p.Ingredient:nth-child(1){
width: 100px;
text-align: left;
top: 85px;
left: 70px;
}
.MyContent .Screen-08 .Wrapper .BeautyTips p.Ingredient:nth-child(2){
width: 100px;
text-align: right;
bottom: 25px;
right: 240px;
}
.MyContent .Screen-08 .BeautyTips .WrapperTips p.Text,
.MyContent .Screen-08 .BeautyTips .WrapperTips p.TextLink{
	width:206px;
}
.MyContent .Screen-08 .BeautyTips .WrapperTips p.TextLink a::after{
	display: block;
height: 5px;
content: " ";
}
/*----------------------- SCREEN - 06 ----------------------*/
.MyContent .Screen-04 .Wrapper .ProductInfos h3,
.MyContent .Screen-04 .BeautySchool span.num,
.MyContent .Screen-04 .BeautyRoutine  h4 span.num{
	color:#009fe3;
}
.MyContent .Screen-04 .Wrapper .BeautyTips h3,
.MyContent .Screen-04 .Wrapper .CheckBox{
	background-color:#009fe3;
}
.MyContent .Screen-04 .Wrapper .BeautyTips {
	border-color:#009fe3;
	background-image:url(img/Product-03-Tips-Background-1.jpg), url(img/Product-03-Tips-Background-2.jpg);
	background-position:top left, bottom right;
	background-repeat:no-repeat, no-repeat;
	
}

.MyContent .Screen-04 .Wrapper .Packshot span{
  width: 18%;
text-align: left;
top: 80%;
}
@media only screen and (max-width:761px) {
.MyContent .Screen-04 .Wrapper .Packshot span {
	width: 200px;
	text-align: center;
	top: calc(100% - 16px);
}
}
.MyContent .Screen-04 .Wrapper .BeautyTips p.Ingredient:nth-child(1){
width: 100px;
text-align: left;
top: 255px;
left: 30px;
}
.MyContent .Screen-04 .Wrapper .BeautyTips p.Ingredient:nth-child(2){
width: 100px;
text-align: right;
bottom: 25px;
right: 150px;
}
.MyContent .Screen-04 .BeautyTips .WrapperTips p.Text,
.MyContent .Screen-04 .BeautyTips .WrapperTips p.TextLink{
	width:236px;
}
.MyContent .Screen-04 .BeautyTips .WrapperTips p.TextLink a::after{
	display: block;
height: 5px;
content: " ";
}
/*----------------------- SCREEN - 07 ----------------------*/
.MyContent .Screen-06 .Wrapper .ProductInfos h3,
.MyContent .Screen-06 .BeautySchool span.num,
.MyContent .Screen-06 .BeautyRoutine  h4 span.num{
	color:#3db8a8;
}
.MyContent .Screen-06 .Wrapper .BeautyTips h3,
.MyContent .Screen-06 .Wrapper .CheckBox{
	background-color:#3db8a8;
}
.MyContent .Screen-06 .Wrapper .BeautyTips {
	border-color:#3db8a8;
	background-image:url(img/Product-04-Tips-Background-1.jpg), url(img/Product-04-Tips-Background-2.jpg);
	background-position:top left, bottom right;
	background-repeat:no-repeat, no-repeat;
	
}

.MyContent .Screen-06 .Wrapper .Packshot span {
	width: 30%;
	text-align: left;
	top: 80%;
}
@media only screen and (max-width:761px) {
.MyContent .Screen-06 .Wrapper .Packshot span {
	width: 20%;
	text-align: left;
	top: 80%;
}	
}
.MyContent .Screen-06 .Wrapper .BeautyTips p.Ingredient:nth-child(1) {
	width: 100px;
	text-align: left;
	top: 65px;
	left: 30px;
}
.MyContent .Screen-06 .Wrapper .BeautyTips p.Ingredient:nth-child(2){
width: 100px;
text-align: right;
bottom: 65px;
right: 180px;
}
.MyContent .Screen-06 .BeautyTips .WrapperTips p.Text,
.MyContent .Screen-06 .BeautyTips .WrapperTips p.TextLink{
	width:236px;
}
.MyContent .Screen-06 .BeautyTips .WrapperTips p.TextLink a::after{
	display: block;
height: 5px;
content: " ";
}
/*----------------------- SCREEN - 08 ----------------------*/
.MyContent .Screen-07 .Wrapper .ProductInfos h3,
.MyContent .Screen-07 .BeautySchool span.num,
.MyContent .Screen-07 .BeautyRoutine  h4 span.num{
	color:#be0f34;
}
.MyContent .Screen-07 .Wrapper .BeautyTips h3,
.MyContent .Screen-07 .Wrapper .CheckBox{
	background-color:#be0f34;
}
.MyContent .Screen-07 .Wrapper .BeautyTips {
	border-color:#be0f34;
	background-image:url(img/Product-05-Tips-Background-1.jpg);
	background-position:bottom right;
	background-repeat:no-repeat;
	
}

.MyContent .Screen-07 .Wrapper .Packshot span{
  width: 30%;
text-align: left;
top: 80%;
}
@media only screen and (max-width:761px) {
.MyContent .Screen-07 .Wrapper .Packshot span{
  width: 18%;
text-align: left;
top: 80%;
}	
	
}
.MyContent .Screen-07 .Wrapper .BeautyTips p.Ingredient:nth-child(1){
width: 100px;
text-align: left;
top: 255px;
left: 30px;
}
.MyContent .Screen-07 .Wrapper .BeautyTips p.Ingredient:nth-child(2){
width: 100px;
text-align: right;
bottom: 25px;
right: 150px;
}
.MyContent .Screen-07 .BeautyTips .WrapperTips {
	max-width: 555px;
	margin-left:0;
	text-align:right;
}
.MyContent .Screen-07 .BeautyTips .WrapperTips p.Text,
.MyContent .Screen-07 .BeautyTips .WrapperTips p.TextLink{
	width:236px;
}
.MyContent .Screen-07 .BeautyTips .WrapperTips p.TextLink a::after{
	display: block;
height: 5px;
content: " ";
}
/*----------------------- SCREEN - 09 ----------------------*/
.MyContent .Screen-05 .Wrapper .ProductInfos h3,
.MyContent .Screen-05 .BeautySchool span.num,
.MyContent .Screen-05 .BeautyRoutine  h4 span.num{
	color:#eb595e;
}
.MyContent .Screen-05 .Wrapper .BeautyTips h3,
.MyContent .Screen-05 .Wrapper .CheckBox{
	background-color:#eb595e;
}
.MyContent .Screen-05 .Wrapper .BeautyTips {
	border-color:#eb595e;
	background-image:url(img/Product-06-Tips-Background-1.jpg), url(img/Product-06-Tips-Background-2.jpg);
	background-position:top left, bottom right;
	background-repeat:no-repeat, no-repeat;
	
}

.MyContent .Screen-05 .Wrapper .Packshot span{
width: 20%;
text-align: left;
top: 27%;
}
@media only screen and (max-width:761px) {
	.MyContent .Screen-05 .Wrapper .Packshot span{
  width: 18%;
text-align: left;
top: 0%;
}
}
.MyContent .Screen-05 .Wrapper .BeautyTips p.Ingredient:nth-child(1){
width: 100px;
text-align: left;
top: 85px;
left: 70px;
}
.MyContent .Screen-05 .Wrapper .BeautyTips p.Ingredient:nth-child(2){
width: 100px;
text-align: right;
bottom: 25px;
right: 240px;
}
.MyContent .Screen-05 .BeautyTips .WrapperTips p.Text,
.MyContent .Screen-05 .BeautyTips .WrapperTips p.TextLink{
	width:236px;
}
.MyContent .Screen-05 .BeautyTips .WrapperTips p.TextLink a::after{
	display: block;
height: 5px;
content: " ";
}



/*----------------------- SCREEN - 10 ----------------------*/
.MyContent .Screen-10 .Wrapper .ProductInfos h3,
.MyContent .Screen-10 .BeautySchool span.num,
.MyContent .Screen-10 .BeautyRoutine  h4 span.num{
	color:#dbb9b0;
}
.MyContent .Screen-10 .Wrapper .BeautyTips h3,
.MyContent .Screen-10 .Wrapper .CheckBox{
	background-color:#dbb9b0;
}
.MyContent .Screen-10 .Wrapper .BeautyTips {
	border-color:#eb595e;
	background-image:url(img/Product-07-Tips-Background-1.jpg), url(img/Product-07-Tips-Background-2.jpg);
	background-position:top left, bottom right;
	background-repeat:no-repeat, no-repeat;
	
}
@media only screen and (min-width:762px) {
#Phyto-Serum   {
	overflow:hidden;
}
#Phyto-Serum img {
	margin-right:-50%;
}
}

.MyContent .Screen-10  .BeautySchool {
	justify-content: center;
	align-items: flex-start;
}

.MyContent .Screen-10 .Wrapper .Packshot span {
	width: 30%;
	text-align: right;
	top: 80%;
	right: 50%;
}
.MyContent .Screen-10 .WrapperTips {
	max-width: 700px!important;
	
}
.MyContent .Screen-10 .WrapperTips p.Visual{
	padding: 30px;
	height: 280px;
	max-width: 606px!important;
	
}
.MyContent .Screen-10 .Wrapper ul.HowToThumbs{
	width:400px!important;
	padding-top: 20px!important;
}
.MyContent .Screen-10 .Wrapper ul.HowToThumbs li{
	margin:0!important;

	padding-bottom:20px!important;
	text-align: left!important;
	position:relative!important;
	line-height:1.2em!important;
	align-items:flex-end!important;
	
}
@media only screen and (min-width:1024px) {
.MyContent .Screen-10 .Wrapper ul.HowToThumbs li{
	padding-left:30px!important;
}
}

@media only screen and (max-width:1023px) {
.MyContent .Screen-10 .Wrapper ul.HowToThumbs{
	width:470px!important;
	padding-top: 20px!important;
}
.MyContent .ScreenBlock .Wrapper ul.HowToThumbs li p:last-child{
	flex:1;
	max-width: 300px;
}
}
.MyContent .Screen-10 .BeautySchool span.num{
	/*font-size:30px!important;
	position:absolute!important;
	left:170px!important;
	top:10px!important;*/
	font-size:14px!important;
	margin-left:0!important;
}

.MyContent .Screen-10 .Wrapper ul.HowToThumbs li img{
margin-right:20px!important;
}

@media only screen and (max-width:761px) {
.MyContent .Screen-10 .Wrapper .Packshot span{
	width: 18%;
	text-align: left;
	top: 0%;
	right:40%;
}
.MyContent .Screen-10 .WrapperTips p.Visual{
	height:180px;
}
.MyContent #Phyto-Serum  {
	transform: translate(50px,0);
}

}
.MyContent .Screen-10 .Wrapper .BeautyTips p.Ingredient:nth-child(1){
width: 100px;
text-align: left;
top: 85px;
left: 70px;
}
.MyContent .Screen-10 .Wrapper .BeautyTips p.Ingredient:nth-child(2){
width: 100px;
text-align: right;
bottom: 25px;
right: 150px;
}
.MyContent .Screen-10 .red{
color:#be0f34;
}

@media only screen and (min-width:1024px) {
.MyContent .Screen-10 .BeautyTips .WrapperTips p.Text,
.MyContent .Screen-10 .BeautyTips .WrapperTips p.TextLink{
	width:336px;
}
}
.MyContent .Screen-10 .BeautyTips .WrapperTips p.TextLink a::after{
	display: block;
height: 5px;
content: " ";
}

/*----------------------- SCREEN - 11 ----------------------*/
.MyContent .Screen-11 .Wrapper .ProductInfos h3,
.MyContent .Screen-11 .BeautySchool span.num,
.MyContent .Screen-11 .BeautyRoutine  h4 span.num{
	color:#eb595e;
}
.MyContent .Screen-11 .Wrapper .BeautyTips h3,
.MyContent .Screen-11 .Wrapper .CheckBox{
	background-color:#eb595e;
}
.MyContent .Screen-11 .Wrapper .BeautyTips {
	border-color:#eb595e;
	background-image:url(img/Product-08-Tips-Background-1.jpg), url(img/Product-08-Tips-Background-2.jpg);
	background-position:top left -65px, bottom right;
	background-repeat:no-repeat, no-repeat;
}
.MyContent .Screen-11 .BeautyTips .WrapperTips p.Visual{
	width:auto;
}
@media only screen and (max-width:761px) {
.MyContent .Screen-11 .BeautyTips .WrapperTips p.Visual{
	width:auto;
	margin-bottom:15px;
}
}
.MyContent .Screen-11 .Wrapper .BeautyTips .WrapperTips{	
	height: 320px;
	max-width: 656px;

}
@media only screen and (max-width:761px) {
.MyContent .Screen-11 .Wrapper .BeautyTips .WrapperTips{	
	height: auto;
}	
}
.MyContent .Screen-11 .Wrapper .Packshot span {
	width: 30%;
	text-align: left;
	top: 57%;
}
@media only screen and (max-width:761px) {
	.MyContent .Screen-11 .Wrapper .Packshot span{
  width: 48%;
text-align: left;
top: 0%;
}
}
.MyContent .Screen-11 .Wrapper .BeautyTips p.Ingredient:nth-child(1) {
	width: 200px;
	text-align: left;
	top: 60px;
	left: 130px;
}
.MyContent .Screen-11 .Wrapper .BeautyTips p.Ingredient:nth-child(2){
width: 100px;
text-align: right;
bottom: 25px;
right: 140px;
}
.MyContent .Screen-11 .BeautyTips .WrapperTips p.Text,
.MyContent .Screen-11 .BeautyTips .WrapperTips p.TextLink{
	width:306px;
}
@media only screen and (max-width:761px) {
.MyContent .Screen-11 .BeautyTips .WrapperTips p.Text,
.MyContent .Screen-11 .BeautyTips .WrapperTips p.TextLink{
	width:auto;
}
}
.MyContent .Screen-11 .BeautyTips .WrapperTips p.TextLink a::after{
	display: block;
height: 5px;
content: " ";
}
/*--------------------------------------------------------*/
@media only screen and (max-width:761px) {
.MyContent .ScreenBlock {
	position: relative!important;
	top: auto!important;
	left: auto!important;
	width: 100%!important;
	display: none;
	padding-bottom: 30px;
	-webkit-transition: none;
	transition: none;
}
.MyContent .ScreenBlock[data-selected="1"] {
	top: auto!important;
	left: auto!important;
	opacity: 1;
	z-index: 3;
	display: block;
}
.MyContent .ScreenBlock .Wrapper {
	position: relative!important;
	top: auto!important;
	left: auto!important;
	-webkit-transform: none!important;
	transform: none!important;
	width: 100%;
}
}
.MyContent .Action {
	display: none;
}
/*----------------------- SCREEN - PRODUCTS ----------------------*/
.MyContent .ProductScreen[data-selected="1"]{
	height:auto;
	position:relative;
	-webkit-transform:none;
	transform:none;
	width:100%;
	left:auto;
}

.MyContent .ProductScreen[data-selected="1"] .Wrapper {
	position:relative;
	-webkit-transform:none;
	transform:none;
	margin-left:auto;
	margin-right:auto;
	left:auto;
}
.MyContent .Packshot{
	position:relative;
	display:inline-block;
	vertical-align:middle;	
}

.MyContent .Packshot img{
	position:relative;
}
@media only screen and (max-width:1023px) {
.MyContent .Packshot img{
	max-width:350px;
}
}
@media only screen and (max-width:761px) {
	.MyContent .Packshot {
margin-left: auto;
margin-right: auto;
max-width: 200px;
display: block;
padding-left:120px;
}
.MyContent .Packshot img{
	max-width:100%;
}
}
.MyContent .Packshot span{
	position:absolute;
	font-size:12px;
	right:0;
	top:0;
	line-height:1em;
}
@media only screen and (max-width:761px) {
.MyContent .Packshot span{
	font-size:10px;
}
}
.MyContent .ProductInfos{
	vertical-align:middle;
	position:relative;
	display:inline-block;

	max-width:407px;
	text-align:left;
	margin:20px;
}
@media only screen and (max-width:1023px) {
.MyContent .ProductInfos{
	max-width:350px;
}
}
@media only screen and (max-width:761px) {
.MyContent .ProductInfos{
	margin-top:0;
	margin-left:auto;
	margin-right:auto;
	display:block;
	width:calc(100% - 40px);
}
}
.MyContent .ProductInfos h3{
	margin:0;
	padding:0;
	font-size:30px;
	border-bottom:0px solid;
	text-transform:none;
	line-height:1em;
	font-weight:normal;
	font-family:ClarinsRegular, Clarins;
}
@media only screen and (max-width:761px) {
	.MyContent .ProductInfos h3{
		position:absolute;
		right:50%;
		text-align:right;
		top:-120px;
		transform:translateY(-100%)
	}
	.MyContent .ProductInfos .Price{
		position:absolute;
		right:50%;
		text-align:right;
		top:-90px;
		transform:translateY(-100%)
	}
	.MyContent .ProductInfos .BtnLink{
		position:absolute;
		right:50%;
		text-align:right;
		top:-15px;
		transform:translateY(-100%)
	}
}
.MyContent .ProductInfos .Text{
	margin:0px;
	padding:0px;
	padding-top:20px;
}
@media only screen and (max-width:761px) {
.MyContent .ProductInfos .Text{
	padding-top:0px;
	text-align:center;
}
}
.MyContent .ProductInfos .Title{
	margin:0px;
	text-transform:uppercase;
	padding-top:20px;
	padding-bottom:20px;
		font-family: "Gotham SSm medium A", "Gotham SSm medium B", Gotham, Helvetica, Arial, sans-serif;
}
.MyContent .ProductInfos ul.CheckBox{
	font-size:14px;
	color:#FFF;
	padding:20px;
	margin:0;
	list-style:none;
	box-sizing:border-box;
	padding-top:12px;
}
@media only screen and (max-width:761px) {
.MyContent .ProductInfos ul.CheckBox{
	max-width:760px;
}
}
.MyContent .ProductInfos ul.CheckBox  li{
	display:block;
	text-align:left;
	padding-left:40px;
	background-image:url(img/checkbox.png);
	background-repeat:no-repeat;
	background-position:top left;
	font-size:14px;
	padding-top:8px;
	margin-top:8px;
	
	
}
.MyContent .BeautySchool {
	display:-webkit-flex;
	display:flex;
	-webkit-flex-direction:row;
	flex-direction:row;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
}
@media only screen and (max-width:761px) {
.MyContent .BeautySchool {
margin-left:20px;
margin-right:20px;
}
}
.MyContent .BeautySchool h3{
	margin:0;
	padding:20px;
	font-size:50px;
	border-bottom:0px solid;
	text-transform:none;
	line-height:1em;
	font-weight:normal;
	font-family:ClarinsRegular, Clarins;
	color:#000;
	flex-basis:100%;
	box-sizing:border-box;
	
}
@media only screen and (max-width:761px) {
.MyContent .BeautySchool h3{
font-size:40px;
}
}
.MyContent .BeautySchool p.Text{
	margin:0;
	padding:20px;
	flex-basis:100%;
	box-sizing:border-box;
	padding-top:0;
}
.MyContent .BeautySchool  img{
	display:block;
}
@media only screen and (max-width:1249px) {
.MyContent .BeautyRoutine {
	width:980px;
}
}
@media only screen and (max-width:1023px) {
.MyContent .BeautyRoutine {
	width:768px;
}
}
@media only screen and (max-width:761px) {
.MyContent .BeautyRoutine {
	width:100%;
}
}
.MyContent .BeautyRoutine h3{
	margin:0;
	padding:0;
	font-size:50px;
	border-bottom:0px solid;
	text-transform:none;
	line-height:1em;
	font-weight:normal;
	font-family:ClarinsRegular, Clarins;
	color:#000;
	padding-bottom:10px;
}
.MyContent .BeautyRoutine  h4{
	margin:0;
	font-size:35px;
	font-family:ClarinsRegular, Clarins;
	color:#000;
	border-bottom:0px solid;
	line-height:1em;
	font-weight:normal;
	display:block;
	clear:both;
}
.MyContent .BeautyRoutine  h4 span.num{
		font-family: "Gotham SSm book A", "Gotham SSm book B", Gotham, Helvetica, Arial, sans-serif;
}
.MyContent .BeautyRoutine  p{
		font-size:14px;
		margin:20px;
}
.MyContent .BeautyRoutine  p.PackshotRoutine{
		margin:0px;
		min-width:320px;
		display:block;
		position:relative;
		font-size:0;
		padding:0;
}
.MyContent .BeautyRoutine  p.Text{
	min-height:40px;
}
@media only screen and (max-width:1023px) {
.MyContent .BeautyRoutine p.PackshotRoutine{
	position:relative!important;
	height:320px!important;
	min-width:240px!important;
	display:block!important;
	float:none!important;
	clear:both!important;
	border:1px solid #FFF;
	padding:0!important;
	font-size:0;
}

.MyContent .BeautyRoutine p.PackshotRoutine img{
	margin:0!important;
	padding:0!important;
	width:192px!important;
	height:230px!important;
	left:calc(50% - 96px)!important;
	position:absolute!important;
	float:none!important;
	display:block!important;
	bottom:0!important;
}

.MyContent .BeautyRoutine p[data-width="300"] img{
	width:237px!important;
	left:calc(50% - 118px)!important;
}
.MyContent .BeautyRoutine p[data-width="280"] img{
	width:222px!important;
	left:calc(50% - 111px)!important;
}
.MyContent .BeautyRoutine p[data-width="260"]  img{
	width:206px!important;
	left:calc(50% - 103px)!important;
}
.MyContent .BeautyRoutine p[data-width="340"]  img{
	width:269px!important;
	left:calc(50% - 134px)!important;
}
}
.MyContent .ScreenBlock .Wrapper ul.HowToThumbs{
	margin:0;
	padding:0;
	display:-webkit-flex;
	display:flex;
	-webkit-flex-direction:column;
	flex-direction:column;
	width:263px;
	margin-left:10px;
}
@media only screen and (max-width:761px) {
	.MyContent .ScreenBlock .Wrapper ul.HowToThumbs{
		display:none;
	}
	
}
.MyContent .ScreenBlock .Wrapper ul.HowToThumbs li{
	margin:5px;
	padding:0;
	display:-webkit-flex;
	display:flex;
	-webkit-flex-direction:row;
	flex-direction:row;
	justify-content:flex-start;
	align-items:flex-end;
	font-size:14px;
}
@media only screen and (min-width:762px) {
.MyContent .ScreenBlock .Wrapper ul.HowToThumbs li:first-child{
		margin-top:0px
	
}
	
}
.MyContent .ScreenBlock .Wrapper ul.HowToThumbs li span{
	margin-left:5px;
		margin-right:5px;
		display:inline-block;
}
.MyContent .ScreenBlock .Wrapper ul.HowToThumbs li p{
	margin:0;
	padding:0;
}

@media only screen and (max-width:1023px) {
.MyContent .ScreenBlock .Wrapper ul.HowToThumbs li p{
	margin:0;
	padding:0;
	display:block;
	position:relative;
	border:1px solid #fff;
}
	
}

.MyContent .BeautyTips {
	border:2px solid;
	max-width:970px;
	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-top:90px;
	position:relative;
}
.MyContent .BeautyTips h3{
	border-radius: 50%;
	width: 118px;
	height: 118px;
	color: #FFF;
	margin-top: -60px;
	text-align: center;
	font-size: 25px;
	display:-webkit-flex;
	display:flex;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	font-family: ClarinsRegular,Clarins;
	font-weight: normal;
	justify-content:center;
	align-items:center;
	line-height:1em;
}
.MyContent .BeautyTips .WrapperTips{
	padding:30px;
	display:-webkit-flex;
	display:flex;
	-webkit-flex-direction:column;
	flex-direction:column;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	height:280px;
	justify-content:center;
	align-items:center;
	max-width:606px;
	margin-left: auto;
	margin-right: auto;
}
@media only screen and (max-width:761px) {
.MyContent .BeautyTips .WrapperTips{
	max-width:280px;
	-webkit-flex-wrap:nowrap;
	flex-wrap:nowrap;
	height:auto;
}
.MyContent .BeautyTips .WrapperTips img{
	max-width:100%;
}		
}
.MyContent .BeautyTips .WrapperTips p.Visual{
	margin:0;
	display:inline-block;
	max-width:222px;
}
.MyContent .BeautyTips .WrapperTips p.Text{
	margin:0;
	display:inline-block;
	text-align:left;
	width:306px;
}
@media only screen and (max-width:761px) {
.MyContent .BeautyTips .WrapperTips p.Text{
	text-align:center;
	width:auto;
}	
}
.MyContent .BeautyTips .WrapperTips p.TextLink{
	margin:0;
	display:inline-block;
	text-align:left;
	width:306px;
	padding-top:20px;
}
@media only screen and (max-width:761px) {
.MyContent .BeautyTips .WrapperTips p.TextLink{
	text-align:center;
	width:auto;
}	
}
.MyContent .BeautyTips p.Ingredient{
	position:absolute;
	font-size:12px;
	text-align:left;
	margin:0;
	line-height:1em;
}
@media only screen and (max-width:1023px) {
.MyContent .BeautyTips {
	width:calc(100% - 40px);
	background-image:none!important;
}
.MyContent .BeautyTips p.Ingredient{
	display:none;
}
}
/*----------------------------------------------------*/

.MyContent .TextEnd {
	padding: 30px;
	text-align: center;
	margin: 0px;
	/*margin-top: 30px;*/
}
@media only screen and (max-width:1023px) {
.MyContent .TextEnd {
	margin-top:10px;
	padding-top: 10px;
}
}
@media only screen and (max-width:761px) {
.MyContent .TextEnd {
	margin-top:10px;
	padding-top: 10px;
}
}

.MyContent .TextEnd  a {
	font-family: "Gotham SSm medium A", "Gotham SSm medium B", Gotham, Helvetica, Arial, sans-serif;
	font-size: 11px;
	border: 2px solid #e5e5e5;
	text-transform: uppercase;
	color: #000;
	text-decoration: none;
	position: relative;
	background-color: #FFF;
	padding: 11px 30px;
	display: inline-block;
	line-height: 14px;
	margin-top:10px;
}

.link-day {
	position: absolute;
	width: 50%;
	height: 40%;
	top: 18%;
	left: 24%;
}

.link-night {
	position: absolute;
	width: 50%;
	height: 40%;
	bottom: 5%;
	left: 14%;
}


/*DTW EDITS*/
@media only screen and (max-width: 1023px){
	.MyContent .BeautyRoutine h4{
		font-size: 30px;
	}
}


@media only screen and (max-width: 761px){
	.MyContent .Sticky p{
		margin-left: 15px;
	}
}

@media only screen and (width: 1024px){
	.MyContent .BeautyRoutine p.PackshotRoutine{
		margin-left: 50px;
	}

}



/*screen*/
.MyContent .Screen-03 .Wrapper ul.PolaListe{
	max-width: 870px;
}

@media only screen and (width: 1024px){
	.MyContent .Screen-03 .Wrapper ul.PolaListe{
		max-width: 750px;
	}
}

.MyContent .Screen-06 .Wrapper .BeautyTips p.Ingredient:nth-child(1) {
	top:79px;
	left:19px;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.MyContent .BeautyTips .WrapperTips{
		height:308px;
	}
}
/*@media only screen and (min-width:1023px) and (max-width:1024px) {
	.jcarousel li{
		margin-top:10px;
	}
	img.DTW{
		    margin-top: 68px!important;
		}
	}
} 


@media only screen and (min-width:768px) and (max-width:1023px) {
	.MyContent .BeautyRoutine p[data-width="340"] img {
    width: 500px!important;
	}
}*/


@media only screen and (min-width:768px) and (max-width: 1023px){
	.MyContent .BeautyRoutine p img{
		min-height: 300px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media only screen and (min-width:1023px) and (max-width: 1024px){
	img.DTW {
    margin-left:-5px!important;
	}
	img.DTW01 {
	margin-left:-10px!important;
	}
}

@media only screen and (min-width:768px) and (max-width:1023px) {
	.My-Content #Transversal-Push .products-pagination.jcarousel-control-prev {
    left: 20px;
}
}

@media only screen and (max-width: 761px){
	img.DTW {
    margin-top: -60px;
    margin-left: 0px;
	}
	img.DTW01 {
	margin-left:30px;
/*	padding-left: 20px;*/
	}
	img.DTW02{
	margin-top:3px!important;
	}
	img.DTW03{
	margin-top:60px!important;
}
img.DTW02{
	margin-left:50px;
	padding-left: 40px;
}
}

@media not all and (min-resolution:.001dpcm) {
	img.DTW {
		margin-left:63px;
	}

	img.DTW01 {
	margin-left: 33px;
	}
}



@media screen and (min-width: 768px) and (max-width: 1112px){
	.jcarousel li{
		width: 325px!important;
	}
	.MyContent .BeautyRoutine{
		width: 1111px;
	}
	.jcarousel{
		margin-left: 60px;
	}
	img.DTW{
		margin: 0 auto;
	}
	img.DTW03{
		margin: 70px auto 0 auto;
	}
}

@media screen and (min-width: 768px) and (max-width: 1111px){
	.jcarousel li{
		width: 280px!important;
	}
	.jcarousel{
		margin-left: -10px;
	}
}



@media only screen and (max-width: 761px){
	img.DTW02{
		margin-left: -30px;
	}
}

/* AR - CUSTOM CSS */
.MyContent *,
.MyContent .MyFirstScreen h1,
.MyContent .MyFirstScreen p,
.MyContent .BtnLink a,
.MyContent .HomeBtn a,
.MyContent .ScreenBlock h2,
.MyContent a.PolaroidBtn span.TextPola,
.MyContent .ProductInfos h3,
.MyContent .ProductInfos .Title,
.MyContent .BeautyRoutine h3,
.MyContent .BeautyRoutine h4,
.MyContent .BeautyTips h3,
.MyContent .TextLink a,
.MyContent .BeautySchool h3,
.MyContent .BtnLink a {
	font-family: Tajawal, Helvetica, Arial, sans-serif;
  	font-weight: 400;
}
.MyContent a.PolaroidBtn span.TextPola{
	font-weight: 500;
}
.MyContent strong{
	font-weight: 700;
}
.MyContent .ProductInfos,
.MyContent .Screen-04 .Wrapper .Packshot span,
.MyContent .Screen-05 .Wrapper .Packshot span,
.MyContent .Screen-06 .Wrapper .Packshot span,
.MyContent .ProductInfos ul.CheckBox li,
.MyContent .ScreenBlock .Wrapper ul.HowToThumbs li,
.MyContent .Screen-04 .Wrapper .BeautyTips p.Ingredient:nth-child(1),
.MyContent .Screen-05 .Wrapper .BeautyTips p.Ingredient:nth-child(1),
.MyContent .Screen-06 .Wrapper .BeautyTips p.Ingredient:nth-child(1),
.MyContent .BeautyTips .WrapperTips p.Text,
.MyContent .BeautyTips .WrapperTips p.TextLink,
.MyContent .Sticky p:nth-child(2) {
	text-align: right;
}
.MyContent .ScreenBlock .Wrapper,
.MyContent .ScreenBlock h2{
	direction: rtl;
}
.MyContent .ProductInfos ul.CheckBox li{
	padding-left: unset;
	padding-right: 40px;
	background-position: top right;
}
.MyContent .VideoLink a::after{
	left: unset;
	right: 15px;
}
.MyContent .Sticky p:nth-child(1) img{
	margin-left: unset;
	margin-right: 20px;
}
.MyContent .Sticky p:nth-child(2){
	padding-left: unset;
	padding-right: 20px;
}
@media only screen and (max-width: 761px){
	.MyContent .Sticky p:nth-child(1) img{
		margin-right: 0px;
	}
	.MyContent .Sticky p:nth-child(2){
		padding-right: 10px;
	}
}

.MyContent .BeautyRoutine .jcarousel[dir=rtl] li {
    float: right;
}

.MyContent .BeautyRoutine .jcarousel[dir=rtl]:not(.howToApplyCarousel,.addToCartDialog,.jcarousel-native) :not(.swatchesCircle)>img:not(.articleImages-carousel):not(.YTVideoPreview){
	margin-left: unset;
	margin: 0 auto;
}

/* screen 2 */
.MyContent .NavContainer .BreadCrumb{
	direction: rtl;
}
.MyContent .NavContainer .BreadCrumb .NavBullet::after{
	left: unset;
	right: 100%;
}
.MyContent .NavContainer .BreadCrumb .NavBullet::before{
	left: 100%;
	right: unset;
}
.MyContent a.PolaroidBtn {
	-webkit-transform:translateX(-100%);
	-moz-transform:translateX(-100%);
	-ms-transform:translateX(-100%);
	transform:translateX(-100%);
}

/* screen 4 */
.MyContent .Packshot span{
	right: 10px;
}
@media only screen and (max-width: 761px){
	.MyContent .Packshot{
		max-width: 140px;
    	padding-left: 185px;
	}
	.MyContent .Screen-04 .Wrapper .Packshot span{
		text-align: center;
		right: 0;
	}
	.MyContent .BeautyTips .WrapperTips p.Text,
	.MyContent .BeautyTips .WrapperTips p.TextLink{
		text-align: center;
	}
}

/* screen 5 */
.MyContent .Screen-05 .Wrapper .BeautyTips p.Ingredient:nth-child(2){
	bottom: 195px;
    right: 60px;
}
.MyContent .Screen-05 .Wrapper .Packshot span{
	right: 40px;
}
.MyContent .Screen-05 .Wrapper .BeautyTips p.Ingredient:nth-child(1){
	left: 20px;
}

/* screen 6 */
.MyContent .Screen-06 .Wrapper .Packshot span{
	right: 40px;
}
.MyContent .Screen-06 .Wrapper .BeautyTips p.Ingredient:nth-child(1){
	left: -10px;
}

/* screen 7 */
.MyContent .Screen-07 .Wrapper .BeautyTips{
	background-image: url("img/AR/Product-05-Tips-Background-1.jpg");
	background-position: bottom left;
}
.MyContent .Screen-07 .BeautyTips .WrapperTips{
	margin-right: 0;
	margin-left: unset;
}

/* screen 8 */
.MyContent .Screen-08 .Wrapper .BeautyTips p.Ingredient:nth-child(2){
	bottom: 195px;
    right: 60px;
}

/* screen 10 */
.MyContent .Screen-10 .Wrapper ul.HowToThumbs li{
	text-align: right !important;
}
.MyContent .Screen-10 .Wrapper ul.HowToThumbs li img{
	margin-right: unset !important;
	margin-left: 20px;
}
.MyContent .Screen-10 .BeautySchool span.num{
	margin-left: 5px !important;
	margin-right: 0 !important;
}
@media only screen and (min-width: 1024px){
	.MyContent .Screen-10 .Wrapper ul.HowToThumbs li {
		padding-right: 30px !important;
		padding-left: unset !important;
	}
}

/* .MyContent .Screen-05 .Wrapper .BeautyTips {
	background-position: top right, bottom left;
}
.MyContent .Screen-05 .Wrapper .BeautyTips p.Ingredient:nth-child(1) { left: 85%; }
.MyContent .Screen-05 .Wrapper .BeautyTips p.Ingredient:nth-child(2) { right: 90%; } */

.MyContent .BeautySchool img {
	transform: scaleX(-1);
}
.MyContent .ScreenBlock .Wrapper ul.HowToThumbs {
	margin-right: 10px;
	margin-left: initial;
}