#main:not(.main-homepage) {
    margin-top: 0px;
}
.breadcrumb {
    display:none;
}
.MyContent{
	display:block;
	width:100%;
	max-width:1170px;
	min-width:320px;
	margin:0 auto;
}
@media screen and (max-width: 1170px) {
.MyContent{
   overflow:hidden;
}
}
.MyContent button:not(.not-tabbable):active, 
.MyContent button:not(.not-tabbable):focus {
	outline:0px solid!important;
}
.MyContent .MyBlock{
	font-family: "Kanit Light", "Gotham SSm book A", "Gotham SSm book B", "Gotham Book", Helvetica, Arial, sans-serif;
	color:#000;
	font-size:16px;
	line-height:22px;
	text-align:center;
}


@media screen and (min-width: 1171px) {
.MyContent .MyFullWidthBlock{
    margin-left:-215px;
    width:1600px;
}
}


.MyContent .AnchorTag {
	margin:0px;
	padding-top:50px;
	margin-top:-50px;
}
/*------------------------------------------------------------------------------------------*/
.MyContent .BtnLink {
	margin:0px;
}
.MyContent .BtnLink span, .MyContent .BtnLink a {
	font-family: "Kanit Light", "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	color: white;
	text-decoration: none;
	position: relative;
	padding-top: 16px;
	padding-right: 30px;
	padding-bottom: 16px;
	padding-left: 30px;
	display: inline-block;
	line-height: 14px;
	min-width: 110px;
	text-align: center;
	background-color: black;
	cursor:pointer;
	transition:color ease-in-out 0.5s, background 0.5s ease-in-out ;
	border: 2px solid #000;
}
.MyContent .BtnLink span:hover, .MyContent .BtnLink a:hover {
	color: black;
	background-color: white;

}
/*------------------------------------------------------------------------------------------*/
.MyContent .Expand a::after{
	content:" ";
	background-image:url(img/expand.png);
	width:50px;
	height:50px;
	background-position:center top 19px;
	background-repeat:no-repeat;
	position:absolute;
	right:10px;
	top:0;
}
.MyContent .Expand a:hover::after{
	background-image:url(img/expand-black.png);
}
.MyContent .Expand a{
	padding-right:40px;
}

.MyContent .Expanded .Expand a::after{
	transform:rotate(180deg);top: -4px;
}
/*---------------------------------*/
#SUNEXTENSION-Header{
	background-color:#6d9ec6;
	height:342px;
	background-image:url(img/header.jpg);
	position:relative;
	background-position: top center;
}
@media screen and (max-width: 761px) {
#SUNEXTENSION-Header{
	padding:0px;
	background-size:auto;
	background-repeat: no-repeat;
	background-position:top center;
	height: auto;
	background-image:url(img/header-mobile.jpg);
	background-color:#fff;
	  padding-top:209px;
}
}
#SUNEXTENSION-Header .WhiteBox{
	background-color:#fff;
	max-width:550px;
	text-align:center;
	border-top:10px solid #ffc52b;
	position:absolute;
	left:50%;
	top:50%;
	transform:translateY(-50%);
}
@media screen and (max-width: 1170px) {
#SUNEXTENSION-Header .WhiteBox{
  width:calc(50% - 30px);
}
}
@media screen and (max-width: 1023px) {
#SUNEXTENSION-Header .WhiteBox {
    width: calc(60% - 30px);
		left:40%;
}
}
@media screen and (max-width: 761px) {
#SUNEXTENSION-Header .WhiteBox {
  position:relative;
  margin:0 20px;

  transform:none;
  left:auto;
  top:auto;
  width:auto;
}
}
#SUNEXTENSION-Header .WhiteBox .Title{
	color:#ffc52b;
	margin: 0;
	font-size: 50px;
	line-height: 1em;
	font-weight: normal;
	font-family: Kanit Light, ClarinsRegular, Clarins;
	padding:30px;
	padding-bottom:15px;
}
@media screen and (max-width: 1023px) {
#SUNEXTENSION-Header .WhiteBox .Title{
   font-size:35px;
}
}
#SUNEXTENSION-Header .WhiteBox .Text{
	margin:0;
	font-family: "Kanit Light", "Gotham SSm book A", "Gotham SSm book B", "Gotham Book", Helvetica, Arial, sans-serif;
	color:#000;
	font-size:20px;
	line-height:1.4em;
	padding:30px;
	padding-top:0;
}
@media screen and (max-width: 761px) {
#SUNEXTENSION-Header .WhiteBox .Text{
 	font-size:14px;
}
}

