

/* Start:/local/templates/.default/components/lh/iblock.complex.sections/services.salons/style.css?17562971563539*/
.complex-sections-services-salons {
    display: block;
}

.complex-sections-services-salons-section-banner {
    display: block;
    margin-bottom: 30px;
}

.complex-sections-services-salons-section-banner-picture {
    width: 100%;
    height: calc(90vh - 74px);
}

.complex-sections-services-salons-section-banner-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.complex-sections-services-salons-section-banner-info {
    position: relative;
    max-width: 50%;
    min-height: 105px;
    margin-top: -105px;
    padding: 30px 40px 0;
    background-color: #f7f6f2;
    z-index: 1;
}

.complex-sections-services-salons-section-banner-name {
    margin-bottom: 30px;
    padding-top: 4px;
    font-family: PT Sans Narrow, sans-serif;
    font-weight: 600;
    font-size: 34px;
    line-height: 34px;
    letter-spacing: .5px;
    color: #4c4c4c;
}

.complex-sections-services-salons-section-banner-desc {
    margin-bottom: 15px;
    font-family: Roboto, sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 18px;
    color: #4c4c4c;
}

.complex-sections-services-salons-items-container {
    display: block;
    margin: 50px 20px;
}

.complex-sections-services-salons-items {
    display: flex;
    align-items: stretch;
    justify-content: start;
    flex-wrap: wrap;
}

.complex-sections-services-salons-item {
    width: 33.33%;
    padding: 40px;
}

.complex-sections-services-salons-item-content {
    font-size: 0;
    line-height: 0;
    text-decoration: none;
}

.complex-sections-services-salons-item-picture {
    width: 100%;
    aspect-ratio: 1 / 0.75
}

.complex-sections-services-salons-item-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.complex-sections-services-salons-item-info {
    position: relative;
    width: 90%;
    margin-top: -50px;
    padding: 12px 10% 0 0;
    background-color: #f7f6f2;
    z-index: 1;
}

.complex-sections-services-salons-item-name {
    margin-bottom: 10px;
    font-family: Roboto, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 26px;
    color: #4c4c4c;
}

.complex-sections-services-salons-item-desc {
    font-family: PT Sans Narrow, sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 20px;
    color: #4c4c4c;
}

.complex-sections-services-salons-item-link {
    display: inline-block;
    font-family: Roboto, sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 25px;
    color: #4c4c4c;
    text-decoration: underline;
}

@media (max-width: 1024px) {
    .complex-sections-services-salons-section-banner-picture {
        height: calc(80vh - 42px);
    }

    .complex-sections-services-salons-section-banner-info {
        max-width: 66.66%;
    }
}

@media (max-width: 768px) {
    .complex-sections-services-salons-section-banner-info {
        max-width: 91.66%;
        padding: 20px 20px 0;
    }

    .complex-sections-services-salons-section-banner-name {
        margin-bottom: 10px;
        padding-top: 0;
        font-size: 22px;
        line-height: 22px;
    }

    .complex-sections-services-salons-section-banner-desc {
        margin-bottom: 15px;
        font-family: Roboto, sans-serif;
        font-weight: 300;
        font-size: 16px;
        line-height: 18px;
        color: #4c4c4c;
    }

    .complex-sections-services-salons-item {
        width: 50%;
        padding: 25px;
    }
}

@media (max-width: 550px) {
    .complex-sections-services-salons-item {
        width: 100%;
        padding: 20px;
    }
}
/* End */


/* Start:/local/templates/.default/components/lh/iblock.complex.elements/services.salons-nd/style.css?176198878319272*/
.complex-elements-services-salons {
    display: block;
}

.complex-elements-services-salons-items {
    display: block;
}

.complex-elements-services-salons-item {
    display: flex;
    align-items: stretch;
    justify-content: start;
    flex-wrap: wrap;
    padding-top: 35px;
    padding-bottom: 35px;
}

.complex-elements-services-salons-item:nth-child(odd) {
    padding-left: 35px;
}

.complex-elements-services-salons-item:nth-child(even) {
    flex-direction: row-reverse;
    padding-right: 35px;
}

.complex-elements-services-salons-item-content {
    width: 50%;
    padding: 0 20px 20px 20px;
}

.complex-elements-services-salons-item-picture {
    width: 50%;
    aspect-ratio: 1 / 0.56;
}

.complex-elements-services-salons-item-picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.complex-elements-services-salons-item-name {
    margin-bottom: 35px;
    padding-top: 4px;
    font-family: "PT Sans Narrow", sans-serif;
    font-size: 35px;
    font-weight: 700;
    line-height: 53px;
    color: #333333;
}

.complex-elements-services-salons-item:nth-child(even) .complex-elements-services-salons-item-name {
    text-align: right;
}

