/* Fonts */

@font-face {
    font-family: 'ClarinsRegular';
    src: url('fonts/ClarinsReg.eot');
    src: url('fonts/ClarinsReg.eot') format('embedded-opentype'), url('fonts/ClarinsReg.woff2') format('woff2'), url('fonts/ClarinsReg.woff') format('woff'), url('fonts/ClarinsReg.ttf') format('truetype'), url('fonts/ClarinsReg.svg#ClarinsReg') format('svg');
}

@font-face {
    font-family: 'Gotham Medium';
    src: url('fonts/GothamMedium.eot');
    src: url('fonts/GothamMedium.eot') format('embedded-opentype'), url('fonts/GothamMedium.woff2') format('woff2'), url('fonts/GothamMedium.woff') format('woff'), url('fonts/GothamMedium.ttf') format('truetype'), url('fonts/GothamMedium.svg#GothamMedium') format('svg');
}

@font-face {
    font-family: 'Gotham Book';
    src: url('fonts/GothamBook.eot');
    src: url('fonts/GothamBook.eot') format('embedded-opentype'), url('fonts/GothamBook.woff2') format('woff2'), url('fonts/GothamBook.woff') format('woff'), url('fonts/GothamBook.ttf') format('truetype'), url('fonts/GothamBook.svg#GothamBook') format('svg');
}