/*---------------------------------*/
#SUNEXTENSION-FOOTER{
	background-color:#ffc52b;
	height:76px;
	display:flex;
	width:100vw;
	left:0px;
	bottom:0px;
	position:fixed;
	justify-content:center;
	align-items:center;
	z-index:100;
	padding-right:76px;
	padding-left:76px;
	box-sizing:border-box;
}
@media screen and (max-width: 761px) {
	#SUNEXTENSION-FOOTER{
		display:none;
	}
}
#SUNEXTENSION-FOOTER .CloseBtn{
	background-image:url(img/closeBtn.png);
	width:30px;
	height:30px;
	background-position:center center;
	background-repeat:no-repeat;
	cursor:pointer;
	position:absolute;
	right:23px;
	top:23px;
}
#SUNEXTENSION-FOOTER .Visual{
	height:69px;
}
@media screen and (max-width: 1023px) {
#SUNEXTENSION-FOOTER .Visual {
    height: 62px;
    flex-basis: 140px;
}
}
#SUNEXTENSION-FOOTER .Visual img{
	display:block;
}
@media screen and (max-width: 1023px) {
#SUNEXTENSION-FOOTER .Visual img {
    display: block;
    float: none!important;
    width: 140px;
    height: 62px;
	max-width:140px;
}
}
#SUNEXTENSION-FOOTER .Text{
	max-width:680px;
	font-size:18px;
	line-height:1em;
	font-family: "Kanit Light", "Gotham SSm book A", "Gotham SSm book B", "Gotham Book", Helvetica, Arial, sans-serif;
	flex-basis:100%;
	text-align:center;
	box-sizing:border-box;
	padding-left:20px;
	padding-right:20px;
}
/*---------------------------------*/
#SUNEXTENSION-Edito{
	background-image:url(img/packshots-edito.jpg);
	position:relative;
	min-height:641px;
	display:flex;
	justify-content:center;
	align-items:flex-start;
	flex-direction:column;
	text-align:left;
	max-width:1170px;
	margin:0 auto;
}
@media screen and (max-width: 1170px) {
	#SUNEXTENSION-Edito{
	  margin:0 30px;
	  background-size: 120% auto;
background-position: center center;
	}
}
@media screen and (max-width: 1023px) {
#SUNEXTENSION-Edito {
    margin: 0;
    background-position: center right 60%;
    background-size: 110% auto;
    background-repeat: no-repeat;
    padding: 30px;
    min-height: 400px;

}
}
@media screen and (max-width: 761px) {
#SUNEXTENSION-Edito{
	padding:0px;
	background-size:auto;
	background-repeat: no-repeat;
	background-position:top center;
	height: auto;
	background-image:url(img/packshots-edito-mobile.jpg);
	text-align:center;
	padding-top:320px;
	display:block;
	min-height:0;
}
}
#SUNEXTENSION-Edito .Title{
	color:#ffc52b;
	margin: 0;
	font-size: 35px;
	line-height: 1em;
	font-weight: normal;
	font-family: Kanit Light, ClarinsRegular, Clarins;
	padding-bottom:15px;
	width:50%;
}
@media screen and (max-width: 761px) {
#SUNEXTENSION-Edito .Title{
	margin: 20px auto;
	width: auto;
	max-width: 764px;padding-bottom:0px;
	margin-bottom:0;
}
}
#SUNEXTENSION-Edito .Text{
	margin:0;
	font-family: "Kanit Light", "Gotham SSm book A", "Gotham SSm book B", "Gotham Book", Helvetica, Arial, sans-serif;
	color:#000;
	font-size:16px;
	line-height:1.4em;
	width:50%;
	max-width:534px;
}
@media screen and (max-width: 761px) {
#SUNEXTENSION-Edito .Text{
	margin:20px;
	width:auto;
	max-width:764px;font-size:14px;
}
}
/*---------------------------------*/
#SUNEXTENSION-TabNav{
	display:flex;
	justify-content:center;
	align-items:center;
}
@media screen and (max-width: 1170px) {
	#SUNEXTENSION-TabNav{
	  margin:0 30px;
	}
}
@media screen and (max-width: 761px) {
	#SUNEXTENSION-TabNav{
		display:block;
	}
}
#SUNEXTENSION-TabNav a{
	margin:0 5px;
	flex:1;
	display:flex;
	height:50px;
	box-sizing:border-box;
	border:#8b8b8b 2px solid;
	background-color:#fff;
	font-size:11px;
	text-transform:uppercase;
	text-decoration:none;
	color:#8b8b8b;
	justify-content:center;
	align-items:center;
}
#SUNEXTENSION-TabNav a:hover{
	background-color:#f17100;
	color:#fff;

}
#SUNEXTENSION-TabNav a.Selected{
	border:#ffc52b 2px solid;
	background-color:#ffc52b;
	color:#fff;
}
@media screen and (max-width: 761px) {
#SUNEXTENSION-TabNav a{
	border:#8b8b8b 2px solid;
	border-top:0px solid;
}
#SUNEXTENSION-TabNav a.Selected{
	border:#8b8b8b 2px solid;
	border-top:0px solid;
}
#SUNEXTENSION-TabNav a:first-child{
	border-top:#8b8b8b 2px solid!important;
}

}
/*---------------------------------*/
#SUNEXTENSION-ProtectiveCare{
	background-image:url(img/background-protectivecare.jpg);
	position:relative;
	height:585px;
	display:flex;
	justify-content:flex-end;
	align-items:flex-end;
	flex-direction:column;
	max-width:1170px;
	margin:0 auto;
	margin-top:30px;
	padding-right:536px;
	padding-bottom:30px;
	box-sizing:border-box;
	text-align:right;
	
}
@media screen and (max-width: 1250px) {
#SUNEXTENSION-ProtectiveCare{
	padding-right: 406px;
}
}
@media screen and (max-width: 1023px) {
#SUNEXTENSION-ProtectiveCare{
	padding-right: 250px;
	background-size: 1105px auto;
	background-repeat: no-repeat;
	background-position: right -222px top;
	height: 550px;
}
}
@media screen and (max-width: 761px) {
#SUNEXTENSION-ProtectiveCare{
	padding: 0 20px;
	background-size: auto;
	background-repeat: no-repeat;
	background-position: bottom center;
	height: auto;
	background-image: url(img/background-protectivecare-mobile.jpg);
	padding-bottom: 380px;
	text-align: center;
	display:block;
}
}
#SUNEXTENSION-ProtectiveCare .Title{
	color:#ffc52b;
	margin: 0;
	font-size: 35px;
	line-height: 1em;
	font-weight: normal;
	font-family: Kanit Light, ClarinsRegular, Clarins;
	padding-bottom:15px;
}
#SUNEXTENSION-ProtectiveCare .Title strong{
	font-family: "Kanit Light", "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;
	display:block;
	font-size:32px;
	text-transform:uppercase;
		
}
#SUNEXTENSION-ProtectiveCare .Text{
	margin:0;
	font-family: "Kanit Light", "Gotham SSm book A", "Gotham SSm book B", "Gotham Book", Helvetica, Arial, sans-serif;
	color:#000;
	font-size:16px;
	line-height:1.4em;
	padding-left:20px;
	padding-bottom:20px;
}
@media screen and (max-width: 1023px) {
#SUNEXTENSION-ProtectiveCare .Text{
	padding-left:180px;
}
}