.complex-elements-services-salons-item-desc {
    margin-bottom: 50px;
    font-size: 16px;
    font-weight: 300;
    line-height: 26px;
    color: #7f7977;
    text-align: justify;
}

.complex-elements-services-salons-item-properties {

}

.complex-elements-services-salons-item-property {
    display: flex;
    align-items: start;
    justify-content: start;
    flex-wrap: wrap;
    margin-bottom: 45px;
}

.complex-elements-services-salons-item-property-icon {
    width: 25%;
    text-align: center;
}

.complex-elements-services-salons-item-property-icon i {
    font-size: 32px;
    line-height: 1;
}

.complex-elements-services-salons-item-property-info {
    width: 75%;
}

.complex-elements-services-salons-item-property-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 21px;
    color: #7f7977;
    text-transform: uppercase;
}

.complex-elements-services-salons-item-property-value {
    font-size: 16px;
    font-weight: 300;
    line-height: 21px;
    color: #7f7977;
}

.complex-elements-services-salons-item-show-on-map {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 12px;
    font-family: PT Sans Narrow, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;
    color: #fffefc;
    text-transform: uppercase;
    letter-spacing: .05em;
    background-color: #4c4c4c;
    transition: all .4s;
    cursor: pointer;
}

.complex-elements-services-salons-item-show-on-map:hover {
    background-color: #707070;
}

.complex-elements-services-salons-map-wrapper {
    width: 728px;
    height: 580px;
}

.complex-elements-services-salons-map-container {
    width: 100%;
    height: 100%;
}