@font-face {
    font-family: 'selimaregular';
    src: url('fonts/selima_-webfont.eot');
    src: url('fonts/selima_-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/selima_-webfont.woff2') format('woff2'), url('fonts/selima_-webfont.woff') format('woff'), url('fonts/selima_-webfont.ttf') format('truetype'), url('fonts/selima_-webfont.svg#selimaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html,
body {
    padding: 0;
    margin: 0;
}


/* END of Fonts */

.beautyfaq {
    max-width: 1170px;
    margin: 0 auto;
    color: #000;
    font-family: "Gotham SSm book A", "Gotham SSm book B", "Gotham Book", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 22px;
}

.beautyfaq p {
    font-family: "Gotham SSm book A", "Gotham SSm book B", "Gotham Book", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.5px;
    margin: 14px 0;
}

.beautyfaq a {
    color: #000;
    text-decoration: underline;
}

.beautyfaq a:hover {
    color: #be0f34;
}


/* Header */

.beautyfaq-header {
    position: relative;
    text-align: center;
}

.beautyfaq-header h2 {
    margin: 0;
    padding: 20px 0 15px 0;
}

.beautyfaq-header .subtext {
    font-size: 11px;
    font-family: "Gotham Medium", "Gotham SSm medium A", "Gotham SSm medium B", "GothamMedium", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 22px 0 0px 0;
}

.beautyfaq-social-icons a {
    margin-left: 9px;
}


/* Header - End */


/* Hero */

.beautyfaq-hero {
    position: relative;
}

.beautyfaq-hero img {
    width: 100%;
    height: auto;
}

.beautyfaq-hero h3 {
    font-family: ClarinsRegular, Clarins;
    padding: 0;
    margin: 0;
    font-size: 35px;
    font-weight: 400;
    text-align: center;
}


/* Hero - End */


/* Description */

.beautyfaq-description {
    position: relative;
    text-align: center;
    max-width: 794px;
    margin: 0px auto;
}

.beautyfaq-description h4 {
    font-size: 22px;
    font-family: "Gotham Medium", "Gotham SSm medium A", "Gotham SSm medium B", "GothamMedium", Helvetica, Arial, sans-serif;
    margin: 0;
    font-weight: normal;
}


/* Description - End */


/* FAQ */

.beautyfaq-faq {
    max-width: 1050px;
    margin: 0 auto;
}

.beautyfaq-title {
    position: relative;
    font-family: "Gotham Medium", "Gotham SSm medium A", "Gotham SSm medium B", "GothamMedium", Helvetica, Arial, sans-serif;
    padding: 12px 40px 12px 12px;
    border-bottom: 2px solid #ececec;
    cursor: pointer;
}

.beautyfaq-title span {
    font-size: 16px;
    line-height: 26px;
    color: #be0f34;
    padding-right: 12px;
}

.beautyfaq-title:after {
    content: "+";
    font-size: 24px;
    line-height: 26px;
    color: #8b8b8b;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 15px;
}

.active .beautyfaq-title:after {
    content: "-";
}

.beautyfaq-faq .beautyfaq-content {
    display: none;
}


/* FAQ - End */


/* Footer */

.beautyfaq-footer {
    margin-top: 15px;
}

.beautyfaq-footer img {
    width: 100%;
    height: auto;
}

.beautyfaq-footer-content {
    text-align: center;
}

.beautyfaq-footer-content h5 {
    font-family: ClarinsRegular, Clarins;
    font-size: 35px;
    padding: 0;
    margin: 0;
    font-weight: normal;
    line-height: 1em;
}


/* Footer - End */

@media only screen and (min-width: 762px) {
    .show-mobile {
        display: none;
    }
    .beautyfaq {
        padding: 0 13.438vw
    }
    .beautyfaq-social-icons {
        position: absolute;
        top: 0;
        right: 0;
    }
    .beautyfaq-hero h3 {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 45%;
        transform: translate(0, -50%);
        text-align: right;
        font-size: 2.1875vw;
        line-height: 2.375vw;
    }
    .beautyfaq-hero .bigger {
        display: block;
        font-size: 2.6em;
        padding-bottom: 0.215em;
    }
    .beautyfaq-description {
        top: -2vw;
        padding-left: 3vw;
    }
    .beautyfaq-faq .beautyfaq-content {
        border-bottom: 2px solid #ececec;
        overflow: hidden;
    }
    .beautyfaq-faq .beautyfaq-content img {
        float: left;
        margin: 0 40px 27px 0px;
    }
    .beautyfaq-faq .beautyfaq-content {
        padding: 28px 0 0px 10px;
    }
    /* Visuel */
    .beautyfaq-visuel-right,
    .beautyfaq-visuel-right-bot,
    .beautyfaq-visuel-left {
        position: absolute;
    }
    .beautyfaq-visuel-right img,
    .beautyfaq-visuel-right-bot img,
    .beautyfaq-visuel-left img {
        width: 100%;
        height: auto;
    }
    .beautyfaq-visuel-right {
        margin-top: -4.6vw;
        max-width: 13.438vw;
        right: 0;
    }
    .beautyfaq-visuel-right-bot {
        margin-top: -233px;
        max-width: 13.5vw;
        right: 0;
    }
    .beautyfaq-visuel-left {
        max-width: 13vw;
        left: 0;
    }
    /* Visuel - End */
    .beautyfaq-footer-content {
        max-width: 47vw;
        margin: -16.25vw auto 0;
        padding-left: 11%;
    }
}

@media only screen and (min-width: 1600px) {
    .beautyfaq {
        padding: 0 215px;
    }
    .beautyfaq-hero h3 {
        font-size: 35px;
        line-height: 38px;
    }
    .beautyfaq-description {
        top: -36px;
        padding-left: 50px;
    }
    .beautyfaq-visuel-left {
        max-width: 255px;
    }
    .beautyfaq-footer-content {
        max-width: 750px;
        margin: -260px auto 0;
    }
    .beautyfaq-visuel-right-bot {
        margin-top: -220px;
    }
}

@media only screen and (max-width: 761px) {
    .show-desktop {
        display: none;
    }
    .mobile-line {
        display: block;
    }
    .beautyfaq-social-icons {
        padding: 15px 0 22px;
    }
    .beautyfaq-description {
        padding: 30px 30px 0;
    }
    .beautyfaq p {
        font-size: 3.684vw;
        line-height: 5.263vw;
    }
    .beautyfaq-hero h3 {
        font-size: 9.211vw;
        line-height: 9.2vw;
    }
    .beautyfaq-description h4 {
        font-size: 5.789vw;
        line-height: 6vw;
    }
    .beautyfaq-footer-content h5 {
        font-size: 9.211vw;
        line-height: 9.2vw;
        padding: 30px;
    }
    .beautyfaq-faq .active .beautyfaq-mobile-wraper {
        display: flex;
        flex-direction: column-reverse;
        padding: 0 20px 20px 20px;
        border-bottom: 2px solid #ececec;
    }
    .beautyfaq-faq .beautyfaq-content img {
        width: 100%;
        height: auto;
    }
    .beautyfaq-footer-content {
        position: relative;
        z-index: 2;
        margin: -200px 50px 0 50px;
        background: #fff;
    }
    .beautyfaq-title {
        padding: 3.158vw 10.526vw 3.158vw 20px;
        font-size: 4.737vw;
        line-height: 5.263vw;
    }
    .beautyfaq-title span {
        font-size: 4.737vw;
        line-height: 5.263vw;
    }
    .beautyfaq-title:after {
        padding: 0 20px 0 15px;
        font-size: 6.316vw;
        line-height: 6.579vw;
    }
    .beautyfaq-footer {
        margin-top: 40px;
    }
}

@media only screen and (max-width: 375px) {
    .beautyfaq-header h2 img {
        max-width: 80%;
    }
}


/*--------------- DTW Edits -------------------*/

.beautyfaq-description {
    top: -20px;
}

.beautyfaq-description {
    max-width: 604px;
}

.beautyfaq-footer-content {
    max-width: 520px;
    margin: -176px auto 0;
}

@media only screen and (min-device-width: 834px) and (max-device-width: 1112px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .beautyfaq-description {
        top: 0px;
    }
    .beautyfaq-description {
        max-width: 494px;
    }
    .beautyfaq-footer-content {
        max-width: 410px;
        margin: -126px auto 0;
    }
}

@media screen and (max-width: 761px) {
    .beautyfaq-footer-content {
        margin: -200px 50px 0 50px;
    }
}


/*------------------EDIT--------------------*/

.text-color-red {
    color: none !important;
    padding-right: 0px !important;
}

.beautyfaq-hero .bigger {
    font-size: 2em;
}

@media only screen and (min-device-width: 834px) and (max-device-width: 1112px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .beautyfaq-description {
        top: 44px !important;
        margin-top: 20px !important;
        margin-bottom: 45px !important;
    }
    .beautyfaq-footer-content {
        margin: 20px auto 0 !important;
    }
    .beautyfaq-faq .beautyfaq-content img {
        width: 58% !important;
        margin: 0px 13px 30px 0px !important;
    }
}

@media only screen and (min-device-width: 834px) and (max-device-width: 1112px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    #BLOCK-CATEGORY-LINKS .CategoryMosaic .Category {
        max-width: 155px !important;
    }
}