@media screen and (max-width: 761px) {
#SUNEXTENSION-ProtectiveCare .Text{
	padding:0;
	font-size:14px;
	padding-bottom:20px;
}
}

#SUNEXTENSION-ProtectiveCare .ingredientName{
	margin:0;
	font-family: "Kanit Light", "Gotham SSm book A", "Gotham SSm book B", "Gotham Book", Helvetica, Arial, sans-serif;
	color:#000;
	font-size:12px;
	line-height:1.4em;
	position:absolute;
	right:50%;
	margin-right:200px;
	top:120px;
}
/*---------------------------------*/
#SUNEXTENSION-AfterSun{
	background-image:url(img/background-aftersun.jpg);
	position:relative;
	height:561px;
	display:flex;
	justify-content:flex-start;
	align-items:flex-end;
	flex-direction:column;
	max-width:1170px;
	margin:0 auto;
	margin-top:30px;
	padding-top:30px;
	padding-right:665px;
	padding-bottom:30px;
	box-sizing:border-box;
	text-align:right;
	
}
@media screen and (max-width: 1250px) {
#SUNEXTENSION-AfterSun{
	padding-right: 570px;
    background-position: left -70px bottom;
}
}

@media screen and (max-width: 1023px) {
#SUNEXTENSION-AfterSun{
	padding-right: 380px;
	background-size: 805px auto;
	background-repeat: no-repeat;
	background-position: right -80px bottom;
	height: 500px;	margin-top:0px;
}
}

@media screen and (max-width: 761px) {
#SUNEXTENSION-AfterSun{
	padding:0px;
	background-size:auto;
	background-repeat: no-repeat;
	background-position:bottom center;
	height: auto;
	background-image:url(img/background-aftersun-mobile.jpg);
	padding-bottom: 220px;
	text-align: center;
	display:block;
	padding-top:30px;
}
}
#SUNEXTENSION-AfterSun .Title{
	color:#00aeaa;
	margin: 0;
	font-size: 35px;
	line-height: 1em;
	font-weight: normal;
	font-family: Kanit Light, ClarinsRegular, Clarins;
	padding-bottom:15px;
}
#SUNEXTENSION-AfterSun .Title strong{
	font-family: "Kanit Light", "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;
	display:block;
	font-size:32px;
	text-transform:uppercase;
		
}
#SUNEXTENSION-AfterSun .Text{
	margin:0;
	font-family: "Kanit Light", "Gotham SSm book A", "Gotham SSm book B", "Gotham Book", Helvetica, Arial, sans-serif;
	color:#000;
	font-size:16px;
	line-height:1.4em;
	padding-left:20px;
	padding-bottom:20px;
}
@media screen and (max-width: 761px) {
#SUNEXTENSION-AfterSun .Text{
padding-left:20px;
padding-right:20px;
}
}
#SUNEXTENSION-AfterSun .ingredientName{
	margin:0;
	font-family: "Kanit Light", "Gotham SSm book A", "Gotham SSm book B", "Gotham Book", Helvetica, Arial, sans-serif;
	color:#000;
	font-size:12px;
	line-height:1.4em;
	position:absolute;
	
}

#SUNEXTENSION-AfterSun .ingredientName:nth-child(1){
	right: 50%;
    margin-right: 370px;
    bottom: 180px;
}
#SUNEXTENSION-AfterSun .ingredientName:nth-child(2){
	left: 50%;
    margin-left: 460px;
    bottom: 50px;
}
@media screen and (max-width: 1250px) {
#SUNEXTENSION-AfterSun .ingredientName:nth-child(2){
	left: 50%;
    margin-left: 445px;
    bottom: 50px;
}
}
@media screen and (max-width: 1023px) {
#SUNEXTENSION-AfterSun .ingredientName:nth-child(1){
	right: 50%;
	margin-right: 220px;
	bottom: 120px;
}
#SUNEXTENSION-AfterSun .ingredientName:nth-child(2){
	left: 50%;
	margin-left: 270px;
	bottom: 370px;
}
}
/*---------------------------------*/
#SUNEXTENSION-SPF-List{
	display:flex;
	justify-content:center;
	align-items:center;
}
#SUNEXTENSION-SPF-List>div{
font-size:0;
}

#SUNEXTENSION-SPF-List .Title{
	color:#fff;
	margin:0;
	text-align:left;
	font-size:18px;
	line-height:20px;
	font-family: "Kanit Light", "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;	
	text-transform:uppercase;
	padding-left:80px;
	box-sizing:border-box;
	padding-top:30px;
	max-width:386px;
	display:inline-block;
	width:100%;	
	font-weight:normal;	
}
@media screen and (max-width: 1250px) {
#SUNEXTENSION-SPF-List .Title{
	padding-left:40px;
}
}
@media screen and (max-width: 1023px) {
#SUNEXTENSION-SPF-List .Title{
		padding-left:20px;
}
}
@media screen and (max-width: 761px) {
#SUNEXTENSION-SPF-List .Title {

    padding-left: 10px;
    font-size: 12px;
    line-height: 1em;
    padding-top: 15px;

}
}
#SUNEXTENSION-SPF-List .Title strong{
	display:block;
	font-size:66px;
	line-height:50px;
	font-weight:bold;	font-family: "Kanit Light", "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;	
}


