
body{position:relative; font: 18px/28px 'Nunito-Regular'; height: 100%; min-width: 320px; color: #000}
#container{background:#fff; position:relative; min-height: 100%;}
#main-wrapper{padding-bottom: 120px;}
#header{position:relative; z-index: 100}
#content{position:relative;}
#footer{clear:both; height:120px; position: absolute; left: 0; bottom: 0; width: 100%;
background: #757654; z-index: 10}
#overlay{background: #333; opacity: 0.7; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%;
display: none;}
div.inner{max-width: 1600px; margin: 0 auto; position: relative;}

#logo{display: block; width: 260px;}
#logo img{display: block; width: 100%;}
#mobile-menu-button{background: url(../images/menu.svg) center no-repeat; width: 40px; height: 40px; cursor: pointer;
margin-left: 20px; display: none;}
#mobile-menu{background: #757654; width: 370px; height: 100%; position: fixed; top: 0; left: 0; z-index: 10000; display: none;}
#mobile-menu div.top{padding: 63px 23px 35px 23px; background: #fff; display: flex; gap: 18px; flex-direction: column;
height: auto !important; font-size: 16px; display: flex !important;}
#mobile-menu div.top > div{display: none;}
#mobile-menu div.top > div.active{display: flex; flex-direction: column;}
#mobile-menu div.top > div > *{margin-bottom: 17px}
#mobile-menu div.top .whatsapp{background-size: 16px 16px !important; padding-left: 23px !important;
margin-bottom: 0}
#mobile-menu div.top span.phones a:first-child:after{content: ';'; margin-right: 5px}
#mobile-menu div.bottom{padding: 32px 23px 30px 23px;}
#mobile-menu div.bottom ul{margin-bottom: 30px}
#mobile-menu li{margin-bottom: 9px;}
#mobile-menu li a{color: #fff}
#mobile-menu div.social-networks{margin-bottom: 35px; display: flex !important;}
#mobile-menu div.bottom > p{font-size: 13px; line-height: 28px; color: #d8e7bc}
#mobile-menu div.bottom > p a{color: #d8e7bc}
span.mobile-menu-close{width: 25px; height: 25px; position: absolute; right: 18px; top: 18px; cursor: pointer;
background: url(../images/close.svg) center no-repeat; background-size: contain;}

#header div.top{height: 80px}
#header div.top a{color: #000}
#header div.top div.inner{display: flex; align-items: center; justify-content: space-between; height: 100%;
font-size: 16px}
#header div.top .address{padding-left: 20px; background: url(../images/pin.svg) center left no-repeat; position: relative;}
#header div.top .address > span{padding-right: 16px; background: url(../images/arrow.svg) center right no-repeat;
cursor: pointer;}
#header div.top .address ul{position: absolute; z-index: 0; background: #fff; width: 350px; left: -10px; padding: 15px 10px 15px 10px;
transition: all 0.6s ease; top: -100px; visibility: hidden; opacity: 0}
#header div.top .address li{cursor: pointer; padding-left: 20px; background: url(../images/pin.svg) center left no-repeat;
transition: all 0.3s ease;}
#header div.top .address li:hover{color: #757654; background-position-y: 2px}
#header div.top .address > span:hover{color: #757654;}
#header div.top .address:hover ul{top: 30px; visibility: visible; z-index: 10; opacity: 1}
#header div.top .time{padding-left: 23px; background: url(../images/clock.svg) center left no-repeat;}
#header div.top .phones{padding-left: 20px; background: url(../images/telephone.svg) center left no-repeat;}
#header div.top .whatsapp{padding-left: 30px; background: url(../images/wa.svg) center left no-repeat;}
#header div.top div.inner > *{transition: all 0.3s ease;}
#header div.top div.inner > span.time:hover, #header div.top div.inner > span.phones:hover{background-position-y: 2px}
#header div.top div.inner > a.whatsapp:hover{background-position-y: 0px}
#header div.top div.inner > span.time:hover, #header div.top div.inner a:hover{color: #757654}
#header div.bottom{height: 80px; background: #757654;}
#header div.bottom div.inner{display: flex; align-items: center; justify-content: space-between; height: 100%}
#header ul.main-menu{display: flex; justify-content: center; gap: 35px; margin-left: -6%}
#header ul.main-menu li{}
#header ul.main-menu li a{color: #fff; font: 16px/22px 'Nunito-Regular'; transition: all 0.3s ease;}
#header ul.main-menu li a:hover{color: #d8e7bc}