@media (max-width: 1024px) {
    .complex-elements-services-salons-item-content {
        width: 100%;
    }

    .complex-elements-services-salons-item-picture {
        width: 100%;
    }

    .complex-elements-services-salons-item:nth-child(odd),
    .complex-elements-services-salons-item:nth-child(even) {
        padding: 25px;
    }

    .complex-elements-services-salons-item:nth-child(even) .complex-elements-services-salons-item-name {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .complex-elements-services-salons-item-content {
        padding: 0;
        text-align: center;
    }

    .complex-elements-services-salons-item-name,
    .complex-elements-services-salons-item:nth-child(even) .complex-elements-services-salons-item-name {
        margin-bottom: 15px;
        font-size: 20px;
        line-height: 30px;
        text-align: center;
    }

    .complex-elements-services-salons-item-property-icon {
        width: 100%;
    }

    .complex-elements-services-salons-item-property-info {
        width: 100%;
        text-align: center;
    }

    .complex-elements-services-salons-map-wrapper {
        width: 100%;
        height: 450px;
    }
}

@media (max-width: 550px) {
    .complex-elements-services-salons-item:nth-child(even) {
        flex-direction: column-reverse;
    }

    .complex-elements-services-salons-item:nth-child(odd),
    .complex-elements-services-salons-item:nth-child(even) {
        padding: 15px;
    }
}

/*new style */
.mob_icon {
    display: none;
}
.gray-block {
    background: #F9F9F9;
}
.n_margin .complex-sections-services-salons-items-container {
    margin: 0;
   
}
.complex-elements-services-salons-nd {
    font-family: "PT Sans Narrow";
    font-style: normal;
    color: #000;
    font-size: 21px;
    font-weight: 400;
    background: #fff;
    .complex-sections-services-salons-section-banner {
        margin-bottom: 0;
    }
    .complex-sections-services-salons-section-banner-picture{
        height: auto;
    }
    .complex-sections-services-salons-section-banner-picture img{
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 100%;
        
    }
    .complex-elements-services-salons-item-prev-info {
        padding: 9.87px 9.87px 21px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .salons-item-prev-info-title{
            font-size: 40px;
            font-weight: 700;
            line-height: 60px;
        }
        .complex-elements-services-salons-property-lasting{
            margin: 27px 0 36px;
        }
        .complex-elements-services-salons-property-value{
            display: flex;
            align-items: center;
            gap: 34px;
            font-size: 20px;
            font-weight: 700;
            .value{
                line-height: 25px;
            }
            svg{
                width: 27px;
                height: 27px;
            }
        }
        .complex-elements-services-salons-item-desc-text{
            font-size: 21px;
            line-height: 25.6px; /* 121.905% */
            text-align: center;
        }
    }
    .complex-elements-services-salons-item-ng-content{
        padding: 30px 0 50px;
        .utp__block-wrapper{
            display: flex;
            gap: 250px;
            justify-content: center;
            padding: 30px 0 10px;
            margin-bottom: 43px;
        }
        
        .utp__block--item{
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            font-size: 16px;
            line-height: 20px;
        }
    }
    h3{
        font-size: 30px;
        font-weight: 700;
        line-height: 45px; /* 150% */
        margin-bottom: 33px;
        text-align: center;
        color: #000;
    }
    .complex-elements-services-salons-item-effect-content{
        display: flex;
        gap: 30px;
        margin-bottom: 50px;
       
        .effect-content-item{
            flex: 1 1 0%;
            min-width: 0;
            width: calc(50% - 15px);
        }
        ul {
            list-style: none;
        }
        li {
            position: relative;
            margin-bottom: 20px;
        }
        li::before{
            content: "•";
             position: absolute;
             left: -25px;
             color: #000;
        }
        .effect-content-img {
           img{
             width: 100%;
             height: auto;
           }
        }
        .effect-content-text {
            display: flex;
            flex-direction: column;
            gap: 25px;
            padding: 24px 0;
            p{
                font-size: 24px;
                font-weight: 700;
                line-height: 36px; /* 150% */
                margin-bottom: 24px;
            }
            span{
                display: block;
                font-size: 12px;
                line-height: 13px;
            }
            li {
                padding-left: 15px;
            }
        }
    }
    .show-spa {
        display: flex;
        margin: 0 auto;
        width: max-content;
        text-transform: none;
        background-color: #000;
    }
    .complex-elements-services-salons-item-quote{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 32px 0;
        font-size: 25px;
        line-height: 32.5px; /* 130% */
        .quote-item {
            width: 29.7%;
            max-width: 570px;
            text-align: center;
            
        }
        .quote-value{
            position: relative;
            
        }
        .quote-value::before{
            content: '';
            position: absolute;
            left: calc(-135px + -97px);
            top: 0;
            background: url('/asset/img/forging-top.png');
            width: 135px;
            height: 125px;
            left: -40%;
            background-size: cover;
            background-repeat: no-repeat;
        }
        .quote-value::after{
            content: '';
            position: absolute;
            right: calc(-135px + -97px);
            bottom: 40px;
            background: url('/asset/img/forging-bottom.png');
            width: 135px;
            height: 125px;
            right: -40%;
            background-size: cover;
            background-repeat: no-repeat;
        }
    }
    .complex-elements-services-salons-item-care {
        display: flex;
        .care_text{
            display: flex;
            flex-direction: column;
            padding: 20px 30px;
            font-size: 16px;
            h3{
                margin-bottom: 20px;
            }
            .show-spa{
                margin-left: 0;
                margin-top: 50px;
            }
        }
        .care_item {
            width: 50%;
        }
        .care_img img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: right;
        }
    }
    .complex-elements-services-salons-item-steps {
        padding: 73px 77px 20px;
        h3{
            margin-bottom: 33px;
        }
        .slick-track {
            display: flex;
            justify-content: space-between;
        }
        .steps-slide{
            overflow: hidden;
            max-width: 480px;
        }
        .steps-slide__content {
            display: flex;
            flex-direction: column;
            align-items: center;
            .steps-slide__content-name{
                font-weight: 700;
                font-size: 20px;
                margin-bottom: 17px;
                line-height: 26px;
                text-transform: uppercase;
            }
            .steps-slide__content-text {
                text-align: center;
                font-size: 16px;
                line-height: 20px;
            }
            .steps-slide__content-img {
                margin-bottom: 37px;
            }
            .steps-slide__content-name{
                text-align: center;
            }
        }
    }
    .complex-elements-services-salons-item-dop-care{
        padding: 63px 90px;
        h3{
            margin-bottom: 33px;
        }
        .slick-track {
            display: flex;
            justify-content: space-between;
        }
        .dop-care-slide {
            display: flex;
            justify-content: center;
        }
        .dop-care-slide a{
            max-width: 355px;
            /*aspect-ratio: 1 / 1;*/
        }
        .dop-care-slide a:hover{
            color: #000;
        }
        .dop-care__content {
            display: flex;
            flex-direction: column;
            align-items: center;
            .dop-care__content-name{
                font-weight: 700;
                font-size: 20px;
                margin-bottom: 8.7px;
                line-height: 24px;
                text-transform: uppercase;
                text-align: center;
            }
            .dop-care__content-price {
                text-align: center;
                font-size: 16px;
                line-height: 25px;
                margin-top: 0;
                margin-bottom: 0;
            }
            .dop-care__content-img {
                width: 100%;
                height: 100%;
                /*max-width: 355px;
                max-height: 355px;
                aspect-ratio: 1 / 1;*/
                margin-bottom: 4.3px;
                /*width: 100%;*/
            }
            .dop-care__content-img img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }
        }
    }
    @media (max-width: 1400px){
        .complex-elements-services-salons-item-quote{
            .quote-item {
                width: 40%; 
            }
        }
    }
    @media (max-width: 921px){
        .complex-elements-services-salons-item-ng-content{
            .utp__block-wrapper{
                gap: initial;
                justify-content: space-around;
            }   
    }
    }
    @media (max-width: 768px){
        .complex-elements-services-salons-item-prev-info{
            padding: 22px 19px 29px;
            .salons-item-prev-info-title{
                line-height: 40px;
                text-align: center;
            }
            .complex-elements-services-salons-property-lasting{
                margin: 20px 0 32px;
            }
            .desc_icon{
                display: none;
            }
            .mob_icon{
                display: block;
            }
        }
        .complex-elements-services-salons-item-ng-content{
            .utp__block-wrapper{
                padding: 30px 0 10px;
                margin-bottom: 28px;
            }
        
            .utp__block--item{
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 30%;
                font-size: 15px;
                line-height: 19.5px;
                svg{
                    width: 24px;
                    height: 24px;
                }
                span{
                    text-align: center;
                    hyphens: auto;
                }
            }
        }
        .complex-elements-services-salons-item-effect-content{
            flex-direction: column-reverse;
            gap: 14px;
            margin-bottom: 50px;
            
            .effect-content-item{
                width: 100%;
            }
            .effect-content-img {
               img{
                 width: 100%;
                 height: auto;
                 padding: 0 60px 0 70px;
               }
            }
            .effect-content-text {
                align-items: center;
                gap: 25px;
                padding: 0 60px 14px 70px;
                p{
                    font-size: 24px;
                    font-weight: 700;
                    line-height: 36px; /* 150% */
                    margin-bottom: 24px;
                    text-align: center;
                }
                span{
                    font-size: 10px;
                    line-height: 13px;
                }
                li {
                    padding-left: 15px;
                }
            }
        }
        h3{
            font-size: 28px;
            margin-bottom: 20px;
        }
        .complex-elements-services-salons-item-effect h3{
            padding: 0 60px 0 70px;
        }
       
        .effect-content-text ul {
            font-size: 18px;
            line-height: 25.2px;
            padding-left: 10px;
        }
        .effect-content-text li{
             text-indent: 20px;
             margin-bottom: 16px;
        }
        .effect-content-text li::marker{
            margin-left: 20px;
        }
        .complex-elements-services-salons-item-quote{
            padding: 32px 15px;
            .quote-item {
                width: 73%;
                font-size: 22px;
                line-height: 28px;
            }
            .quote-value{
                padding-top: 30px;
            }
            .quote-author{
                margin-top: 30px;
                width: 56%;
            }
            .quote-value::before{
                width: 35px;
                height: 33px;
                left: -18%;
            }
            .quote-value::after{
                width: 35px;
                height: 33px; 
                right: -18%; 
                bottom: 57%;
            }
            
        }
        .complex-elements-services-salons-item-steps{
            padding: 73px 50px 20px;
            h3{
                font-size: 30px;
                margin-bottom: 30px;
            }
            .steps-slide__content-img{
                margin-bottom: 40px;
            }
            .steps-slide__content-img img{
                width: 195px;
                height: 35px;
            }
            /*может не нужно*/
            .slick-track {
                align-items: stretch;
            }
            .steps-slide {
                min-height: inherit;
                display: flex;
                height: auto;
                justify-content: center;
            }
            .steps-slide__content-text{
                display: flex;
                flex: 1;
                align-items: flex-end;
            }
             /*может не нужно*/
        } 
        .complex-elements-services-salons-item-dop-care {
                    padding: 36px 90px;
            h3{
                font-size: 30px;
                margin-bottom: 14px;
            }
            .dop-care__content {
                .dop-care__content-name {
                    margin-bottom: 5px;
                }
            }
            
            
        }
        .complex-elements-services-salons-item-care{
            h3{
                margin-left: auto;
                margin-bottom: 14px;
            }
            flex-direction: column;
            .care_item{
                width: 100%;
            }
            .descr {
                text-align: center;
            }
            .care_text{
                .show-spa {
                    margin-top: 40px;
                   margin-left: auto;
                }
            }
        }
        .complex-sections-services-salons-section-banner-picture{
           height: 202px;
        }
        .show-spa {

            margin-left: auto;
            width: 196px;
            text-align: center;
            font-size: 14px;
            padding: 7px 15px;
        }
    
}
    @media (max-width: 550px){
        .complex-elements-services-salons-item-dop-care {
            padding: 36px 50px;
            .dop-care__content {
                .dop-care__content-img {
                    width: 174px;
                    height: 174px;
                    img{
                        width: 100%;
                        height: 100%;
                        object-position: center;
                    }
                }
            }
        }
    }
    .slick-dots li button:before{
        opacity: 1;
        color: #D6D6D6;
    }
    .slick-dots li.slick-active button:before {
        opacity: 1;
        color: #869791;
    }
    .slick-dots li{
        margin: 0;
    }
}
/* End */
/* /local/templates/.default/components/lh/iblock.complex.sections/services.salons/style.css?17562971563539 */
/* /local/templates/.default/components/lh/iblock.complex.elements/services.salons-nd/style.css?176198878319272 */