@media screen and (max-width: 1023px) {
#SUNEXTENSION-SPF-List .Title strong{
	font-size:50px;
	line-height:40px;
}
}
@media screen and (max-width: 761px) {
#SUNEXTENSION-SPF-List .Title strong {
  font-size: 25px;
line-height: 20px;
letter-spacing: -0.03em;
padding-top: 8px;
}
}
@media screen and (max-width: 375px) {
#SUNEXTENSION-SPF-List .Title strong {
  font-size: 22px;
}
}
#SUNEXTENSION-SPF-List>div:nth-child(1){
	background-color:#ffc52b;
	flex:1;
	text-align:right;
}
#SUNEXTENSION-SPF-List>div:nth-child(2){
	background-color:#f48f2b;
	max-width:406px;
	flex-basis:33%;
}
#SUNEXTENSION-SPF-List>div:nth-child(3){
	background-color:#f17100;
	flex:1;
	text-align:left;
}
/*------------------------------------------------*/
.MyContent{
	display:block;
	max-width:1170px;
	margin:0 auto;
	width:100%;
}

.MyContent .SlickItem{
	display:flex!important;
	flex-direction:column;
	align-items:center;
	justify-content:flex-end;
	text-align:center;
	min-width:280px;
	
	width:280px;
}
@media screen and (max-width: 1023px) {
.MyContent .SlickItem{
	width:220px;
	min-width:220px;margin-bottom: 30px;
}
}

.MyContent .SlickItem .Packshot{
	display:block;
}
.MyContent .SlickItem .Packshot img{
	display:block;
	margin:0 auto;
}
.MyContent .SlickItem  .Text .ProductName{
	font-weight:normal;	
	display:block;
	font-family: "Kanit Light", "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;
}
.MyContent .SlickItem .Text{
	flex-basis:77px;
	font-family: "Kanit Light", "Gotham SSm book A", "Gotham SSm book B", "Gotham Book", Helvetica, Arial, sans-serif;
	font-size:16px;
	max-width:180px;
	margin:15px auto;
}
@media screen and (max-width:761px) {
.MyContent .SlickItem .Text{
		font-size:14px;
}
}
.RoutineProducts .Text{
	flex-basis:77px;
	font-family: "Kanit Light", "Gotham SSm book A", "Gotham SSm book B", "Gotham Book", Helvetica, Arial, sans-serif;
	font-size:16px;
	max-width:110px;
	margin:15px auto;
}
.RoutineProducts .Mentions{
	margin:0 20px;
	font-size:10px;
	font-family: "Kanit Light", "Gotham SSm book A", "Gotham SSm book B", "Gotham Book", Helvetica, Arial, sans-serif;
	text-align:center;
	margin-top:10px;
	opacity:0.5;
	line-height:1em;
	
}


.RoutineProducts{

margin: 0 30px;
	
}

@media screen and (max-width: 1023px) {
.RoutineProducts{
max-width: 760px;

margin: 0 30px;
	
}
}
@media screen and (max-width: 761px) {
.RoutineProducts {
    max-width: 760px;
    margin: 0 auto;
    margin-bottom: 0px;
    width: 220px;
}
}
#SUNEXTENSION-RoutineFace .SlickItem{
	height:425px;
	
}
#SUNEXTENSION-RoutineBody .SlickItem{
	height:528px;
	
}
#SUNEXTENSION-RoutineFaceAfterSun .SlickItem{
	height:500px;
	
}
/*------------------------------------------------*/
.RoutineTitle{
	max-width:1170px;
	margin:30px auto;
	overflow:hidden;
	text-align:center;
	font-size:0;
}
@media screen and (max-width: 761px) {
.RoutineTitle  {
   margin:0px auto;
}
}
.RoutineTitle .Title{
	margin:0;
	font-weight:bold;
	font-size:32px;
	text-transform:uppercase;
	font-family: "Kanit Light", "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;
	text-align:center;
	position:relative;
	display:inline-block;

	padding:20px;
	min-width:370px;
	box-sizing:border-box;
}
@media screen and (max-width: 761px) {
.RoutineTitle .Title {
    font-size: 22px;
    padding: 20px;
    min-width: 180px;
}
}
.RoutineTitle .Title::before{
	display:block;
	content:" ";
	height:24px;
	width:800px;
	position:absolute;
	right:100%;
	top:20px;
}
.RoutineTitle .Title::after{
	display:block;
	content:" ";
	height:24px;
	width:800px;
	position:absolute;
	left:100%;
	top:20px;
}

@media screen and (max-width: 761px) {
.RoutineTitle .Title::before{
	height:14px;
	top:25px;
}
.RoutineTitle .Title::after{
	height:14px;
	top:25px;
}
}
.RoutineTitle .Orange::before{
	background-color:#ffc52b;
}
.RoutineTitle .Orange::after{
	background-color:#ff8300;
}
.RoutineTitle .Green::before,
.RoutineTitle .Green::after{
	background-color:#00aeaa;
}
.RoutineTitle .Text{
	margin:0;
	font-size:16px;
	font-family: "Kanit Light", "Gotham SSm book A", "Gotham SSm book B", "Gotham Book", Helvetica, Arial, sans-serif;
	text-align:center;
}
@media screen and (max-width: 761px) {
.RoutineTitle .Text{
  	font-size:14px;
	margin:0 20px;
	margin-bottom:20px;
}
}
/*------------------------------------------------*/
.RoutineProductresult{
	width: 280px;
	margin: 0 auto;
}
@media screen and (max-width: 1023px) {
.RoutineProductresult{
	width: 220px;
	margin: 0 auto;
}
}
/*------------------------------------------------*/
.RoutineResultTitle{
	max-width:1170px;
	margin:30px auto;
	overflow:hidden;
	text-align:center;
	font-size:0;
	margin-bottom:0;
}
.RoutineResultTitle .Title{
	margin:0;
	font-weight:bold;
	font-size:20px;
	text-transform:uppercase;
	font-family: "Kanit Light", "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;
	text-align:center;
	position:relative;
	display:inline-block;
	padding:20px;
	min-width:370px;
	box-sizing:border-box;
}
.RoutineResultTitle .Title::before{
	display:block;
	content:" ";
	height:24px;
	width:800px;
	position:absolute;
	right:100%;
	top:20px;
	background-color:#ffc52b;
}
.RoutineResultTitle .Title::after{
	display:block;
	content:" ";
	height:24px;
	width:800px;
	position:absolute;
	left:100%;
	top:20px;
	background-color:#ff8300;
}