#container.index{background: #0c150e;}
#main-wrapper.index{padding-bottom: 0px;}
#main-wrapper.index #header > div.top, #main-wrapper.index #header > div.top a{color: #fff}
#main-wrapper.index #header > div.top .address{background-image: url(../images/pin-light.svg);}
#main-wrapper.index #header > div.top .time{background-image: url(../images/clock-light.svg);}
#main-wrapper.index #header > div.top .phones{background-image: url(../images/telephone-light.svg);}
#main-wrapper.index #header > div.top .whatsapp{background-image: url(../images/wa-light.svg);}
#main-wrapper.index #header div.top .address > span:hover, #main-wrapper.index #header div.top div.inner > span.time:hover, 
#main-wrapper.index #header div.top div.inner a:hover{color: #d8e7bc;}
#main-wrapper.index #header div.top .address li{color: #757654;}
#main-wrapper.index #footer{background: none; position: relative; margin-top: -90px; height: 90px;}
#main-wrapper.index #footer div.inner{padding: 15px 0 0 0;}

#index-banner-slider{background: #ccc; position: relative; z-index: 10;
margin: -160px 0 0 0; width: auto !important; overflow: hidden;}
#index-banner-slider div.banner-text{width: 510px !important; top: 350px; left: 20%}
#index-banner-slider div.banner-text div.clever{font: 22px/30px 'Nunito-Bold'; color: #d8e7bc; margin-bottom: 23px !important}
#index-banner-slider div.banner-text div.main{color: #fff; font: 72px/80px 'Montserrat-Bold'; margin-bottom: 25px !important}
#index-banner-slider div.banner-text div.text{font-size: 18px !important}
#index-banner-slider div.banner-text div.text p{color: #fff; margin-bottom: 35px !important}
#index-banner-slider div.banner-text div.text a{background: #fee0bc; display: inline-block; padding: 11px 47px !important;
color: #000; border-radius: 25px;  position: relative; overflow: hidden;}
#index-banner-slider .hvr-shutter-out-vertical:before{background: #757654}
#index-banner-slider a.hvr-shutter-out-vertical:hover{color: #fff !important;}

#index-banner-slider .kr-bullet{width: 12px; height: 12px; border: 2px solid #fff; border-radius: 6px; margin: 4px !important;
background: transparent; background-image: none !important;}
#index-banner-slider .kr-bullet.kr-activated{background: #fff}

#header div.social-networks{display: flex;}
#header div.social-networks a{width: 40px; height: 40px; margin: 0 30px 0 0}
#header div.social-networks a:last-child{margin-right: 0}
#header div.social-networks a.instagram{background: url(../images/instagram.svg) no-repeat center;}
#header div.social-networks a.vk{background: url(../images/vk.svg) no-repeat center;}
#header div.social-networks a.youtube{background: url(../images/youtube.svg) no-repeat center;}

#content.default{background: url(../images/hearts.svg) no-repeat top 100px left 10%; min-height: 300px;}
#content.default div.inner{max-width: 1090px; margin: 0 auto;}
#content.service-details.fixed{padding-top: 70px}
h1{font: 70px/70px 'Montserrat-Bold'; margin-bottom: 40px}
div.breadcrumbs{margin-bottom: 30px; font-size: 13px; line-height: 28px; padding: 25px 0 0 0;}
div.breadcrumbs a{color: #6b6b6b;}
div.breadcrumbs a:after{content: "/"; margin: 0 5px}
div.breadcrumbs.mobile{display: none; margin: 0 15px 18px 15px;}

#map{height: 510px; background: #ccc; margin-bottom: 100px; z-index: 1; position: relative;}

#map-contacts{width: 415px; padding: 45px 35px 50px 45px; background: #757654; border-radius: 50px;
color: #fff; border-top-left-radius: 0; display: flex; flex-direction: column;
font-size: 16px; z-index: 100; position: absolute; left: 7%; top: 420px}

