/*body, html {
overflow-x: hidden;
width: 100%;
margin:0;
}
.breadcrumb {
display:none;
}
#main {
margin-top:0px;
}
*/
@media only screen and (max-width:761px) {
.MyContent .product-quickshop .swatchesCircle img {
top: 8.5px!important;
width: 24px!important;
}
}
.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 img{
display: block;
position: relative;
}
.MyContent h1 {
margin: 0 auto;
}
.MyContent h2 {
display: inline-block;
font-family: ClarinsRegular, Clarins;
font-size: 35px;
font-weight: normal;
line-height: 1em;
margin: 0;
padding: 0;
position: relative;
text-align: center;
z-index: 1;
padding-bottom:8px;
}
@media only screen and (max-width:761px) {
.MyContent h2 {
margin: 0;
display: block;
padding-bottom: 0;
}
}
.MyContent p.TextLink{
padding:0;
margin:0;
}
.MyContent p.TextLink span,
.MyContent p.TextLink a {
font-family: "Gotham SSm medium A", "Gotham SSm medium B", Gotham, Helvetica, Arial, sans-serif;
font-size: 11px;
border-bottom: 1px solid #000;
text-transform: uppercase;
color: #000;
text-decoration: none;
position: relative;
padding:0;
font-weight:bold;
}
@media only screen and (max-width:761px) {
.MyContent .DesktopOnly{
display:none!important;
}
}
@media only screen and (min-width:762px) {
.MyContent .MobileOnly{
display:none!important;
}
}
/*-------------------------------------------------------*/
#BLOCK-CATEGORY{
}
#BLOCK-CATEGORY .TextIntro{
margin:0;
padding-left:20px;
padding-right:20px;
}
@media only screen and (max-width:761px) {
#BLOCK-CATEGORY{
background: linear-gradient(to bottom, #FFFFFF,#FFFFFF 80px,#eeeeee 140px, #eeeeee );
}
}
#BLOCK-CATEGORY .Logo{
display:block;
margin-left: auto;
margin-right: auto;
}
@media only screen and (max-width:761px) {
#BLOCK-CATEGORY .Logo{
max-width:264px;
}
}
#BLOCK-CATEGORY .CategoryMosaic{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
max-width:1210px;
margin-left:auto;
margin-right:auto;
padding:20px;
padding-top:0px;
padding-bottom:0px;
}
@media only screen and (max-width:761px) {
#BLOCK-CATEGORY .CategoryMosaic{
background-color:#eeeeee;
padding:5px;
flex-direction:column;
}
}
#BLOCK-CATEGORY .CategoryMosaic .Category{
margin:20px;
max-width:363px;
position:relative;
margin-bottom:30px;
background-color:#fff;
cursor:pointer;
}
@media only screen and (min-width:1024px) {
#BLOCK-CATEGORY .CategoryMosaic .Category {
min-height: 340px;
}
}
@media only screen and (max-width:1023px) {
#BLOCK-CATEGORY .CategoryMosaic .Category {
margin: 15px;
max-width: 334px;
margin-bottom: 30px;
}
}
@media only screen and (max-width:761px) {
#BLOCK-CATEGORY .CategoryMosaic .Category{
margin:5px;
padding:10px;
flex:1;
width:calc(100% - 30px);
max-width:761px;
}
}
#BLOCK-CATEGORY .CategoryMosaic .Category figure{
display:block;
margin:0;
padding:0;
overflow:hidden;
}
#BLOCK-CATEGORY .CategoryMosaic .Category figure img{
max-width:100%;
transition:transform ease-in-out 0.5s;
transform:scale(1);
}
#BLOCK-CATEGORY .CategoryMosaic .Category:hover figure img{
transform:scale(1.05);
}
#BLOCK-CATEGORY .CategoryMosaic .Category .InfosBox{
background-color:#fff;
margin:0px;
bottom:-23px;
position:absolute;
left:30px;
width:calc(100% - 60px);
text-align:center;
}
@media only screen and (max-width:761px) {
#BLOCK-CATEGORY .CategoryMosaic .Category .InfosBox{
background-color:#fff;
margin:0px;
bottom:50%;
left:104px;
width:calc(100% - 114px);
text-align:center;
transform:translateY(50%);
}
}
#BLOCK-CATEGORY .CategoryMosaic .Category .InfosBox h3{
margin:0;
padding:0;
font-family:ClarinsRegular, Clarins;
font-size:30px;
color:#000;
font-weight:normal;
line-height:1em;
}
#BLOCK-CATEGORY .CategoryMosaic .Category .InfosBox h3 a:hover{
color:#000;
}
@media only screen and (max-width:761px) {
#BLOCK-CATEGORY .CategoryMosaic .Category .InfosBox h3{
font-size:25px;
}
}
#BLOCK-CATEGORY .CategoryMosaic .Category .InfosBox .NumQuestions{
margin:0;
padding:15px;
color:#be0f34;
font-weight:bold;
font-family: "Gotham SSm medium A", "Gotham SSm medium B", Gotham, Helvetica, Arial, sans-serif;
font-size: 11px;
text-transform: uppercase;
padding-bottom:5px;
}
@media only screen and (max-width:761px) {
#BLOCK-CATEGORY .CategoryMosaic .Category .InfosBox .NumQuestions{
padding:0px;
}
}
#BLOCK-CATEGORY .CategoryMosaic .Category .InfosBox .BtnLink{
margin:0;
margin-top:18px;
}
@media only screen and (max-width:761px) {
#BLOCK-CATEGORY .CategoryMosaic .Category .InfosBox .BtnLink{
display:none!important;
}
}
#BLOCK-CATEGORY .CategoryMosaic .Category .InfosBox .BtnLink span,
#BLOCK-CATEGORY .CategoryMosaic .Category .InfosBox .BtnLink a {
font-family: "Gotham SSm medium A", "Gotham SSm medium B", Gotham, Helvetica, Arial, sans-serif;
font-size: 11px;
text-transform: uppercase;
color: #FFF;
text-decoration: none;
position: relative;
background-color: #000;
padding: 18px 30px;
display: inline-block;
line-height: 14px;
border:2px solid #FFF;
transition:ease-in-out 0.5s;
}
#BLOCK-CATEGORY .CategoryMosaic .Category:hover .InfosBox .BtnLink span,
#BLOCK-CATEGORY .CategoryMosaic .Category .InfosBox .BtnLink a:hover {
color: #000;
background-color: #FFF;
border:2px solid #8b8b8b;
}
/*-------------------------------------------------------*/
#BLOCK-CATEGORY-LINKS {
}
#BLOCK-CATEGORY-LINKS .CategoryMosaic{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
max-width:1182px;
margin-left:auto;
margin-right:auto;
padding:20px;
}
#BLOCK-CATEGORY-LINKS .CategoryMosaic .Category{
margin:6px;
max-width:185px;
position:relative;
margin-bottom:30px;
cursor:pointer;
}
@media only screen and (max-width:1024px) and (min-width:1023px) {
#BLOCK-CATEGORY-LINKS .CategoryMosaic .Category {
max-width:150px;
}
}
@media only screen and (max-width:761px) {
#BLOCK-CATEGORY-LINKS .CategoryMosaic .Category {
max-width:185px;
width: calc(50% - 12px);
margin-bottom: 6px;
}
}
#BLOCK-CATEGORY-LINKS .CategoryMosaic .Category figure{
display:block;
margin:0;
padding:0;
max-height:131px;
overflow:hidden;
}
#BLOCK-CATEGORY-LINKS .CategoryMosaic .Category figure img{
max-width:100%;
transform:scale(1);
transition:transform ease-in-out 0.2s;
}
#BLOCK-CATEGORY-LINKS .CategoryMosaic .Category:hover figure img{
transform:scale(1.1);
}
#BLOCK-CATEGORY-LINKS .CategoryMosaic .Category .InfosBox{
background-color:#f0f2f6;
margin:0px;
text-align:center;
height:40px;
display:flex;
justify-content:center;
align-items:center;
}
#BLOCK-CATEGORY-LINKS .CategoryMosaic .Category .InfosBox h3{
margin:0;
padding:0;
font-family: "Gotham SSm medium A", "Gotham SSm medium B", Gotham, Helvetica, Arial, sans-serif;
font-size:16px;
color:#000;
font-weight:normal;
line-height:1em;
}
#BLOCK-CATEGORY-LINKS .CategoryMosaic .Category .InfosBox h3 a:hover{
color:#000;
}
#BLOCK-CATEGORY-LINKS .CategoryMosaic .Category .InfosBox .NumQuestions{
display:none;
}
#BLOCK-CATEGORY-LINKS .CategoryMosaic .Category .InfosBox .BtnLink{
display:none;
}
/*-------------------------------------------------------*/
#BLOCK-QUESTIONS{
padding-top:50px;
position:relative;
}
#BLOCK-QUESTIONS .jcarousel-pagination{
bottom:-10px;
}
@media only screen and (max-width:1023px) {
#BLOCK-QUESTIONS{
margin-bottom:40px;
}
}
@media only screen and (max-width:761px) {
#BLOCK-QUESTIONS{
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 50px, #FFFFFF );
}
}
.QuestionsMosaic{
display:flex;
justify-content:left;
align-items:stretch;
flex-wrap:wrap;
max-width:1005px;
margin-left:auto;
margin-right:auto;
padding:20px;
width:100%;
box-sizing:border-box;
}
.QuestionsMosaic .content-asset{
flex-basis:33.33%;
max-width: 333px;
}
.Question{
margin:0px;
max-width:333px;
text-align:left;
padding:20px;
box-sizing:border-box;
flex-basis:33.33%;
min-height:250px;
cursor:pointer;
}
.QuestionsMosaic .content-asset .Question{
min-height:100%;
}
@media only screen and (max-width:1023px) {
.QuestionsMosaic .content-asset,
.Question {
/* min-height: 300px; */
margin: 0px;
max-width: 760px;
}
.QuestionsMobileSlider{
margin-top:20px;
}
}
@media only screen and (max-width:761px) {
.QuestionsMosaic .content-asset,
.Question {
/* min-height: 300px; */
margin: 0 20px;
max-width: 760px;
}
.QuestionsMobileSlider{
margin-top:20px;
}
}
.Question[data-category="sun"]{
background-color:#fff482;
}
.Question[data-category="face"]{
background-color:#fde6d4;
}
.Question[data-category="men"]{
background-color:#d8eafa;
}
.Question[data-category="body"]{
background-color:#f1c6a4;
}
.Question[data-category="makeup"]{
background-color:#fbe4ea;
}
.Question[data-category="ingredients"]{
background-color:#e2f7e9;
}
@media only screen and (max-width:1023px) {
/*.QuestionsMobileSlider li:nth-child(2n) .Question {
background-color:#fff;
}*/
.QuestionsMobileSlider{
margin-top:20px;
}
}
.Question h3{
margin:0;
padding:0;
font-family:ClarinsRegular, Clarins;
font-size:29px;
color:#000;
font-weight:normal;
line-height:1em;
position:relative;
}
.Question h3 a:hover{
color:#000;
}
.Question h3::before {
content: "“";
font-size: 75px;
line-height: 1em;
height: 40px;
width:30px;
text-align: left;
font-family: ClarinsRegular,Clarins;
color: #FFF;
overflow: hidden;
display: inline-block;
}
.Question h3::after{
content:"â€";
font-family:ClarinsRegular,Clarins;
}
.Question p.TextLink a {
font-size:12px;
}
/*-------------------------------------------------------*/
.CategoryHeader{
width:1600px;
margin-left:calc(50% - 800px);
position:relative;
}
@media only screen and (max-width:1249px) {
.CategoryHeader{
width:100%;
margin-left:0;
}
.CategoryHeader img {
margin-left: calc(50% - 800px);
}
}
@media only screen and (max-width:761px) {
.CategoryHeader img {
margin-left: calc(50% - 280px);
width: 750px;
}
}
.CategoryHeader .TextContent{
background-color:#fff;
position:absolute;
left:50%;
max-width:546px;
padding:40px;
box-sizing:border-box;
top:50%;
transform:translateY(-50%);
}
.CategoryHeader .TextContent p{
margin:0;
}
@media only screen and (max-width:1249px) {
.CategoryHeader .TextContent{
width:calc(50% - 40px);
}
}
@media only screen and (max-width:1023px) {
.CategoryHeader .TextContent{
padding:30px;
}
}
@media only screen and (max-width:761px) {
.CategoryHeader .TextContent{
transform:none;
position:relative;
top:auto;
left:auto;
padding:20px;
max-width:761px;
width:100%;
padding-bottom:0px;
}
}
.MyContent .CategoryHeader h1 {
display: inline-block;
font-family: ClarinsRegular, Clarins;
font-size: 35px;
font-weight: normal;
line-height: 1em;
margin: 0;
padding: 0;
position: relative;
text-align: center;
z-index: 1;
padding-bottom:8px;
}
@media only screen and (max-width:761px) {
.MyContent .CategoryHeader h1 {
margin: 0 20px;
}
}
/*-------------------------------------------------------*/
.QuestionsFilter{
font-size:0;
padding:30px;
padding-bottom:10px;
}
.QuestionsFilter a{
font-family: "Gotham SSm medium A", "Gotham SSm medium B", Gotham, Helvetica, Arial, sans-serif;
font-size:11px;
border:2px solid #e5e5e5;
line-height:26px;
padding-left:12px;
padding-right:12px;
display:inline-block;
text-decoration:none;
text-transform:uppercase;
color:#000;
margin:3px;
background-color:#FFF;
}
.QuestionsFilter a:hover{
color:#FFF;
background-color:#000;
}
.QuestionsFilter a.Selected{
border:2px solid #000;
}
/*-------------------------------------------------------*/
.QuestionsMobileSlider ul{
margin:0 auto;
list-style:none;
padding:0;
}
.QuestionsMobileSlider ul li{
padding:0;
margin-bottom:20px;
}
@media only screen and (min-width:1024px) {
.QuestionsDesktopSlider {
width: 1000px;
margin: 0 auto;
}
.QuestionsDesktopSlider ul li {
/*width:1000px;*/
}
}
@media only screen and (max-width:1023px) {
.QuestionsDesktopSlider {
display:none;
}
}
.QuestionsDesktopSlider ul{
margin:0 auto;
list-style:none;
padding:0;
}
/*.QuestionsDesktopSlider ul li{
padding:0;
display:flex;
flex-wrap:wrap;
}*/
/*-------------------------------------------------------*/
#BLOCK-QUESTIONS-CATEGORY{
position:relative;
display:block;
margin-bottom:40px;
}
#BLOCK-QUESTIONS-CATEGORY .QuestionsMosaic {
display:none;
}
#BLOCK-QUESTIONS-CATEGORY .jcarousel .QuestionsMosaic {
width:1000px;
display:flex;
box-sizing: border-box;
}
@media only screen and (max-width:1023px) {
#BLOCK-QUESTIONS-CATEGORY .jcarousel .QuestionsMosaic {
width:760px;
}
}
#BLOCK-QUESTIONS-CATEGORY .jcarousel-control-prev,
#BLOCK-QUESTIONS-CATEGORY .jcarousel-control-next {
display:inline-block;
width:28px;
height:28px;
line-height:28px;
font-size:16px;
border:#e5e5e5 2px solid;
border-radius:0;
box-shadow:none;
text-shadow:none;
background-color:#fff;
color:#000;
position:relative;
left:auto;
top:auto;
right:auto;
}
#BLOCK-QUESTIONS-CATEGORY .jcarousel-control-prev.hidden-arrow,
#BLOCK-QUESTIONS-CATEGORY .jcarousel-control-next.hidden-arrow {
display:none;
}
@media only screen and (max-width:761px) {
#BLOCK-QUESTIONS-CATEGORY .jcarousel-control-prev,
#BLOCK-QUESTIONS-CATEGORY .jcarousel-control-next {
display:none;
}
}
#BLOCK-QUESTIONS-CATEGORY .jcarousel-pagination div,
#BLOCK-QUESTIONS-CATEGORY .jcarousel-pagination a,
#ROUTINE-PRODUCT-JCAROUSEL .jcarousel-pagination div,
#ROUTINE-PRODUCT-JCAROUSEL .jcarousel-pagination a{
cursor:pointer;
}
@media only screen and (min-width:761px) {
#BLOCK-QUESTIONS-CATEGORY .jcarousel-pagination div,
#BLOCK-QUESTIONS-CATEGORY .jcarousel-pagination a{
display:inline-block;
width:26px;
height:26px;
line-height:26px;
font-size:14px;
border:#fff 2px solid;
border-radius:0;
box-shadow:none;
text-shadow:none;
background-color:#fff;
color:#000;
position:relative;
left:auto;
top:auto;
right:auto;
text-indent: 0;
margin: 2px;
cursor:pointer;
}
#BLOCK-QUESTIONS-CATEGORY .jcarousel-pagination div.active,
#BLOCK-QUESTIONS-CATEGORY .jcarousel-pagination a.active{
background-color:#e5e5e5;
}
}
#BLOCK-QUESTIONS-CATEGORY .jcarousel-pagination{
bottom:auto;
position:relative;
left:auto;
right:auto;
display:inline-block;
transform:none;
min-width: 0;
}
@media only screen and (max-width:1023px) {
#BLOCK-QUESTIONS-CATEGORY .QuestionsMosaic {
width:730px;
}
}
@media only screen and (max-width:761px) {
#BLOCK-QUESTIONS-CATEGORY .QuestionsMosaic {
width:calc(100vw - 40px);
}
}
#BLOCK-QUESTIONS-CATEGORY .Question:nth-child(2n){
background-color:#fff;
}
#BLOCK-QUESTIONS-CATEGORY .Question[data-category="sun"]:nth-child(2n) h3::before{
color:#fff482;
}
#BLOCK-QUESTIONS-CATEGORY .Question[data-category="face"]:nth-child(2n) h3::before{
color:#fde6d4;
}
#BLOCK-QUESTIONS-CATEGORY .Question[data-category="men"]:nth-child(2n) h3::before{
color:#d8eafa;
}
#BLOCK-QUESTIONS-CATEGORY .Question[data-category="body"]:nth-child(2n) h3::before{
color:#f1c6a4;
}
#BLOCK-QUESTIONS-CATEGORY .Question[data-category="makeup"]:nth-child(2n) h3::before{
color:#fbe4ea;
}
#BLOCK-QUESTIONS-CATEGORY .Question[data-category="ingredients"]:nth-child(2n) h3::before{
color:#e2f7e9;
}
/*-------------------------------------------------------*/
#BLOCK-RELATED-CONTENTS{
padding-top:50px;
position:relative;
}
.RelatedContentMosaic{
/* display:flex;
justify-content:center;
align-items:flex-start;
flex-wrap:wrap;*/
max-width:1210px;
margin-left:auto;
margin-right:auto;
padding:0px;
padding-top:0;
/*width: calc(100% - 40px);*/
}
.RelatedContentMosaic .RelatedContent .Title{
margin:0;
padding:0;
font-family:ClarinsRegular, Clarins;
font-size:30px;
color:#000;
font-weight:normal;
line-height:1em;
position:relative;
margin-bottom:10px;
}
.RelatedContentMosaic .RelatedContent span{
position:relative;
}
.RelatedContentMosaic .RelatedContent span img{
position:absolute;
left:-20px;
bottom:-2px;
}
.RelatedContentMosaic .RelatedContent figure{
margin:0px;
padding:0;
overflow:hidden;
}
.RelatedContentMosaic .RelatedContent figure img{
max-width:100%;
transition:transform ease-in-out 0.5s;
transform:scale(1);
}
.RelatedContentMosaic .RelatedContent:hover figure img{
transform:scale(1.05);
}
.RelatedContentMosaic .RelatedContent{
margin:20px;
max-width:363px;
text-align:left;
box-sizing:border-box;
position:relative;
cursor:pointer;
}
.RelatedContentMosaic .RelatedContent .InfosBox{
background-color:#fff;
margin:0px;
bottom:20px;
position:absolute;
left:20px;
width:calc(100% - 40px);
text-align:center;
padding:20px;
box-sizing:border-box;
min-height:120px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
@media only screen and (max-width:1249px) {
.RelatedContentMosaic .RelatedContent .Title{
font-size:25px;
}
.RelatedContentMosaic .RelatedContent .Title img{
max-width:140px;
}
}
@media only screen and (max-width:1023px) {
#BLOCK-RELATED-CONTENTS{
padding-top:20px;
padding-bottom:0px;
}
.RelatedContentMosaic {
padding: 0;
width: calc(100% - 40px);
margin: 20px;
margin-bottom: 0;
}
.RelatedContentMosaic .RelatedContent{
margin:0px auto;
margin-bottom:40px;
}
.RelatedContentMosaic .jcarousel-pagination{
bottom:10px;
}
}
/*@media only screen and (max-width:761px) {
#BLOCK-RELATED-CONTENTS{
padding-top:20px;
}
.RelatedContentMosaic .RelatedContent{
margin:5px;
}
.RelatedContentMosaic .RelatedContent .Title{
font-size:20px;
}
.RelatedContentMosaic .RelatedContent .Title img{
max-width:140px;
}
.RelatedContentMosaic .RelatedContent figure{
height:230px;
}
.RelatedContentMosaic .RelatedContent .InfosBox {
bottom: 5px;
left: 5px;
width: calc(100% - 10px);
padding: 10px;
min-height:80px;
}
}*/
#BLOCK-QUESTIONS-ROUTINE {
margin-top:40px;
margin-bottom:40px;
}
@media only screen and (max-width:761px) {
#BLOCK-QUESTIONS-ROUTINE {
margin-top:20px;
margin-bottom:20px;
}
}
#BLOCK-QUESTIONS-ROUTINE .Visual{
padding-bottom:10px;
padding-top:20px;
}
#BLOCK-QUESTIONS-ROUTINE .ProductName{
font-family:ClarinsRegular, Clarins;
font-size:18px;
padding:20px;
padding-top:0px;
padding-bottom:10px;
min-height:60px;
}
#BLOCK-QUESTIONS-ROUTINE .Price{
padding-bottom:10px;
}
#BLOCK-QUESTIONS-ROUTINE .Visual img{
display:block;
margin:0 auto;
}
.Article-FAQ{
display:flex;
justify-content:center;
align-items:flex-start;
flex-wrap:wrap;
}
@media only screen and (max-width:761px) {
.Article-FAQ {
flex-direction:column;
align-items:center;
}
}
.Article-FAQ h1{
text-align:center;
display:block;
font-family:ClarinsRegular, Clarins;
font-size:50px;
line-height:1em;
font-weight:normal;
margin:0;
padding:0 20px;
box-sizing:border-box;
width:100%;
flex-basis:100%;
padding-bottom: 15px;
}
@media only screen and (max-width:761px) {
.Article-FAQ h1{
font-size:35px;
padding-bottom: 10px;
}
}
.Article-FAQ .TextContent{
flex:1;
text-align:left;
padding-top:40px;
padding-right:40px;
box-sizing:border-box;
}
@media only screen and (max-width:761px) {
.Article-FAQ .TextContent{
text-align:center;
padding:20px;
}
}
.Article-FAQ .TextContent h2{
margin:0;
padding-bottom:15px;
font-weight:normal;
font-family: "Gotham SSm medium A", "Gotham SSm medium B", Gotham, Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 1.4em;
color: #000;
text-align: left;
}
.Article-FAQ .TextContent a{
text-decoration:underline;
font-family: "Gotham SSm medium A", "Gotham SSm medium B", Gotham, Helvetica, Arial, sans-serif;
text-transform:uppercase;
font-size:11px;
}
.Article-FAQ .TextContent p{
margin:0;
}
.Article-FAQ .TextContent p+h2{
margin-top:30px;
}
.Article-FAQ .VisualContent{
max-width:465px;
}
.Article-FAQ .VisualContent img{
max-width:100%;
cursor:pointer;
}
@media only screen and (max-width:1023px) {
.Article-FAQ .VisualContent {
max-width: 355px;
}
}
@media only screen and (max-width:761px) {
.Article-FAQ .Packshot{
padding:0 20px;
margin:0 auto;
}
.Article-FAQ .VisualContent{
/*order:2;*/
}
.Article-FAQ .TextContent h2{
text-align:center;
}
}
.Article-FAQ h1 img{
margin:0 auto;
display:block;
}
.MyContent .ShareLink{
position: absolute;
top: 50%;
right: 20px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0;
}
@media only screen and (max-width:761px) {
.MyContent .ShareLink{
position: relative;
top: auto;
right: auto;
-webkit-transform: none;
transform: none;
margin: 0;
text-align:center;
margin-top:20px;
}
}
/*-----------------------------*/
.st_facebook_custom {
background: url("img/facebook.svg") no-repeat scroll left top transparent;
background-size: 100% auto;
padding:0;
display:inline-block;
cursor: pointer;
width: 30px;
height: 30px;
margin-right:5px;
}
.st_twitter_custom {
background: url("img/twitter.svg") no-repeat scroll left top transparent;
background-size: 100% auto;
padding: 0;
width: 30px;
height: 30px;
display:inline-block;
cursor: pointer;
margin-right:5px;
}
.st_pinterest_custom {
background: url("img/pinterest.svg") no-repeat scroll left top transparent;
background-size: 100% auto;
padding: 0;
width: 30px;
height: 30px;
display:inline-block;
cursor: pointer;
}
/**************************************************/
.MyContent .Article-Breadcrumb{
padding:20px;
position:relative;
padding-top:0;
}
.MyContent .Article-Breadcrumb p.TextLink{
display:block;
position:relative;
line-height:50px;
text-align:center;
}
.MyContent .Article-Breadcrumb p.TextLink img{
display: block;
position: relative;
margin: 0 auto;
max-width: 100%;
}
@media only screen and (max-width:761px) {
.MyContent .Article-Breadcrumb p.TextLink img {
margin-bottom: 20px;
}
}
@media only screen and (max-width:761px) {
.MyContent .Article-Breadcrumb p.TextLink a{
/* margin:0;
padding:20px;
text-align:left;
border:1px solid #e7e7e7;
line-height:1em;*/
}
.MyContent .Article-Breadcrumb p.TextLink a span{
display:none;
}
}
@media only screen and (max-width:1023px) {
#ROUTINE-PRODUCT-JCAROUSEL {
padding-bottom:40px;
}
#ROUTINE-PRODUCT-JCAROUSEL .jcarousel-pagination{
bottom:0;
}
}
@media only screen and (max-width:761px) {
.product-quickshop{
display:inline-block;
}
}
/*-------------------------------------------------------*/
/*-------------------------------------------*/
.MyContent #Transversal-Push {
position:relative;
}
.MyContent #Transversal-Push h2 {
margin: 0;
font-family: ClarinsRegular, Clarins;
font-size: 35px;
line-height: 35px;
color: #000;
font-weight: normal;
padding: 0;
padding-top: 20px;
}
@media screen and (max-width: 761px) {
.MyContent #Transversal-Push h2 {
margin-left: 20px;
margin-right: 20px;
}
}
.MyContent #Transversal-Push .jcarousel {
margin-left: auto;
margin-right: auto;
width: 970px;
}
@media screen and (max-width: 1023px) {
.MyContent #Transversal-Push .jcarousel {
width: 590px;
}
}
.MyContent #Transversal-Push .products-pagination.jcarousel-control-next,
.MyContent #Transversal-Push .products-pagination.jcarousel-control-prev{
top:calc(50% - 35px);
display:none;
}
@media screen and (max-width: 1023px) {
.MyContent #Transversal-Push .products-pagination.jcarousel-control-next,
.MyContent #Transversal-Push .products-pagination.jcarousel-control-prev{
display:block;
}
}
@media screen and (max-width: 761px) {
.MyContent #Transversal-Push .products-pagination.jcarousel-control-next,
.MyContent #Transversal-Push .products-pagination.jcarousel-control-prev{
display:none;
}
}
.MyContent #Transversal-Push .products-pagination.jcarousel-control-next{
right:20px;
}
.MyContent #Transversal-Push .products-pagination.jcarousel-control-prev{
left:20px;
}
@media screen and (max-width: 761px) {
.MyContent #Transversal-Push .jcarousel {
width: 290px;
padding-bottom:40px;
}
.MyContent #Transversal-Push .jcarousel-pagination {
display:block;
bottom:0;
}
}
.MyContent #Transversal-Push ul {
display: block;
text-align: center;
position: relative;
margin-bottom: 60px;
}
.MyContent #Transversal-Push ul li {
font-size: 0;
border: 2px solid #e5e5e5;
cursor: pointer;
display: inline-block;
margin: 20px;
max-width: 284px;
min-height: 410px;
padding-bottom: 50px;
text-align: left;
vertical-align: top;
/*width: calc(50% - 40px);*/
position:relative;
}
.MyContent #Transversal-Push ul li img {
max-width: 100%;
}
@media screen and (max-width: 1023px) {
.MyContent #Transversal-Push ul li {
margin: 5px;
/*width: calc(33% - 14px);*/
margin-top:20px;
}
}
.MyContent #Transversal-Push ul li p.Text {
margin: 0;
font-family: ClarinsRegular, Clarins;
font-size: 28px;
line-height: 1em;
color: #000;
padding: 0;
padding-bottom: 10px;
font-weight: normal;
padding-left: 20px;
padding-right: 20px;
min-height: 100px;
}
.MyContent #Transversal-Push ul li p.Title {
color: #be0f34;
text-transform: uppercase;
font-family: "Gotham SSm medium A", "Gotham SSm medium B", Gotham, Helvetica, Arial, sans-serif;
margin: 0;
font-size: 11px;
padding: 20px;
padding-bottom: 10px;
}
.MyContent #Transversal-Push ul li p.text-link {
bottom: 20px;
font-size: 11px;
line-height: 14px;
margin: 0;
padding: 20px;
position: absolute;
padding-bottom:8px;
}
.MyContent #Transversal-Push ul li p.text-link a {
text-transform: uppercase;
color: #000;
text-decoration: none;
border-bottom: #d5d5d5 1px solid;
}
@media screen and (max-width: 350px) {
.MyContent #Transversal-Push ul li p.Text {
font-size: 20px;
}
}
/*---------------------------------------------------*/
@media only screen and (max-width:1023px) {
.MyContent .QuestionsMobileSlider{
display:block!important;
}
.MyContent .QuestionsMosaic:not(.QuestionsMosaicData) {
display:none!important;
}
.MyContent #BLOCK-QUESTIONS .jcarousel-pagination{
display:block!important;
}
}
@media only screen and (min-width:1024px) {
.MyContent .QuestionsMobileSlider{
display:none!important;
}
.MyContent .QuestionsMosaic:not(.QuestionsMosaicData) {
display:flex!important;
}
.MyContent #BLOCK-QUESTIONS .jcarousel-pagination{
display:none!important;
}
}
#ROUTINE-PRODUCT-JCAROUSEL[data-displayed-items="2|2|1"]{
max-width:700px;
margin:0 auto;
}
/*--------- DTW -------------*/
@media only screen and (max-width: 761px) {
.MyContent h2 {
padding-bottom: 10px;
}
}
@media only screen and (max-width: 768px){
.Question{
min-height: 0px;
}
.Question h3{
font-size: 27px;
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.QuestionsMosaic {
flex-wrap: wrap;
}
.QuestionsMosaic{
padding: 0px;
}
}
/***EDITS***/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){
.QuestionsFilter{
padding: 28px;
}
.Question{
max-width: 330px;
}
#BLOCK-CATEGORY-LINKS .CategoryMosaic .Category{
width: 50%;
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.QuestionsFilter{
padding: 20px;
}
}
@media only screen and (max-width: 768px){
.Question{
min-height: 275px;
}
}
.product-tile{
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) {
.QuestionsMosaic .content-asset, .Question {
max-width: 100%;
}
body{
overflow-y: hidden;
}
}
@media only screen
and (min-device-width : 834px)
and (max-device-width : 1112px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
body,
html {
width: 100%;
overflow-x: hidden !important;
}
#main:not(.main-homepage) {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media (max-width: 480px) {
body{
overflow-y: hidden;
}
#qs-mobile {
display: none;
}
}
/*Quickshop*/
.product-tile{
margin-left: auto;
margin-right: auto;
}
@media only screen and (max-width: 761px) {
.product-tile{
display: none;
}
}
body,
html {
width: 100%;
overflow-x: hidden !important;
}
#main:not(.main-homepage) {
padding-left: 0 !important;
padding-right: 0 !important;
}