.RoutineResultTitle .Text{
	margin:0;
	font-size:16px;
	font-family: "Kanit Light", "Gotham SSm book A", "Gotham SSm book B", "Gotham Book", Helvetica, Arial, sans-serif;
	text-align:center;
	text-transform:uppercase;
}

/*---------------------------------*/

#SUNEXTENSION-AfterSun-List{
	display:flex;
	justify-content:center;
	align-items:flex-end;
	min-height:120px;
	background-color:#00aeaa;

}
@media screen and (max-width: 761px) {
#SUNEXTENSION-AfterSun-List{
	min-height:85px;
}
}
#SUNEXTENSION-AfterSun-List>div{
	font-size:0;
	flex:1;
	text-align:center;
}

#SUNEXTENSION-AfterSun-List .Title{
	color:#fff;
	margin:0;
	text-align:center;
	font-size:18px;
	line-height:20px;
	font-family: "Kanit Light", "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;	
	text-transform:uppercase;
	box-sizing:border-box;
	padding-top:30px;
	display:inline-block;
	width:100%;	
	font-weight:normal;	
}
#SUNEXTENSION-AfterSun-List .Title strong{
	display:block;
	font-size:66px;
	line-height:50px;
	font-weight:bold;
	font-family: "Kanit Light", "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;	
}
@media screen and (max-width: 761px) {
#SUNEXTENSION-AfterSun-List .Title strong {
    display: block;
    font-size: 40px;
    line-height: 30px;
}
}
/*---------------------------------*/
#SUNEXTENSION-ProtectiveCare-Expanded,
#SUNEXTENSION-AfterSun-Expanded{
	height:1px;
	overflow:hidden;
}
#SUNEXTENSION-ProtectiveCare-Expanded.Expanded,
#SUNEXTENSION-AfterSun-Expanded.Expanded{
	height:auto;
	overflow:hidden;
}
/*---------------------------------*/
.RoutineResult h4{
	flex-basis:100%;
	text-align:center;
	font-family: "Kanit Light", "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;
	font-size:14px;
	margin:0;
	text-transform:uppercase;
	font-weight:normal;
	padding-bottom:20px;
}
.RoutineResult{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:flex-start;
}
.RoutineResult.Collapsed{
	display:none;
}
.RoutineResult .RoutineResultTitle{
	flex-basis:100%;
}
.RoutineResult .RoutineResultBlock{
	flex-basis:calc(100% - 40px);
	margin:20px;
}

.RoutineResult .RoutineResultBlock .SlickItem{
	width:100%;
	max-width:300px;
}

@media screen and (max-width: 761px) {
.RoutineResult .RoutineResultBlock{
	flex-basis:calc(100% - 40px);
	max-width:280px;
	margin:20px auto;
}
.RoutineResult .RoutineResultBlock .SlickItem{
	width:280px;
	max-width:280px;
}

}
/*---------------------------------*/
.PictoGridList{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}

.PictoGridList{
	display:flex;
	flex-wrap:wrap;
}
.PictoGridList .Item{
	flex-basis:33%;
	max-width:350px;
	font-size:16px;
	font-family: "Kanit Light", "Gotham SSm book A", "Gotham SSm book B", "Gotham Book", Helvetica, Arial, sans-serif;
	padding:25px;
	box-sizing:border-box;
	line-height:1.4em;
	padding-top:0;
}
@media screen and (max-width: 1023px) {
.PictoGridList .Item{
	font-size:14px;
}
}
@media screen and (max-width:761px) {
.PictoGridList .Item{
		max-width:300px;
		text-align:center;
}
}
.PictoGridList .Item strong{
	display:block;
	text-transform:uppercase;
	font-weight:normal;
	font-family: "Kanit Light", "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;
	color:#ffc52b;
	padding-bottom:5px;
}
.PictoGridList .Item p{
	margin:0;

	overflow:hidden;
}
.PictoGridList .Picto{
	height:190px;
	display:flex;
	justify-content:flex-start;
	align-items:flex-end;
	margin-bottom:20px;
}
@media screen and (max-width: 761px) {
.PictoGridList .Picto{
	height:auto;
	margin:0 auto;
		margin-bottom:20px;
}
.PictoGridList .Picto img{
	display:block;
	margin:0 auto;
}
}
/*---------------------------------*/
#SUNEXTENSION-BeautyTips-Title{
	margin-top:40px;

}

@media screen and (max-width: 761px) {
#SUNEXTENSION-BeautyTips-Title{
	min-height:85px;
}
}
#SUNEXTENSION-BeautyTips-Title .Text{
	max-width:880px;
	margin:30px auto;
	font-size:16px;
	font-family: "Kanit Light", "Gotham SSm book A", "Gotham SSm book B", "Gotham Book", Helvetica, Arial, sans-serif;
	line-height:1.4em;
	text-align:center;
}
@media screen and (max-width: 1023px) {
#SUNEXTENSION-BeautyTips-Title .Text{
	margin:20px;
}
}

@media screen and (max-width: 761px) {
#SUNEXTENSION-BeautyTips-Title .Text{
	margin:20px;
	font-size:14px;
}
}