#map-contacts div.header{font: 22px/28px 'Nunito-Regular'; color: #d8e7bc; margin-bottom: 20px}
#map-contacts a{color: #fff; transition: all 0.3s ease;}
#map-contacts a:hover{color: #d8e7bc}
#map-contacts > div > span, #map-contacts > div > a{padding-left: 38px; background-repeat: no-repeat;
background-position: left 0 top 3px; background-size: 22px 22px; transition: all 0.3s ease}
#map-contacts .address{background-image: url(../images/pin-light.svg);}
#map-contacts .time{background-image: url(../images/clock-light.svg);}
#map-contacts .phones{background-image: url(../images/telephone-light.svg); display: flex;
flex-direction: column; gap: 10px}
#map-contacts .whatsapp{background-image: url(../images/wa-light.svg);}
#map-contacts > div > *:hover{background-position-y: 0px}
#map-contacts ul.locations{margin-bottom: 20px}
#map-contacts div[id^='contact-tab-']{display: none;}
#map-contacts div[id^='contact-tab-'].active{display: flex; flex-direction: column; gap: 17px}

#licences{font: 22px/28px 'Nunito-Regular'; margin-bottom: 50px; color: #757654}
#licences span{color: #000;}
div.licence-gallery{width: 100%; display: flex; justify-content: space-evenly; margin-bottom: 100px}
div.licence-gallery a{}
div.licence-gallery a img{display: block; max-width: 100%}

