/** Shopify CDN: Minification failed

Line 16:37 Expected ")" to end URL token

**/
.choose-your-skin-type, 
.landing-page-with-selector,
.landing-page-july {
    .container {
        max-width: 1170px;
    }
    .hero {
        background: #FEF3E3;
        height: 700px;
        .container {
            background-image: url({{ 'skin-type-hero.png' | asset_url }});
            background-size: cover;
            background-position: 0 0;
            background-repeat: no-repeat;
            background-position: 25% 50%;
            position: relative;
            background-color: #D2C4AB;
            height: 100%;
            max-width: none;
            .title {
                font-family: 'gabrielaregular';
                font-size: 48px;
                line-height: 60px;
                font-weight: 600;
                color: #336268;
                width: 55%;
                right: 5%;
                top: calc( 50% - 1.5em );
                position: absolute;
                text-align: center;
            }
        }
    }
    .block-2,
    .selector-wrapper-block {
        background: none;
        .container {
            padding: 100px 0;
            .selector {
                text-transform: uppercase;
                display: flex;
                flex-direction: column;
                .title {
                    font-family: 'Montserrat';
                    font-size: 36px;
                    line-height: 27px;
                    font-weight: 600;
                    text-align: center;
                    margin: auto 0 40px;
                    color: #336268;
                }

                .selector-wrapper {
                    width: 60%;
                    margin: auto;
                    display: flex;
                    flex-direction: row;
                    column-gap: 20px;
                    justify-content: center;
                    margin-bottom: 40px;
                    .selector-item {
                        color: #CF6A35;
                        border: 2px solid #CF6A35;
                        height: 50px;
                        width: 215px;
                        text-transform: uppercase;
                        text-align: center;
                        font-family: 'Montserrat';
                        font-size: 18px;
                        line-height: 50px;
                        font-weight: 600;
                    }
                    .selector-item.default-option {
                        background: #CF6A35;
                        color: #fff;
                    }
                    .selector-item:hover {
                        background: #CF6A35!important;
                        color: #fff!important;
                    }
                }
                .selector-wrapper:hover {
                    .selector-item.default-option {
                        color: #CF6A35;
                        background: none;
                    }
                }

                .description {
                    display: flex;
                    flex-direction: column;
                    width: 70%;
                    margin: auto;
                    .item {
                        color: #336268;
                        margin-bottom: 30px;
                        display: flex;
                        flex-direction: column;
                        .title {
                            font-family: 'Montserrat';
                            font-size: 18px;
                            line-height: 27px;
                            font-weight: 600;
                            text-align: center;
                            color: #336268;
                            text-transform: uppercase;
                            margin-bottom: 10px;
                        }
                        .text {
                            font-family: 'Montserrat';
                            font-size: 18px;
                            line-height: 27px;
                            font-weight: 500;
                            text-align: center;
                            color: #336268;
                            text-transform: none;
                        }
                    }
                }
            }
        }
    }

    .sign-up-block {
        background: #FEF3E3;
        .container {
            display: flex;
            flex-direction: column;
            align-self: center;
            padding: 80px;

            .title {
                font-family: 'gabrielaregular';
                font-size: 36px;
                line-height: 60px;
                font-weight: 700;
                color: #336268;
                margin: 0 auto;
                text-align: center;
            }
            .sub-title {
                font-family: 'Montserrat';
                font-size: 22px;
                line-height: 55px;
                font-weight: 500;
                text-align: center;
                color: #336268;
            }
            .subscribe-form {
                display: flex;
                flex-direction: row;
                column-gap: 10px;
                justify-content: center;
                .email {
                    color: #336268;
                    font-family: 'Montserrat';
                    font-size: 16px;
                    line-height: 60px;
                    font-weight: 500;

                    border: 1px solid #336268;
                    width: 380px;
                    height: 55px;

                    background: #FEF3E3;
                    padding-left: 15px;
                }
                .email::placeholder,
                .email::-webkit-input-placeholder {
                    color: #336268;
                    font-family: 'Montserrat';
                    font-size: 16px;
                    line-height: 60px;
                    font-weight: 500;
                }
                #footer-subscribe {
                    width: 380px;
                    height: 55px;
                    background: #336268;
                    border: 1px solid #336268;
                    color: #fff;
                    font-family: 'Montserrat';
                    font-size: 20px;
                    line-height: 55px;
                    font-weight: 700;
                }
            }
        }
    }
}

.choose-your-skin-type {
    .block-2 {
        .container {
            padding-top: 50px;
            .text-description-top {
                padding-bottom: 50px;
                .item {
                    margin-bottom: 0!important;
                }
            }
            .selector {
                .selector-wrapper {
                    width: 100%!important;
                }
            }
        }
    }
}

.container.reduced {
    padding: 50px 0 30px 0!important;
    .selector-wrapper {
        margin-bottom: 0!important;
    }
}

@media (max-width:767px) {
    .selector-wrapper {
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 10px;
        row-gap: 10px;
        width: calc( 100% - 50px )!important;
        margin-bottom: 30px;
        .selector-item {
            font-size: 14px;
            flex-basis: 47%;
            width: auto;
            padding: 0 5px;
        }
    }
    .choose-your-skin-type {
        .hero {
            height: 350px;
            padding-top: 0;
            .container {
                position: relative;
                height: 100%;
                background-size: cover;
                .title {
                    left: auto;
                    right: 20px;
                    margin: auto;
                    width: 50%;
                    top: 30%;
                    font-size: 26px;
                    line-height: 32px;
                    position: absolute;
                    h1 {
                        color: #336268;
                    }
                }


            }
        }

        .block-2 {
            .container {
                padding: 40px 25px;
                .selector {
                    .title {
                        font-size: 20px;
                        line-height: 18px;
                        margin-bottom: 20px;
                    }
                    
                    .description {
                        width: 100%;
                        .item {
                            .title {
                                font-size: 18px;
                                line-height: 20px;
                            }
                            .text {
                                font-size: 18px;
                                line-height: 27px;
                            }
                        }
                        .item:last-of-type {
                            margin-bottom: 10px;
                        }
                    }
                }
            }
        }

        .sign-up-block {
            .container {
                padding: 40px 25px 60px;
                .title {
                    font-size: 22px;
                    line-height: 60px;
                }
                .sub-title {
                    font-size: 16px;
                    line-height: 20px;
                    margin-bottom: 30px;
                }

                .subscribe-form {
                    .email {
                        box-sizing: border-box;
                        min-width: 0;
                    }
                    .button {
                        font-size: 18px;
                        padding: 0;
                        min-width: 120px;
                        width: auto!important;
                    }
                }
            }

        }
    }
}