#SUNEXTENSION-BeautyTips-Title .Text strong{
	display:block;
}
#SUNEXTENSION-BeautyTips-Title>div{
	display:flex;
	justify-content:center;
	align-items:flex-end;
	min-height:120px;
	background-color:#fbc32d;
}

#SUNEXTENSION-BeautyTips-Title .Title{
	color:#fff;
	margin:0;
	text-align:center;
	text-transform:uppercase;
	box-sizing:border-box;
	padding-top:30px;
	display:inline-block;
	width:100%;
	font-size:66px;
	line-height:50px;
	font-weight:bold;
	font-family: "Kanit Light", "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;	
}
@media screen and (max-width: 761px) {
#SUNEXTENSION-BeautyTips-Title .Title{
    display: block;
    font-size: 40px;
    line-height: 30px;
}
}

/*---------------------------------*/
#SUNEXTENSION-Tips-Desktop{
	display:flex;
}
#SUNEXTENSION-Tips-Mobile{
	display:none;
}
@media screen and (max-width:1023px) {
	#SUNEXTENSION-Tips-Desktop{
		display:none;
	}
	#SUNEXTENSION-Tips-Mobile{
		display:block;
				margin:20px 30px;
	}
}
@media screen and (max-width:761px) {
	#SUNEXTENSION-Tips-Mobile{
		margin:20px auto;
		width:300px;
	}
}
/*---------------------------------*/
#SUNEXTENSION-BeautyResponsible-Title{
	
	margin-top:40px;
}
@media screen and (max-width: 761px) {
#SUNEXTENSION-BeautyResponsible-Title{
	min-height:85px;
}
}
#SUNEXTENSION-BeautyResponsible-Title>div{
	display:flex;
	justify-content:center;
	align-items:flex-end;
	min-height:120px;
	background-color:#fbc32d;
}
@media screen and (max-width: 761px) {
#SUNEXTENSION-BeautyResponsible-Title>div{
    min-height: 100px;
}
}
#SUNEXTENSION-BeautyResponsible-Title .Title{
	color:#fff;
	margin:0;
	text-align:center;
	text-transform:uppercase;
	box-sizing:border-box;
	padding-top:30px;
	display:inline-block;
	width:100%;
	font-size:66px;
	line-height:50px;
	font-weight:bold;
	font-family: "Kanit Light", "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;	
}

@media screen and (max-width: 761px) {
#SUNEXTENSION-BeautyResponsible-Title .Title{
    display: block;
    font-size: 40px;
    line-height: 35px;
    text-align: left;
    padding-left: 30px;
    padding-top: 0;
}
}

/*---------------------------------*/
#SUNEXTENSION-BeautyResponsible-Block-1{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
}
@media screen and (max-width:761px) {
#SUNEXTENSION-BeautyResponsible-Block-1{
	flex-direction:column-reverse;
}
}
#SUNEXTENSION-BeautyResponsible-Block-1 .Photo{
	padding:55px 20px;
}
@media screen and (max-width:1024px) {
#SUNEXTENSION-BeautyResponsible-Block-1 .Photo{
	flex-basis:50%;
}
}
@media screen and (max-width:761px) {
#SUNEXTENSION-BeautyResponsible-Block-1 .Photo{
	padding-top:0;
}
}
#SUNEXTENSION-BeautyResponsible-Block-1 .Photo img{
	margin-bottom:20px;width:543px!important;float:none!important;
}
@media screen and (max-width:1023px) {
	#SUNEXTENSION-BeautyResponsible-Block-1 .Photo img{
	margin-bottom:20px;
	width:320px!important;float:none!important;

}
}
#SUNEXTENSION-BeautyResponsible-Block-1 .BtnLink a{
	background-color:#fff;
	color:#8b8b8b;
	border:2px solid #8b8b8b;
}
#SUNEXTENSION-BeautyResponsible-Block-1 .Wrapper{
	padding:20px;
}
@media screen and (max-width:1024px) {
#SUNEXTENSION-BeautyResponsible-Block-1 .Wrapper{
	flex-basis:50%;
}
}
#SUNEXTENSION-BeautyResponsible-Block-1 .BigText{
	font-size:16px;
	line-height:1.4em;
}
#SUNEXTENSION-BeautyResponsible-Block-1 .Text{
	font-size:14px;line-height:1.4em;
}
#SUNEXTENSION-BeautyResponsible-Block-1 .Mentions{
	opacity:0.5;
	font-size:11px;
	line-height:1em;
}
#SUNEXTENSION-BeautyResponsible-Block-2 img{
	margin:0 auto;
	margin-bottom:20px;
	display:block;
	
}
@media screen and (max-width:1023px) {
#SUNEXTENSION-BeautyResponsible-Block-2 .Photo img{
	float:none!important;
}
}


#SUNEXTENSION-BeautyResponsible-Block-2{
	max-width:1000px;
	padding:20px;
	margin:0 auto;	padding-bottom:0;
}

#SUNEXTENSION-BeautyResponsible-Block-2 .Text{
	margin:0;
	font-size:14px;line-height:1.4em;
	margin-top:20px;
}
#SUNEXTENSION-BeautyResponsible-Block-3{
	display:flex;
	flex-direction:row-reverse;
	align-items:flex-start;
	justify-content:center;
	max-width:1170px;
	margin:0 auto;
}
@media screen and (max-width:1023px) {
	#SUNEXTENSION-BeautyResponsible-Block-3 {
	display:block;

}
}
#SUNEXTENSION-BeautyResponsible-Block-3 .Text{
	margin:0;
	font-size:14px;line-height:1.4em;margin-top:20px;
}
#SUNEXTENSION-BeautyResponsible-Block-3 .Wrapper{
	padding:40px 20px;
}
@media screen and (max-width:1024px) {
	#SUNEXTENSION-BeautyResponsible-Block-3 .Text{
		margin-top:0px;
		margin-bottom:20px;
	}