div.services-menu-wrapper{width: 100%; z-index: 10; border-bottom: 1px solid #757654;}
div.services-menu-wrapper.fixed{position: fixed; top: 0; left: 0}
ul.services-menu{display: flex; height: 70px; align-items: center; max-width: 1600px; margin: 0 auto;}
ul.services-menu.main{border-bottom: 1px solid #757654;}
ul.services-menu li{margin-left: 40px; height: 75px}
ul.services-menu li:first-child{margin: 0}
ul.services-menu li.active{background: url(../images/active-tab.svg) bottom center no-repeat;}
ul.services-menu li a{color: #000; font: 18px 'Nunito-Bold'; height: 100%; display: flex; align-items: center;
transition: all 0.5s ease;}
ul.services-menu li a:hover{color: #757654}
ul.services-menu li.active a{color: #757654}

div.services{display: flex; justify-content: space-between; flex-wrap: wrap;
background: url(../images/hearts.svg) no-repeat bottom 140px right 140px;}
div.services > a{position: relative; width: 47.8%; background: #faf0cd; margin-bottom: 105px}
div.services > a > img{display: block; max-width: 100%}
div.services > a > span{position: absolute; width: 500px; height: 180px; background: #757654;
color: #fff; bottom: -45px; left: 70px; font: 35px/40px 'Montserrat-Bold'; padding: 50px 40px 20px 40px;
transition: all 0.5s ease;}
div.services > a > span:hover{color: #d8e7bc;}
div.services > a > span span{font: 18px/28px 'Nunito-Regular'; color: #d8e7bc; display: block;
padding: 15px 0 0 40px}
div.services.salons > a{background: none}

div.section{padding: 120px 0}
div.section div.inner{max-width: 1100px; margin: 0 auto;}
div.section-header{font: 44px/50px 'Montserrat-Bold'; color: #757654; margin-bottom: 30px}
div.section-header.with-buttons{display: flex; justify-content: space-between}
div.section-header span{color: #000}
div.section.prices, div.section.gallery{background: #fff}

div.service-top{display: flex; justify-content: space-between;}
div.service-top div.inner{}
div.service-top h1{margin-bottom: 15px}
div.service-top div.subheader{font: 22px/30px 'Nunito-Bold'; margin-bottom: 15px; color: #757654}
div.service-top div.left{width: 640px; margin: 0 50px 80px 0; position: relative; left: -100%}
div.service-top > img{display: block; margin: -83px 0 0 0; max-width: 50%; opacity: 0; z-index: 5;
flex-shrink: 0}
div.service-top ul.submenu{display: flex; position: absolute; bottom: -35px}
div.service-top ul.submenu li{margin-right: 26px; font: 16px/22px 'Nunito-Regular'}
div.service-top ul.submenu a{color: #000; border-bottom: 0.5px solid #000; transition: all 0.3s ease;}
div.service-top ul.submenu a:hover{border-bottom: 0; color: #757654;}
div.service-top div.available{padding: 10px 0 0 0; margin-bottom: 20px}
div.service-top div.available div.title{color: #757654; font-size: 16px; line-height: 22px; font-weight: 700;
margin-bottom: 10px}
div.service-top div.available ul{display: flex; font-size: 16px; line-height: 22px}
div.service-top div.available li{padding-left: 20px; background: url(../images/pin.svg) center left no-repeat;
margin-right: 27px}
div.service-top div.available li:last-child{margin: 0}

div.price-list{border-top: 1px solid #d9d9d9; font: 18px 'Nunito-Bold'; margin-bottom: 25px}
div.price-list > div{border-bottom: 1px solid #d9d9d9;}
div.price-list div.section-name{padding: 28px 30px 28px 0; color: #757654; cursor: pointer;
background: url(../images/arrow-closed.svg) right 30px center no-repeat; transition: all 0.3s ease;}
div.price-list div.section-name:hover{color: #000}

div.price-list div.section-name.open{background-image: url(../images/arrow-opened.svg)}
div.price-list div.section-prices{display: none;}
div.price-list div.section-prices > div{display: flex; justify-content: space-between; gap: 30px;
border-bottom: 1px solid #d9d9d9; padding: 28px 30px 28px 0}
div.price-list div.section-prices > div:last-child{border: 0}
div.small-text{color: #6b6b6b; font-size: 13px; line-height: 18px}

div.carousel{height: 820px; margin-left: calc(50% - 550px - 75px); position: relative;}
div.carousel div.item{width: 518px}
div.carousel img{display: block; max-width: 100%; border-radius: 50px; border-top-left-radius: 0;
margin-bottom: 25px}
div.carousel > div > div{margin-right: 4.7%}
div.carousel div.name{font: 18px 'Nunito-Bold'; margin-bottom: 15px}
div.carousel ul.salons{font-size: 16px; line-height: 22px; margin-top: 16px; display: flex;}
div.carousel ul.salons li{padding-left: 20px; background: url(../images/pin.svg) top 5px left no-repeat; margin-right: 23px}
div.carousel ul.salons li:last-child{margin: 0}
div.swiper-navigation{position: relative; display: flex; width: 90px; height: 40px; justify-content: space-between;
position: relative; bottom: -3px}
div.swiper-navigation > div{position: relative; width: 40px; height: 40px; cursor: pointer;}
div.swiper-prev{background: url(../images/prev-light.svg) center no-repeat;
background-size: contain;}
div.swiper-next{background: url(../images/next-light.svg) center no-repeat;
background-size: contain;}
.swiper-button-prev::after, .swiper-rtl .swiper-button-next::after{content: none !important;}

div.section.workers{background: url(../images/hearts.svg) no-repeat top 200px left 12%;
overflow: hidden; padding-bottom: 100px}
div.section.workers.in-salon{background-color: #faf0cd;}
div.section.workers div.carousel{margin-left: calc((100% - 1100px) / 2);}

div.section.gallery{padding-bottom: 100px}
div.gallery div.carousel{height: 690px; margin-left: calc((100% - 1100px) / 2);}
div.gallery div.carousel div.item{height: 690px;}
div.gallery div.carousel div.item img{margin: 0}

div.reviews-list{}
div.reviews-list > div{display: flex; justify-content: space-between; align-items: flex-start; display: none;
background: url(../images/testimonial.svg) no-repeat top 12px left 23%; margin-bottom: 50px}
div.reviews-list > div:first-child{display: flex;}
div.reviews-list div img{border-radius: 50%}
div.reviews-list > div > div{width: calc(100% - 228px - 5.1%); padding-top: 25px}
div.reviews-list div div.name{font: 18px 'Nunito-Bold'; margin-bottom: 15px}
div.reviews-list div div.text{margin-bottom: 15px}
div.reviews-list div span.source{font-size: 16px; line-height: 22px}
div.reviews-list div a{color: #757654; border-bottom: 0.5px solid #6b6b6b; font-size: 16px; line-height: 22px}
div.reviews-list div span.salon{margin-right: 40px; font-size: 16px; line-height: 22px}
div.reviews-list div span.salon span{padding-left: 20px; background: url(../images/pin.svg) top 3px left no-repeat;
margin-left: 5px}
#more-reviews{height: 57px; border: 1px solid #6b6b6b; border-radius: 28px; display: flex;
justify-content: center; align-items: center; cursor: pointer;}
#more-reviews.hvr-reveal::before{border-radius: 28px; border-color: #6b6b6b;}
#more-reviews.hvr-reveal::hover::before{border-width: 2px !important;}

div.salon-top{display: flex; margin-bottom: 120px; align-items: flex-start;}
div.salon-top div.gallery{width: 50%; overflow: hidden; position: relative; border-bottom-right-radius: 60px;}
div.salon-top div.gallery .swiper-pagination{bottom: 35px}
div.salon-top div.gallery div.swiper-slide img{display: block;}
div.salon-top div.gallery .swiper-pagination span{border: 2px solid #fff; opacity: 1; background: transparent;}
div.salon-top div.gallery .swiper-pagination span.swiper-pagination-bullet-active{background: #fff}
div.salon-top div.content{width: 50%; padding: 0 14% 0 3%; background: url(../images/hearts.svg) right 220px bottom no-repeat;}
div.salon-top div.content a.other-salon{display: inline-block; padding: 11px 40px 11px 19px; border-radius: 40px; 
background: #faf0cd url(../images/arrow-closed.svg) right 19px center no-repeat; margin-bottom: 30px; color: #757654; 
font-size: 16px; background-size: 9px 9px; overflow: hidden;}
div.salon-top div.content a.other-salon.hvr-shutter-out-vertical:before{background-color: #757654}
div.salon-top div.content a.other-salon.hvr-shutter-out-vertical:hover{color: #fff !important;}
div.salon-top div.content div.breadcrumbs{margin-bottom: 20px}
div.salon-top div.content h1{font: 70px/70px 'Montserrat-Bold'; margin-bottom: 30px}
div.salon-top div.content h1 span{color: #757654}
div.salon-top div.content > p{margin-bottom: 25px}
div.salon-top #map-contacts{position: relative; top: auto; left: -19%;}

div.salon-services{padding: 120px 0; margin-bottom: 120px; background: url(../images/services-back.svg)}
div.salon-services > div.inner{max-width: 1050px; display: flex; flex-wrap: wrap; justify-content: space-between}
div.salon-services > div.inner div.section-header{width: 100%}
div.salon-services > div.inner > p{width: 46%}
div.salon-services > div.inner > div.right{width: 46%}
div.salon-services > div.inner > div.right ul{display: grid; grid-template-columns: 1fr 1fr}
div.salon-services > div.inner > div.right li{margin-bottom: 14px; background: url(../images/bullet.svg) left no-repeat;
padding-left: 25px}
div.salon-services > div.inner > div.right li a{color: #000; transition: all 0.3s ease;}
div.salon-services > div.inner > div.right li a:hover{color: #757654;}

div.salon-block{margin-bottom: 120px}
div.salon-block div.inner{display: flex;}
div.salon-block div.inner div.text{width: 60%}
div.salon-block div.inner div.images{width: 40%}
div.salon-block.first div.inner div.text{padding: 60px 7% 0 17%}
div.salon-block.second div.inner div.text{padding: 60px 19% 0 6.3%}

div.salon-block div.inner div.images{position: relative; flex-shrink: 0}
div.salon-block div.inner div.images img{display: block; max-width: 100%}
div.salon-block.first div.inner div.images img:first-child{border-top-left-radius: 60px;}
div.salon-block.first div.inner div.images img:last-child{position: absolute; z-index: 3; bottom: 30px; left: -65%;
border-top-left-radius: 60px; border-bottom-right-radius: 60px}
div.salon-block div.inner div.text p:first-child{margin-bottom: 20px; color: #757654}
div.salon-block div.inner div.text h2{font: 50px/56px 'Montserrat-Bold'; margin-bottom: 30px}
div.salon-block div.inner div.text h2 span{color: #757654}
div.salon-block div.inner div.text ul{margin-bottom: 30px}
div.salon-block div.inner div.text ul li{margin-bottom: 14px; background: url(../images/bullet.svg) left no-repeat;
padding-left: 25px}
div.salon-block div.inner div.text a.link{display: inline-block; background: #fee0bc; padding: 11px 45px;
border-radius: 40px; color: #000; overflow: hidden;}
div.salon-block div.inner div.text a.link.hvr-shutter-out-vertical:before{background-color: #757654}
div.salon-block div.inner div.text a.link.hvr-shutter-out-vertical:hover{color: #fff !important;}
div.salon-block.second div.inner div.images img:first-child{border-top-right-radius: 60px;}
div.salon-block.second div.inner div.images img:last-child{position: absolute; z-index: 3; bottom: 30px; right: -65%;
border-top-right-radius: 60px; border-bottom-left-radius: 60px}

ul.workers-services-menu{margin-bottom: 30px; display: flex;}
ul.workers-services-menu li{margin-right: 20px; font: 18px/30px 'Nunito-Bold'; cursor: pointer; transition: all 0.5s ease;}
ul.workers-services-menu li.active, ul.workers-services-menu li:hover{color: #757654}

div.section.sertificate{background: #fff url(../images/gift-back.jpg) center no-repeat; height: 754px}
div.section.sertificate div.data{max-width: 520px;}
div.section.sertificate div.editable{margin-bottom: 45px}
div.section a.more{background: #757654; display: inline-block; padding: 11px 47px !important;
color: #fff; border-radius: 25px;}
div.section a.more.hvr-shutter-out-vertical:before{background: #fee0bc; border-radius: 25px}
div.section a.more.hvr-shutter-out-vertical:hover{color: #000}

div.section.contacts{background: #757654; padding-bottom: 50px}
div.section.contacts div.section-header{color: #fff}
div.section.contacts div.data{display: flex; flex-wrap: wrap; padding-top: 10px}
div.section.contacts div.data > *{width: 50%; margin-bottom: 25px}
div.section.contacts a{color: #000}
div.section.contacts div.data > span, div.section.contacts div.data > a{padding-left: 45px; 
background-repeat: no-repeat; background-position: left 0 top 3px; background-size: 22px 22px}
div.section.contacts .address{background-image: url(../images/pin-light.svg);}
div.section.contacts .address a{color: #d8e7bc; border-bottom: 0.5px solid #d8e7bc;}
div.section.contacts .time{background-image: url(../images/clock-light.svg);}
div.section.contacts .phones{background-image: url(../images/telephone-light.svg); display: flex;
flex-direction: column; gap: 10px}
div.section.contacts .whatsapp{background-image: url(../images/wa-light.svg);}

ul.locations{display: flex; margin-bottom: 40px; align-items: flex-start;}
ul.locations li{margin-right: 30px; cursor: pointer; font: 18px/30px 'Nunito-Bold';
color: #fff; padding: 0 10px 15px 10px}
ul.locations li:last-child{margin: 0}
ul.locations li.active{background: url(../images/active-tab-white.svg) bottom center no-repeat;}
#header div.top ul.locations{margin-bottom: 0}
#header div.top ul.locations li{color: #757654}
#header div.top ul.locations li.active{background: url(../images/active-tab.svg) bottom center no-repeat;}

#footer div.inner{display: flex; justify-content: space-between; padding: 25px 0 0 0;}
#footer p.copyright{color: #fff; margin-bottom: 5px}
#footer p.small{color: #d8e7bc; font-size: 13px; line-height: 28px;}
#footer a{color: #d8e7bc}
#scroll-up-button{width: 40px; height: 40px; position: fixed; bottom: 110px; right: 4.5%;
background: url(../images/up.svg) no-repeat; cursor: pointer; z-index: 10; display: none;}