#SUNEXTENSION-BeautyResponsible-Block-3 .Wrapper{
	    padding: 40px 20px;
    flex-basis: 45%;
}
}
#SUNEXTENSION-BeautyResponsible-Block-3 .Photo{
	padding:40px 20px;
}

#SUNEXTENSION-BeautyResponsible-Block-3 .Photo img{
	float:none!important;width:585px!important;
}
@media screen and (max-width:1024px) {
#SUNEXTENSION-BeautyResponsible-Block-3 .Photo img{
	float:none!important;width:100%!important;
}
}
@media screen and (max-width:1024px) {
#SUNEXTENSION-BeautyResponsible-Block-3 .Photo{
	padding: 40px 20px;
    flex-basis: 55%;
}

}
@media screen and (max-width:1023px) {
#SUNEXTENSION-BeautyResponsible-Block-3 .Photo{
	padding:40px 20px;
	padding-bottom:0;
}

}
@media screen and (max-width:761px) {
#SUNEXTENSION-BeautyResponsible-Block-3 .Photo img{
	max-width:100%;
	width:100%!important;
}
}
#SUNEXTENSION-BeautyResponsible-Block-1 .SubTitle,
#SUNEXTENSION-BeautyResponsible-Block-2 .SubTitle,
#SUNEXTENSION-BeautyResponsible-Block-3 .SubTitle{
	margin:0;
	font-weight:normal;
	font-family: "Kanit Light", "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;	
	color:#ffc52b;
	text-transform:uppercase;
	font-size:22px;
	padding-top:20px;
}
@media screen and (max-width:1023px) {
	#SUNEXTENSION-BeautyResponsible-Block-1 .SubTitle,
#SUNEXTENSION-BeautyResponsible-Block-2 .SubTitle,
#SUNEXTENSION-BeautyResponsible-Block-3 .SubTitle{
	font-size:16px;
	padding-top:10px;
}
}
#SUNEXTENSION-BeautyResponsible-Block-1 .Title,
#SUNEXTENSION-BeautyResponsible-Block-3 .Title,
#SUNEXTENSION-BeautyResponsible-Block-2 .Title{
	margin:0;
	font-weight:normal;
	font-family: "Kanit Light", "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;	
	color:#000;
	text-transform:uppercase;
	font-size:32px;
	line-height:1em;
}
@media screen and (max-width:1023px) {
#SUNEXTENSION-BeautyResponsible-Block-1 .Title,
#SUNEXTENSION-BeautyResponsible-Block-3 .Title,
#SUNEXTENSION-BeautyResponsible-Block-2 .Title{
	font-size:20px;

}
}
/*-----------------------------------------------------*/
#SUNEXTENSION-SkinSelector .MobileSelectOpener{
	display:none;
}
#SUNEXTENSION-SkinSelector .MobileSelectOpenerExpand{
	display:none;
}
@media screen and (max-width: 1024px) {
#SUNEXTENSION-SkinSelector .MobileSelectOpener{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #ffc52b;
    color: #ffc52b;
    padding: 12px;
    font-size: 14px;
    line-height: 1.2em;
    font-family: "Kanit Light", "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;
    outline: 0;
    text-transform: uppercase;
    position: relative !important;
    opacity: 1 !important;
    z-index: 4 !important;
    margin: 0 auto;
    width: calc(100% - 40px);
    box-sizing: border-box;
    background-image: url(img/expand-yellow.png);
    background-repeat: no-repeat;
    background-position: bottom 10px center;
    padding-bottom: 26px;
	height:90px;
	background-color:#fff;
}	
#SUNEXTENSION-SkinSelector .MobileSelectOpenerExpand[data-expand="1"]{
	 display: block;
    border: 4px solid #ffc52b;
    color: #ffc52b;
    padding: 12px;
    font-size: 14px;
    line-height: 1.2em;
    font-family: "Kanit Light", "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;
    outline: 0;
    text-transform: uppercase;
    position: relative !important;
    opacity: 1 !important;
    z-index: 5 !important;
    margin: 0 auto;
    width: calc(100% - 40px);
    box-sizing: border-box;
    margin-top: -90px;
    background-color: #fff;
}
#SUNEXTENSION-SkinSelector .MobileSelectOpenerExpand div{
	padding:5px;
}
#SUNEXTENSION-SkinSelector .MobileSelectOpenerExpand div:hover{
	  background-color: #ffc52b;
	  color: #fff;
}
}
#SUNEXTENSION-SkinSelector-Input {
	border: 4px solid #ffc52b;
	color: #ffc52b;
	padding: 20px;
	font-size: 20px;
	line-height: 1.2em;
	font-family: "Kanit Light", "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;
	outline: 0;
	text-transform: uppercase;
	display: block !important;
	position: relative !important;
	opacity: 1 !important;
	z-index: 4 !important;
	margin: 0 auto;
}
#SUNEXTENSION-SkinSelector-Input option {
	color: #ffc52b;
	padding: 20px;
	font-size: 20px;
	line-height: 1.2em;
}
@media screen and (max-width: 1024px) {
	#SUNEXTENSION-SkinSelector-Input {
		display:none!important;
	}
}

/*---------------------------------*/
#SUNEXTENSION-SkinSelector{
	background-image:url(img/background-skinselector.jpg);
	position:relative;
	background-position:top center;
	background-repeat:no-repeat;
	/*height:300px;*/
	padding-top: 190px;
	box-sizing:border-box;
}
@media screen and (max-width: 1024px) {
#SUNEXTENSION-SkinSelector{
	background-size: auto 160px;
	padding-top: 160px;
}
}
@media screen and (max-width: 1023px) {
#SUNEXTENSION-SkinSelector{
	background-size: auto 160px;
	padding-top: 160px;
}
}
@media screen and (max-width: 761px) {
#SUNEXTENSION-SkinSelector{
	background-size: auto 80px;
    padding-top: 80px;
}
}
#SUNEXTENSION-SkinSelector .sbHolder {
display:none!important;
}
#SUNEXTENSION-SkinSelector .sbOptions,#SUNEXTENSION-SkinSelector .sbSelectorWrapper{
	border:4px solid #ffc52b;
}
#SUNEXTENSION-SkinSelector .sbSelector{ 
	color:#ffc52b;
	
}

/*---------------------DTW EDITS-------------------------*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
#SUNEXTENSION-ProtectiveCare .Text{
		width: 85%;
	}
	#SUNEXTENSION-AfterSun .Text{
		width: 85%;
	}
	.RoutineProducts .Mentions{
		width: 70%;
	}
	#SUNEXTENSION-Edito .Title{
		padding-top:200px;
	}
}


@media screen and (max-width: 1250px){
	#SUNEXTENSION-AfterSun{
		padding-right: 700px;
	}
	#SUNEXTENSION-ProtectiveCare{
		padding-right: 440px;
	}
}
@media screen and (max-width: 1112px) {
	#SUNEXTENSION-ProtectiveCare .ingredientName{
		right: 45%;
	}
}

@media screen and (max-width: 1023px){
	#SUNEXTENSION-AfterSun{
		padding-right: 380px;
	}
	#SUNEXTENSION-ProtectiveCare{
		padding-right: 250px;
	}
}


@media screen and (width: 834px) {
/* .slick-initialized .slick-slide {
    width: 300px !important;
} */
.RoutineResult .RoutineResultBlock{margin-left:230px !important;}
}



@media screen and (max-width: 761px) {
	#SUNEXTENSION-ProtectiveCare{
		padding-right: 14px;
	}
	#SUNEXTENSION-AfterSun{
		padding-right: 0px;
	}
	#SUNEXTENSION-ProtectiveCare .ingredientName{
		right: -25%;
		top: 46%;
	}
	#SUNEXTENSION-BeautyTips-Title .Title{
		line-height: 42px;
	}
	.RoutineResultTitle .Text{
		width: 80%;
		padding-left: 10%;
	}


}

/*DTW Edits*/

.MyContent .SlickItem .Text {
    max-width: 194px;
}
/*Ipad Air 3 Portrait*/
@media only screen
and (min-device-width : 834px)
and (max-device-width : 1112px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { 
	#SUNEXTENSION-Tips-Mobile {
    margin: 20px 30px;
    height: 582px;
}
.PictoGridList .draggable .slick-track .slick-slide {
    width: 282px !important;
    margin-left: 43px;
    margin-right: 64px;
}
.RoutineResultBlock .slick-slide {
    width: 286px !important;
}
.RoutineResultBlock .slick-list, .slick-slider .slick-track{
	width: 1074px;!important;
}

}
/*Iphone Portrait*/
@media screen and (max-width: 761px) {
#SUNEXTENSION-Tips-Mobile {
    margin: 20px auto;
    width: 300px;
    height: 283px;
}
.PictoGridList .draggable .slick-track .slick-slide {
    width: 303px !important;
    margin-left: -3px;
    margin-right: unset; 
}
.RoutineResult .RoutineResultBlock {
    height: 485px;
}
.RoutineResultBlock .slick-slide {
    width: 286px !important;
}
.RoutineResult .RoutineResultBlock .SlickItem {
    padding-bottom: 30px;
    margin-left: -21px;
}
#SUNEXTENSION-ProtectiveCare .ingredientName {
    top: 40%;
}
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) {
.RoutineResult .RoutineResultBlock .SlickItem {
    padding-bottom: 30px;
    margin-left: 15px;
}
.RoutineResult .RoutineResultBlock .SlickItem {
    width: 280px;
    max-width: 85%;
}
}
/*Ipad portrait:*/
@media screen and (max-width:1111px) {
	#SUNEXTENSION-Tips-Mobile {
	    margin: 20px 30px;
	    height: 405px;
	}
}
/*iphone 7(mobile):*/
@media only screen and (max-width:761px) {
	#SUNEXTENSION-Tips-Mobile {
	    height: 325px;
	}
}

/*/ IE10+ CSS styles go here /*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
#SUNEXTENSION-PDP-3 .Arguments li, #SUNEXTENSION-PDP-7 .Arguments li {
    flex-basis: unset!important;
}
}

.PictoGridList .Item {
    font-size: 14px;
}

@media only screen
and (min-device-width : 834px)
and (max-device-width : 1112px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { 
.dtwbr{
	display:none;
}
}

@media only screen and (max-width:761px) {
	.dtwbr{
	display:none;
}
}

.RoutineResult .RoutineResultBlock .SlickItem {
    max-width: unset;
}


@media only screen
and (min-device-width : 834px)
and (max-device-width : 1112px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { 
.RoutineResult .RoutineResultBlock .SlickItem {
    max-width: 220px;
}
.dtwproduct{
    margin-left: -36px!important;
}
.MyContent .SlickItem {
    width: 263px!important;
    }
    .RoutineProducts {
    max-width: unset;
}
}


@media only screen and (max-width:761px) {
.RoutineResult .RoutineResultBlock .SlickItem {
    width: 280px;
    max-width: 85%;
    }
}
@media only screen
and (min-device-width : 834px)
and (max-device-width : 1112px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { 
#SUNEXTENSION-SkinSelector-Input {
 border: 4px solid #ffc52b;
    color: #ffc52b;
    padding: 20px;
    font-size: 20px;
    line-height: 1.2em;
    font-family: "Kanit Light", "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;
    outline: 0;
    text-transform: uppercase;
    display: block !important;
    position: relative !important;
    opacity: 1 !important;
    z-index: 4 !important;
    margin: 0 auto;
}
}