/*Test*/ #header {background-color: #F5F3F4;} .container {width:1680px; margin:0 auto;} .header-wrapper {padding: 20px 0; display: flex; justify-content: space-between; align-items: center;} .main-swither {display: flex;} .main-swither .single-btn {padding: 9px 22px; display: inline-block; border-radius: 9px 0px 0px 0px; border:1px solid #b6bbc1; transition: background-color .3s ease-in-out;} .main-swither .single-btn:last-child {border-radius: 0px 9px 0px 0px; margin-left: -1px;} .main-swither .single-btn:hover{background-color:#8C9E71; color:#ffff;} .main-swither .single-btn.active{background-color:#8C9E71; color:#ffff;} #header .main-menu-wrapper ul.main-menu{display: flex; justify-content: space-between;padding: 0; margin: 0; width: 100%; position: relative; } #header .main-menu-wrapper ul.main-menu > li {padding: 10px 0;} a.main-menu-link{text-transform: uppercase; color:#333333; display: inline-block; font-size: 18px; position: relative; z-index: 1; padding-right: 50px; transition: color .3s ease-in-out; text-transform: initial;} a.main-menu-link:hover {color: var(--second);} .sub-menu{padding: 10px; position: absolute; top: 40px; z-index: 5; min-width:150px; visibility: hidden; opacity: 0; transform: translateY(-10px); transition: transform .3s ease-in-out; text-align: left; background-color: #fff; box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.09); } .has-child > a:after{content : url(../img/v.png); display:inline-block; margin-left: 4px; position: relative; top:-3px;} .has-child:hover .sub-menu {visibility: visible; opacity: 1; transform: translateY(0px);} .sub-menu li {padding: 5px 10px;} .sub-menu li a {font-size: 14px; line-height: 1.2;} .sub-menu li a:hover{color: var(--second)} #header .call-back-wrapper {display: flex; flex-direction: column; align-items: center; justify-content: center;} #header .call-back-wrapper p {opacity: .7; margin-bottom: 0;} #header .call-back-wrapper a{font-size: 20px;line-height: 23px; font-weight: bold; transition: color .3s ease-in-out;} #header .call-back-wrapper a:hover{color: var(--second)} .phone-instagram-wrapper {display: flex; justify-content: flex-start; align-items: center;} .phone-instagram-wrapper a {display: inline-block; transition: background-color .3s ease-in-out;} .phone-instagram-wrapper a.phone {font-size: 18px; line-height: 1; padding-left: 24px; background-image: url(../img/header-phone.png); background-position: left center; background-repeat: no-repeat; margin-right: 40px; background-size: contain;} .phone-instagram-wrapper a.instagram {padding: 10px 25px; border: 1px solid #80807E; /*background-image: url(../img/instagram.png); */ background-position: 26px center; background-repeat: no-repeat; padding-left: 53px;} .phone-instagram-wrapper a.phone:hover{background-image: url(../img/header-phone-hover.png);} .phone-instagram-wrapper a.instagram:hover{background-image: url(../img/instagram-hover.png); background-color: var(--third); color:#ffffff;} /*---- Index page ----*/ #main-screen {display: flex; justify-content: space-between;} #main-screen .left-block, #main-screen .right-block {width: 50%; height: calc(100vh - 87px); display: flex; align-items: center; justify-content: center; background-position: center; background-repeat: no-repeat; background-size: cover; transition: filter .3s ease-in-out;} #main-screen .left-block, #main-screen .right-block {position: relative; z-index: 1;} #main-screen .left-block img, #main-screen .right-block img {display: block; position: absolute; z-index: 2; height: 100%; width: 100%; object-fit: cover; transition: filter .3s ease-in-out;} #main-screen .left-block a, #main-screen .right-block a {font-size: 64px; line-height: 1.2; text-align: center; color: #FFFFFF; font-family: 'Cormorant Garamond'; position: relative; z-index: 3; display: flex; align-items: center; height: 100%; width: 100%; justify-content: center;flex-direction: column;} #main-screen .left-block a p.title, #main-screen .right-block a p.title {margin-bottom: 0;line-height: 1;} #main-screen .left-block a p.desc, #main-screen .right-block a p.desc {font-size: 22px; text-transform: uppercase;} #main-screen .left-block:hover img, #main-screen .right-block:hover img{filter: brightness(65%); -webkit-filter: brightness(65%); -moz-filter: brightness(65%);} /*---- the FACE -----*/ #top-block {height: 595px; background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; align-items: center; } #top-block.face{background-image: url(../img/top-1.jpg);} #top-block.prowax{background-image: url(../img/top-2.jpg);} #top-block .top-block-txt .desc{width: 40%;} /*--- Pluses---*/ #pluses{padding:100px 0;} #pluses .pluses-wrapper {display: flex; justify-content: center; flex-wrap: wrap;} #pluses .pluses-wrapper .single-pluse{text-align: center; width: 14%; margin-right: 50px;} #pluses .pluses-wrapper .single-pluse:last-child {margin-right: 0px;} #pluses .pluses-wrapper .single-pluse p {margin-bottom: 0; padding-top: 27px;} /*----When-need---*/ #when-need{padding: 0px 0px 150px 0; position: relative; z-index: 1;} #when-need {position: relative; z-index: 1;} #when-need .when-need-wrapper {position: relative; z-index: 1; display: flex; justify-content: center;} #when-need .when-need-wrapper .left-block,#when-need .when-need-wrapper .right-block {position: absolute; z-index: 2; width: 50%;height: 100%;} #when-need .when-need-wrapper .left-block {left: 0; top:0;} #when-need .when-need-wrapper .right-block {right: 0; top:0;} #when-need .when-need-wrapper .why {width: 203px; position: absolute; z-index: 3;} #when-need #girl-why {width: 540px;} #when-need #girl-why img{width: 100%; object-fit: contain;} #when-need .when-need-wrapper .left-block .why.first{top:104px; right:235px;} #when-need .when-need-wrapper .left-block .why.second{top:248px; right:280px;} #when-need .when-need-wrapper .left-block .why.third{top:395px; right:245px;} #when-need .when-need-wrapper .right-block .why.first{top:104px; left:235px;} #when-need .when-need-wrapper .right-block .why.second{top:248px; left:280px;} #when-need .when-need-wrapper .right-block .why.third{top:395px; left:245px;} #when-need img.bg-left, #when-need img.bg-right {display: block; position: absolute; z-index: 2; bottom:0;} #when-need img.bg-left {left:0;} #when-need img.bg-right {right:0;} /*----how much----*/ #how-much {padding: 70px 0 150px 0; background-image: url(../img/bg-cost.jpg); background-repeat: no-repeat; } #how-much .how-much-wrapper {display: flex; justify-content: flex-start; width: 80%; margin: 80px auto 0 auto;} #how-much .how-much-wrapper .lady-men-wrapper {width: 27%; margin-left: 30px;} #how-much .lady-men-wrapper > .single-select {font-size: 24px; line-height: 38px; text-transform: uppercase; font-family: 'Cormorant Garamond'; padding-left: 38px; border-left: 1px solid transparent; cursor: pointer; margin-bottom: 40px; transition: color .3s ease-in-out;} #how-much .lady-men-wrapper > .single-select.active {color:var(--second); border-left: 1px solid var(--second);} #how-much .lady-men-wrapper > .single-select:hover{color:var(--second);} .cost-select-wrapper {width: 70%;} .cost-select-wrapper .single-select {margin-bottom: 12px;} .cost-select-wrapper .single-select .select-title {background: #FFFFFF;box-shadow: 0px 5px 31px rgba(0, 0, 0, 0.06); padding: 25px 0 25px 37px; font-size: 1.1rem; position: relative; z-index: 1; cursor: pointer;} .cost-select-wrapper .single-select .select-title.active span{font-weight: 600;} .cost-select-wrapper .single-select .select-title .v {position: absolute; z-index: 2; right: 30px; top:50%; margin-top: -10px; width: 20px; height: 20px; background-image: url(../img/v-select.png); background-position: center; background-repeat: no-repeat; transition: .3s ease-in-out;} .cost-select-wrapper .single-select .select-title.active .v {transform: rotate(180deg);} .cost-select-wrapper .single-select .cost-content{ background-color: #ffffff; overflow: hidden; max-height: 0;transition: max-height .3s ease-in-out;} .cost-select-wrapper .single-select .cost-content.active {max-height: 400px;} .cost-select-wrapper .single-select .cost-content p {padding: 25px;} #men-select {display: none;} /*----all ---*/ .sign-up {display: inline-block; background-color: rgba(255, 255, 255, 1); padding: 10px 59px; cursor: pointer; border: 1px solid #80807E; margin-top: 44px; transition: background-color .3s ease-in-out;} .sign-up:hover{border-color:var(--second); background-color: var(--second); color:#ffffff;} .main-desc{margin: 0 auto; text-align: center; width: 40%;} .breadcrumbs-title {background-color: #ffffff;} .breadcrumbs {margin: 30px 0; display: flex; flex-wrap: wrap; justify-content: flex-start; font-size: 13px; line-height: 1.3;color: #808080;} .breadcrumbs a {text-decoration-line: underline;color: #808080; transition: color .3s ease-in-out;} .breadcrumbs a:hover {color: var(--second);} .breadcrumbs span.separator {margin: 0 20px;} .main-content .top-bg {height: 340px; position: relative; z-index: -1; margin-bottom: -220px; background-position: center; background-repeat: no-repeat; background-size: cover;} .main-content .top-bg.first {background-image: url(../img/bg-first.jpg);} .sub-title {background-image: url(../img/bg-dot.png); background-repeat: repeat-x; background-position: center; text-align: center; margin-bottom: 50px;} .sub-title h3{display: inline-block; background-color: #ffffff; padding-left:40px; padding-right: 40px; } /*---- Как проходит процедура-----*/ #how-is-it-going {padding: 100px 0;} #how-is-it-going .slider-nav-wrapper {position: relative; z-index:1;} #how-is-it-going .slider-wrapper{/*display: flex; justify-content: flex-start; */position: relative; z-index: 1; overflow: hidden;} #how-is-it-going .single-slide {display: flex; justify-content: flex-start;} #how-is-it-going .single-slide.current {position: relative; width: 55%; margin: 50px auto;} #how-is-it-going .single-slide.prev {position: absolute; z-index: 2; left:0px; top:20%; opacity: .5; cursor: pointer; transition: opacity .3s ease-in-out;} #how-is-it-going .single-slide.prev:hover{opacity: .8;} #how-is-it-going .single-slide.prev img{width: 70%; height: 70%;} #how-is-it-going .single-slide.prev .slide-content {display: none; } #how-is-it-going .single-slide img {display: block; height: 422px; width: 422px; object-fit: cover; margin-right: 30px;} #how-is-it-going .single-slide .slide-title{padding-top: 10px; font-family: 'Cormorant Garamond'; font-weight: 600; font-size: 24px; line-height: 1.2; margin-bottom: 30px;} #how-is-it-going .single-slide .slide-content {position: relative; z-index: 1;} #how-is-it-going .single-slide p.old, #how-is-it-going .single-slide p.time {margin-bottom: 9px; color:#988075; font-size: 15px; line-height: 1.2;} #how-is-it-going .navigation {display: flex; justify-content: center; align-items: center; position: absolute; z-index: 2; bottom:10px; font-family: 'Cormorant Garamond'; font-size: 28px; line-height: 1.2; left: 50%; bottom:50px; } #how-is-it-going .navigation .btn-naw{width: 30px; height: 14px; background-position: center; background-repeat: no-repeat; cursor: pointer;} #how-is-it-going .navigation .prev {background-image: url(../img/arrow-prew.png); margin-right: 33px;} #how-is-it-going .navigation .next {background-image: url(../img/arrow-next.png); margin-left: 33px;} /*----- До после ----*/ #before-after {padding: 50px 0;} #slider-before-after {margin: 65px auto; width: 70%; position: relative; z-index: 1;} #slider-before-after .desc-wrapper {position: absolute; z-index: 2; top:30px; display: flex; justify-content: space-between; right:20px; left:20px; width: auto;} #slider-before-after .desc-wrapper div {text-transform: uppercase; font-size: 18px; padding: 10px; width: 88px; text-align: center; background-color: #fff; opacity: 0.8; border-radius: 4px;} #slider-before-after .single-slide p.slide-desc {margin-top: 42px; text-align: center;} #slider-before-after .single-slide .image-wrapper {} #slider-before-after .owl-nav, #slider-before-after .arrow-wrapper{display: flex; justify-content: space-between; width: calc(100% + 110px); height: 0; margin-left: -55px; position: absolute; z-index: 5; top:calc(50% - 40px); } /* #slider-before-after .owl-nav button {display: block; height: 40px; width: 40px; color: transparent; background-image: url(/img/slider-arrow.png); background-position: center; background-repeat: no-repeat; opacity: .7; transition: opacity .3s ease-in-out;} #slider-before-after .owl-nav button.owl-next {transform: rotate(180deg);} #slider-before-after .owl-nav button:hover{opacity: 1;}*/ #slider-before-after .arrow-wrapper button {display: block; height: 40px; width: 40px; color: transparent; background-image: url(../img/slider-arrow.png); background-position: center; background-repeat: no-repeat; opacity: .7; transition: opacity .3s ease-in-out;} #slider-before-after .arrow-wrapper button.slick-next {transform: rotate(180deg);} #slider-before-after ul.slick-dots {display: flex; justify-content: center; margin: 0; padding: 0;} #slider-before-after ul.slick-dots li {display: block; cursor: pointer; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #ABBAB5; margin-right: 15px; color: transparent;} #slider-before-after ul.slick-dots li.slick-active {border-color: transparent; background-color: var(--second);} #slider-before-after ul.slick-dots li:last-child{margin-right: 0; } #slider-before-after ul.slick-dots li button {display:none;} /* #slider-before-after .owl-dots {display: flex; justify-content: center;} #slider-before-after .owl-dots button {margin-right: 15px;} #slider-before-after .owl-dots button:last-child{margin-right: 0;} #slider-before-after .owl-dots span {display: block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #ABBAB5;} #slider-before-after .owl-dots button.active span {border-color: transparent; background-color: var(--second);} */ /*---- Отзывы ------*/ #our-reviews {padding: 80px 0; position: relative; z-index: 1;} #our-reviews .reviews-wrapper {padding: 40px 0 80px; } #our-reviews .single-review-wrapper {padding: 0px;} #our-reviews .reviews-wrapper .single-review {padding: 30px; background: #FFFFFF; box-shadow: 0px 0px 12px rgba(133, 121, 121, 0.5); height: min-content; position: relative; z-index: 1;} #our-reviews .reviews-wrapper .single-review .review-author {font-family: 'Cormorant Garamond'; font-size: 26px; font-weight: 500; text-align: left; margin-bottom: 9px;} #our-reviews .reviews-wrapper .single-review .review-date {font-weight: 300; font-size: 14px; color: #999EAE; margin-bottom: 14px;} #our-reviews .reviews-wrapper .single-review .review-body {height: 230px; overflow: hidden; font-weight: 300; font-size: 15px; line-height: 1.5; color: #272B30; margin-bottom: 30px;} #our-reviews .reviews-wrapper .owl-stage .owl-item .single-review-wrapper {margin-top:20px; box-shadow: 0px 6px 25px rgba(19, 1, 1, 0.07);} #our-reviews .reviews-wrapper .owl-stage .owl-item .single-review-wrapper .quotes {display: none;} #our-reviews .reviews-wrapper .owl-stage .owl-item.active:nth-of-type(3n+2) .single-review-wrapper {padding-top: 50px; margin-top: 0px;} #our-reviews .reviews-wrapper .owl-stage .owl-item.active:nth-of-type(3n+2) .single-review-wrapper .quotes{display: block;} #our-reviews .reviews-wrapper .slick-slide {padding-top: 50px; margin: 0 15px;} #our-reviews .reviews-wrapper .slick-current + .slick-slide{padding-top: 20px; margin-bottom: 10px;} #our-reviews .reviews-wrapper .slick-current + .slick-slide .single-review {padding-top: 100px;} #our-reviews .reviews-wrapper .slick-current + .slick-slide .single-review .quotes {display: block;} #our-reviews .reviews-wrapper .single-review .review-cosmetolog {font-weight: 300; font-size: 15px; line-height: 18px; color: #4F575E; position: absolute; z-index: 2; bottom:0px; left:30px;} #our-reviews .reviews-wrapper .single-review .quotes {position: absolute; z-index: 3; width: 104px; height: 90px; background-image: url(../img/quotes.png); background-repeat: no-repeat; background-size: contain; top:-25px; left:-10px; display: none;} #our-reviews .reviews-wrapper .single-review:nth-child(3n+2) {padding-top: 74px;} #our-reviews .rewievs-total {text-align: center; font-family: 'Cormorant Garamond'; font-size: 36px;line-height: 91.6%; color: #4F575E; position: relative; z-index: 1; padding-bottom: 0px; } #our-reviews .rewievs-total .rewievs-value {margin-bottom: 5px;} #our-reviews .rewievs-total .arrow-wrapper {display: flex; justify-content: center; position: relative; z-index: 2; top:-50px;} #our-reviews .rewievs-total .arrow-wrapper button {background-repeat: no-repeat; background-position: center; height: 15px; width: 57px; background-color: transparent;} #our-reviews .rewievs-total .arrow-wrapper .slick-prev {margin-right: 135px; background-image: url(../img/arrow-prew-2.png);} #our-reviews .rewievs-total .arrow-wrapper .slick-next {margin-left: 135px; background-image: url(../img/arrow-next-2.png);} #our-reviews .rewievs-total img.bg {position: absolute; z-index: 2;} #our-reviews .rewievs-total img.bg.left-img{top:-60px; left:0px;} #our-reviews .rewievs-total img.bg.right-img{top:0px; right:140px;} #our-reviews .rewievs-total img.bg.right-btm-img{bottom:-220px; right:40px;} /*---- Волнующие вопросы ------*/ #important-questions {position: relative; z-index: 1; padding: 80px 0;} .questions-wrapper {margin-top: 70px; display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 100px;} .questions-wrapper .left-block,.questions-wrapper .right-block {width: 48%; height: min-content;} .questions-wrapper .single-question {background: #FFFFFF; box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.08); color: #374551; margin-bottom: 12px; height: min-content;} .questions-wrapper .single-question .title{cursor:pointer; padding: 19px 100px 19px 20px; position: relative; z-index: 1;} .questions-wrapper .single-question .hidden-content {max-height: 0; overflow: hidden; transition: max-height .3s ease-in-out;} .questions-wrapper .single-question .hidden-content .wrapper {padding: 20px;} .questions-wrapper .single-question .hidden-content.active {max-height: 1000px;} .questions-wrapper .single-question .title .v {position: absolute; z-index: 2; right: 30px; top: 50%; margin-top: -10px; width: 20px; height: 20px; background-image: url(../img/v-select.png);background-position: center; background-repeat: no-repeat; transition: .3s ease-in-out;} .questions-wrapper .single-question .title.active .v {transform: rotate(180deg);} /*----- Остались вопросы ----*/ .more-questions {text-align:center; background-image: url(../img//bg-more-questions.jpg); background-size: 100%; background-repeat: no-repeat;} .more-questions p.title {width: 420px; margin: 0 auto;} .more-questions #have-question {display: inline-block; text-align: center; margin: 30px auto 225px; padding: 10px 20px; background: #FFFFFF; border: 1px solid #4F4F4F; cursor:pointer; transition: background-color .3s ease-in-out;} .more-questions #have-question:hover{border-color: var(--second); background-color: var(--second); color:#ffffff;} .more-questions h3 {max-width: 810px; margin: 0 auto 30px;} /*---лента Instagram---*/ #instagram-line-slider {overflow: hidden; margin-bottom: -7px;} #instagram-line-slider a.single-instagram-foto {display: inline-block; width: 290px; height: 290px;} #instagram-line-slider a.single-instagram-foto img {width: 100%; height: 100%; object-fit: cover; transition: filter .3s ease-in-out;} #instagram-line-slider a.single-instagram-foto img:hover {filter: brightness(110%); -webkit-filter: brightness(110%); -moz-filter: brightness(110%);} /*--- страница PROWAX ----*/ #desc-prowax {padding: 80px 0 0px; position: relative; z-index: 3;} #desc-prowax .txt-block {width: 80%; padding: 50px 150px 80px 150px; text-align: center; background: #FFFFFF; box-shadow: 0px 5px 31px rgba(0, 0, 0, 0.06); margin: 0 auto 0px; position: relative; z-index: 2; } #desc-prowax .img-block {height: auto; display: flex; justify-content: space-between; position: relative; z-index: 1; margin-top: -70px;} #desc-prowax .img-block img {display: block; width: auto; object-fit: contain;} /*--- О компании ---*/ #about-company {padding: 60px 80px; margin-bottom: 140px;} .main-content {padding-bottom: 130px;} .main-content .main-block {width: 77%; background: #FFFFFF; box-shadow: 0px 12px 49px rgba(0, 0, 0, 0.1); border-radius: 2px; position: relative; z-index: 1; margin: 0 auto; padding-bottom: 150px;} .main-content .main-block .desc p {} .main-content .main-block .factors {display: flex; justify-content: space-between; padding-top: 50px;} .main-content .main-block .factors .single-factor {display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 20%; padding: 0 10px;} .main-content .main-block .factors .single-factor img {display: block; margin-bottom: 27px;} p.after-top-block {width: 33%; margin: 0 auto; } .main-content .after-top-block + .sign-up{margin-bottom: 80px;} /*---Контакты----*/ .contact-line {display: flex; justify-content: space-between; margin-bottom: 100px;} .contact-line .single-contact{padding-left: 52px; background-repeat: no-repeat; background-position: left center; width: auto; margin-right: 20px; text-align: left;} .contact-line .single-contact:last-of-type{margin-right: 0;} .contact-line .single-contact .title {text-align: left; font-weight: 300; color: #4F575E;margin-bottom: 0;} .contact-line .single-contact a {display: inline-block; transition: color .3s ease-in-out; font-size: 18px; line-height: 1.1; color: #272B30; font-weight: 600; text-align: left;} .contact-line .single-contact a.messengers {margin: 0px 4px; padding-bottom: 4px;} .contact-line .single-contact a.messengers img {padding-bottom: 5px;} .contact-line .single-contact a:hover{color:var(--second);} .contact-line .single-contact.mail{background-image: url(../img/contact-mail.png);} .contact-line .single-contact.map{background-image: url(../img/contact-map.png);} .contact-line .single-contact.instagram{background-image: url(../img/contact-instagram.png);} .contact-line .single-contact.phone{background-image: url(../img/contact-phone.png);} .map-foto-wrapper {} .map-foto-wrapper .map {margin-top: 48px; margin-bottom: 10px;} .map-foto-wrapper .adres-fotos {display: flex; justify-content: space-between;} .map-foto-wrapper .adres-fotos .single-foto {display: block; width: 30%; height: auto; object-fit: contain;} /*----Блог----*/ .blog-wrapper {display: flex; justify-content: space-between; flex-wrap: wrap;} .blog-wrapper a.single-blog {display: block; width: 30%; margin-bottom: 40px; transition: all .3s ease-in-out; cursor: pointer;} .blog-wrapper a.single-blog:hover {box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);} .blog-wrapper .single-blog img {width: 100%; height:590px; object-fit: cover;} .blog-wrapper .single-blog h4 {padding: 10px 20px; font-size: 24px; font-weight: normal; margin-bottom: 0; border-top:1px solid #E5E5E5; margin-top: 20px;} .navigation-block-bottom {display: flex; justify-content: space-between; align-items: center; margin-top: 100px; border-bottom: 1px solid #E5E5E5; padding-bottom: 10px;} .navigation-block-bottom a.nxt-page {display: inline-block;} .pagination {display: flex; justify-content: flex-start; flex-wrap: wrap;} .pagination a {display: inline-block; cursor: pointer; height: 24px; width: 24px; border:1px solid transparent; text-align: center; line-height: 24px; margin-right: 11px;} .pagination a.curent {border-color:#4F575E;} .pagination a:last-child {margin-left: 11px;} /*--- Страница блога-----*/ .main-img-wrapper {height: 430px; overflow: hidden; margin-bottom: 70px;} .main-img-wrapper img {width: 100%; object-fit: cover;} .article-content {margin-bottom: 100px;} .article-content ~ ul{padding-left: 0;} .article-content ~ ul li {margin-bottom: 10px;} /*---- privacy-policy -----*/ .full-width-content {background-color: #ffffff;} .padding-50 {padding: 50px;} .privacy-policy-wrapper {display: flex; justify-content: flex-start;} .privacy-policy-wrapper .privacy-policy-menu {width: 25%; padding-right: 50px;} .privacy-policy-wrapper .privacy-policy-content {width: 75%;} .privacy-policy-wrapper .privacy-policy-menu p.title {font-weight: 600; text-transform: uppercase; margin-bottom: 26px;} .privacy-policy-wrapper .privacy-policy-menu ul {margin-left: 0; padding-left: 0;} .privacy-policy-wrapper .privacy-policy-menu ul li {margin-bottom: 18px;} .privacy-policy-wrapper .privacy-policy-content p.title {text-transform: uppercase; font-weight: 600; padding-top: 50px; text-align: left; font-size: 20px; line-height: 1.2; margin-bottom: 26px;} .privacy-policy-wrapper .privacy-policy-content p.title:first-child {padding-top: 0;} .privacy-policy-wrapper .privacy-policy-content .content {} /*--- Косметологи----*/ .cosmetologists-wrapper {display: flex; justify-content: flex-start; column-gap: 2%;flex-wrap: wrap; margin-bottom: 100px;} .cosmetologists-wrapper a.single-cosmetologist {display: block; position: relative; z-index: 1; height: 590px; width: 32%; margin-bottom: 40px;} .cosmetologists-wrapper .single-cosmetologist img {width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1;} .cosmetologists-wrapper .single-cosmetologist .name-wrapper {position: absolute; z-index: 2; bottom: 50px;text-align: center; width: 100%;} /*--- Косметолог-----*/ .cosmetologist-wrapper {display: flex; justify-content: flex-start; margin-bottom: 100px;} .cosmetologist-wrapper .cosmetologist-foto {width: 33%;} .cosmetologist-wrapper .cosmetologist-foto h2{display: none;} .cosmetologist-wrapper .cosmetologist-foto h1{display: none;} .cosmetologist-wrapper .cosmetologist-foto img {width: 100%; object-fit: contain;} .cosmetologist-wrapper .cosmetologist-desc {margin-left: 50px; width: 60%; } .cosmetologist-desc .desc{margin-bottom: 40px;} .cosmetologist-wrapper h1 {font-size: 40px;} .cosmetologist-wrapper h2 {font-size: 40px;} #get-cosmetolog-btn {display: inline-block; padding: 10px 35px; color:#ffffff; background-color: var(--third); cursor: pointer; transition: background-color .3s ease-in-out; border:1px solid transparent;} #get-cosmetolog-btn:hover {background-color: #ffffff; color:var(--main); border-color:var(--main);} #mini-fotogallery {position: relative; z-index: 1;} #mini-fotogallery a.single-foto {display: block; position: relative; z-index: 1;} #mini-fotogallery a.single-foto p.desc {position: absolute; z-index: 2; top:14px; left:14px; color:#ffffff; text-transform: uppercase; background-color: var(--third); font-weight: 600; font-size: 13px; padding: 7px 19px;} #mini-fotogallery a.single-foto img {width: 100%; object-fit: cover;} #mini-fotogallery .owl-nav { display: flex; justify-content: space-between; width: calc(100% + 110px); height: 0; margin-left: -55px; position: absolute; z-index: 5; top: calc(50% - 40px); } #mini-fotogallery .owl-nav button:hover { opacity: 1; } #mini-fotogallery .owl-nav button { display: block; height: 40px; width: 40px; color: transparent; background-image: url(../img/slider-arrow.png); background-position: center; background-repeat: no-repeat; opacity: .7; transition: opacity .3s ease-in-out; } #mini-fotogallery .owl-nav button.owl-next { transform: rotate(180deg);} /*----Footer----*/ #footer {padding: 68px 0 64px 0; background-color: #363636;} .footer-wrapper {display: flex; justify-content: space-between;} .footer-wrapper .footer-menu-wrapper {display: flex; justify-content: space-between;} #footer .single-column{margin-right: 117px;} #footer .single-column:last-child{margin-right: 0px;} #footer .single-column .title {font-family: 'Cormorant Garamond'; text-transform: uppercase; color: #A0A0A0;font-weight: bold; margin-bottom: 20px; position: relative; z-index: 1;} #footer .single-column .title span {display: inline-block;} #footer .single-column .title .v{display: none; position: absolute; z-index: 2; right:0; top:5px;width: 15px; height: 15px; background-image: url(../img/v-footer.png); background-position: center; background-repeat: no-repeat;} #footer .single-column .title .v.rotated {transform:rotate(180deg);} #footer .single-column ul{padding-left: 0;} #footer .single-column ul li {margin-bottom: 10px;} #footer .single-column a {color:#ffffff; transition: color .3s ease-in-out; font-size: 14px; display: inline-block;} #footer .single-column a:hover{color: var(--second)} #footer .single-column .main-swither-wrapper a {margin-right: 29px;} #footer .single-column .main-swither-wrapper a:last-of-type {margin-right: 0px;} #footer .footer-instagram-block {width: 180px;} #footer .footer-instagram-block .title{font-family: 'Cormorant Garamond'; text-transform: uppercase; color: #A0A0A0;font-weight: bold; margin-bottom: 20px;} #footer .footer-instagram-block .instagram-foto-wrapper{display: flex; flex-wrap: wrap; justify-content: space-between;} #footer .footer-instagram-block .instagram-foto-wrapper a {display: block; width: 84px; height:84px; border-radius: 10px; overflow: hidden; margin-bottom: 15px;} #footer .footer-instagram-block .instagram-foto-wrapper a img {width: 100%; height:100%; object-fit: cover;} /*---- Кнопка Запись онлайн----*/ #btn-online-wrapper {width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; border-radius: 50%; position: fixed; z-index: 10; top:calc(50% + 43px); transform: translate(0, -50%); right:26px; opacity: 0; transition: opacity 1s ease-in-out; } #btn-online-wrapper.active{opacity:.9;} #btn-online-wrapper.active:hover{opacity: 1;} #booking-online {height: 95%; width: 95%; display: flex; align-items: center; justify-content: center; border-radius: 50%; border:1px solid #999EAE; cursor: pointer; background-color: #ffffff; animation: radial-pulse 2s infinite;} #booking-online .inner-disc { border-radius:50%; margin: 7px auto; background: linear-gradient(180deg, #EDEBEC 0%, rgba(181, 186, 192, 0.62) 100%); text-align: center; line-height: 1.2; font-weight: 600;font-size: 10px; text-transform: uppercase; display: flex; align-items: center; margin: auto; height: 90%; width: 90%; justify-content: center; padding: 0 5px; } /*----gallery----- */ #fotogallery .sort-line {display: flex; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 40px;} #fotogallery .sort-line .gallery-button {display: inline-block; padding: 10px 32px; border: 1px solid #D2DDD9; border-radius: 2px; font-weight: 300; background-color:#ffffff; font-size: 15px; line-height: 1.2; margin-right:13px; transition: background-color .3s ease-in-out; cursor: pointer;} #fotogallery .sort-line .gallery-button:hover {background-color: #ABBAB5; color: #ffffff;} #fotogallery .sort-line .gallery-button.active {background-color: #ABBAB5; font-weight: 600; color: #ffff;} #fotogallery .gallery-wrapper {display: flex; justify-content: flex-start; flex-wrap: wrap;} #fotogallery .gallery-wrapper .single-foto-gallery {display: block; position: relative; z-index: 1; width: 31%; margin-right: 30px; margin-bottom: 34px;} #fotogallery .gallery-wrapper .single-foto-gallery img {width: 100%; object-fit: cover;} #fotogallery .gallery-wrapper .single-foto-gallery .type-wrapper {position: absolute; z-index: 2; text-align: center; bottom:28px; width: 100%;} #fotogallery .gallery-wrapper .single-foto-gallery .type-wrapper .title {display: inline-block; padding: 13px 40px; background-color: var(--third); color:#ffffff; text-transform: uppercase; font-weight: 600; font-size: 14px;} /*---All reviews page---*/ #our-reviews.all-reviews-page {padding-top: 0px;} #our-reviews.all-reviews-page .after-top-block {margin-top: 100px;} .main-content #our-reviews.all-reviews-page .after-top-block + .sign-up {margin-bottom: 0px;} /* SystemMessages */ #SystemMessagesWrapper { position: fixed; left: 0; right: 0; bottom: 10%; z-index: 10000; } #SystemMessages { max-width: 600px; margin: 0 auto; } #SystemMessages>div { display: none; border-radius: 5px; padding: 11px 18px; } #SystemMessages .error { background: red; border: 2px solid #000; border-color: #a51a1a; color: #fff; } #SystemMessages .message { background: green; border: 2px solid #000; border-color: #18be2d; color: #fff; } /*----Меню бургер-----*/ #wrapper-burger {display: none;} #wrapper-burger{margin: 0; background: #ffffff; position: relative; display: none; z-index: 1001; height: 80px; } .burger-menu-wrapper {width: 100%; position: absolute; top:30px; z-index: 1;} #check-menu{display: none;} #wrapper-burger label{ display: block; position: relative; width: 40px; height: 35px; top:-10px; left:32px; cursor: pointer; z-index: 100; overflow: hidden; } .burger-line{ position: absolute; top: 0px; left: 5%; width: 33px; height: 3px; background-color: var(--main); transition: .5s all; } .burger-line.first {} .burger-line.second, .burger-line.third{top: 9px;} /*вторая и появляющаяся линия*/ .burger-line.fourth{top: 17px;} .main-menu_burger_wrapper{height: 0;} ul.main-menu_burger{ display: block; margin: 0; padding: 0; max-height: 0; position: absolute; width: 100%; bottom: 0; left: 0; transform: translateY(100%); font-size: 0; overflow: hidden; transition: 1s all; z-index: 150; background:#fff; } #wrapper-burger ul.main-menu_burger li { text-align: center; display: block; position: relative; z-index: 20;} #wrapper-burger ul.main-menu_burger li:first-child { margin-top:10%;} #wrapper-burger ul.main-menu_burger li:last-child { margin-bottom:10%;} #wrapper-burger ul.main-menu_burger li a{ display: inline-block; padding: 15px 0; background: #ffffff; text-align: center; font-size: 15px; line-height: 18px; color: #333232; border-bottom: 1px solid transparent; transition: all .5s ease-in-out; } #wrapper-burger ul.main-menu_burger li a:hover {color: #000066; border-bottom: 1px solid #000066;} #check-menu:checked ~ .main-menu_burger_wrapper{ height: 100%; } #check-menu:checked ~ .main-menu_burger_wrapper .main-menu_burger{ max-height: 760px; } #check-menu:checked ~ .lines_wrapper .first{ display: none; } #check-menu:checked ~ .lines_wrapper .second{ transform: rotate(45deg); } #check-menu:checked ~ .lines_wrapper .third{ transform: rotate(-45deg); } #check-menu:checked ~ .lines_wrapper .fourth{ display: none; } .menu-whith_out-burger {margin-left: calc(5% + 60px); padding-top: 20px; position: relative; z-index: 99999; display: flex; align-items: center; justify-content: space-between; padding-right: 5%;} .main-switch-burger {} .menu-whith_out-burger .main-switch-burger a {display: inline-block; padding: 10px 22px; border: 1px solid #b6bbc1; margin-left: 0; transition: background-color .3s ease-in-out;} .menu-whith_out-burger .main-switch-burger a:first-child {border-radius: 9px 0px 0px 0px; border-right: none;} .menu-whith_out-burger .main-switch-burger a:last-child {border-radius: 0px 9px 0px 0px;} .menu-whith_out-burger .main-switch-burger a:hover {background-color: var(--third); color:#fff;} .menu-whith_out-burger .main-burger-menu {display: flex;} .menu-whith_out-burger .burger-contacts a {display: inline-block; /*height: 20px; */ width: 20px; background-repeat: no-repeat; background-position: center;} .menu-whith_out-burger .burger-contacts a:first-child {margin-right: 20px;} .menu-whith_out-burger .burger-contacts a.phone {background-image: url(../img/phone-burger.png);} /*.menu-whith_out-burger .burger-contacts a.instagram {background-image: url(../img/instagram-burger.png);}*/ /*--- Popups ----*/ .black-overlay {position: absolute; z-index: 1000; top:0; left:0; background-color: #333333; width: 100%; height: 100%; opacity: 0.7;} .close-popup-wrapper {text-align: right;} .close-popup-wrapper > .close-btn {display: inline-block; cursor: pointer; height: 20px; width: 20px; background-image: url(../img/close-popup.png); background-position: center; background-repeat: no-repeat; border:1px solid transparent; transition: border-color .3s; border-radius: 50%;} .close-popup-wrapper > .close-btn:hover{border-color: var(--second)} .popup { left: 50%; width: 600px; padding: 10px; height: auto; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); background-color: #fff; height: auto; box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.9); } #thanks-popup {position: fixed; z-index: 3000; top: 50%; display: none; } #thanks-popup.show{display: block;} #get-callback {position: fixed; z-index: 3000; top: -100%; transition: top .3s ease-in-out; } #get-callback.show{top: 50%;} #online-popup {position: fixed; z-index: 3000; top: -100%; transition: top .3s ease-in-out; } #online-popup.show{top: 50%;} #get-certificate {position: fixed; z-index: 3000; top: -100%; transition: top .3s ease-in-out; } #get-certificate.show{top: 50%;} #get-cosmetolog{position: fixed; z-index: 3000; top: -100%; transition: top .3s ease-in-out; } #get-cosmetolog.show{top: 50%;} #set-review-popup{position: fixed; z-index: 3000; top: -100%; transition: top .3s ease-in-out; } #set-review-popup.show{top: 50%;} .popup-box {text-align: center; padding-bottom: 10px;} #thanks-popup p {text-align: center; margin: 24px auto 30px auto;} .back-to-site {display: inline-block; background: var(--second);border-radius: 4px; padding: 22px 90px; cursor: pointer; font-weight: 500; font-size: 18px;line-height: 21px; color: #FFFFFF;} .popup-box p {font-weight: 300; font-size: 16px; line-height: 1.3;text-align: center; margin: 22px auto 50px;} #online-popup .popup-box p {margin: 20px auto;} .popup-box p.title-price-popup {margin-bottom: 10px;} .popup-box p.product-price-popup {margin-top: 10px; font-weight: bold;} .popup-box p.title { font-weight: 600; font-size: 26px; line-height: 123%; font-family: 'Cormorant Garamond';} .popup-box input {display: block; margin: 10px auto;} .popup-box input {display: block; border-radius: 0px; padding: 15px; font-weight: 300;font-size: 18px;line-height: 1.5556; width: 80%; outline: none; margin: 10px auto; transition: border-color .3s ease-in-out;} .popup-box input.input_name, .popup-box input.input_phone, .popup-box input.input_date, .popup-box input.input_time, .popup-box input.input_summa {border: 1px solid #C8D8E8; background-position: 15px center; background-repeat: no-repeat; padding-left: 75px;} .popup-box input.input_name:focus, .popup-box input.input_date:focus, .popup-box input.input_time:focus, .popup-box input.input_summa:focus, .popup-box input.input_phone:focus{border-color: var(--second);} .popup-box input.input_name{background-image: url(../img/user-name.png); } .popup-box input.input_date {background-image: url(../img/calendar.png);} .popup-box input.input_time {background-image: url(../img/time-user.png);} .popup-box input.input_summa {background-image: url(../img/user-cost.png);} .popup-box input.input_phone{background-image: url(../img/phone.png); margin-bottom: 5px;} .popup-box input.button-submit {background-color: #ffffff; text-align: center; font-weight: 500; font-size: 18px; border:1px solid var(--main); line-height: 21px; color: var(--main); outline: none; padding: 17px; transition: background-color .3s ease-in-out; } .popup-box input.button-submit:hover {background-color: var(--second); color:#fff;} .popup-box p.agree-politic {font-weight: 300; font-size: 14px; line-height: 16px; width: 80%;margin: 0 auto;} .popup-box p.agree-politic a {color: #1C85D8;} .popup-box p.error {color:transparent; margin: 0 0 15px 0; transition: color .3s ease-in-out; font-size: 16px;} .popup-box form#set-review-form textarea#review {display: block; width: 80%; margin: 10px auto;outline: none; border: 1px solid #C8D8E8; transition: border-color .3s ease-in-out; padding: 15px; color:var(--main); font-size: 18px; line-height: 1.5556; font-weight: 300; } .popup-box form#set-review-form textarea#review:focus {border-color: var(--second); } /*---- 404 ----*/ .container.error-wrapper {display: flex; justify-content: center; align-items: center; height: 600px;} .container.error-wrapper .error-block {width: 460px; margin: 20px auto;} .error-block p.title {text-transform: uppercase; font-size: 24px;} .error-block ul {margin-left: 0; padding-left: 0;} .error-block ul li:first-child {margin-top: 5px;} .face-wrap {width: 100%;} .face-wrap .content-block{display: flex; justify-content: space-between;} .face-wrap .single-select {margin-bottom: 12px;width: 33%;} .face-wrap .single-select img {width: 100%;} .face-wrap .single-select ul {margin-top: 10px;} .face-wrap .single-select li {list-style-image: url(../img/face/check.png);} .single-select .cost-content ul {margin-top: 10px;} .single-select .cost-content li {list-style-image: url(../img/face/check.png);} .face-wrap .single-select .price-inner { background: #FFFFFF; min-height: 180px; box-shadow: 0px 5px 31px rgba(0, 0, 0, 0.06); padding: 25px 0 25px 37px; cursor: pointer; } .face-wrap .single-select .price-inner h3{ font-family: 'Cormorant Garamond'; line-height: 1.2; font-size: 1.1rem; color: #000000; font-weight: 700; text-align: center; } .center-link { text-align: center; margin-top: 20px; } .center-link a { border: 1px solid #8C9E71; padding: 15px; border-radius: 30px; font-size: 1.2rem; transition: background 0.5s ease-in-out; } .center-link a:hover { background: #8C9E71; color: #fff; transition: background 0.5s ease-in-out; } #header .messengers-wrapper {display: flex; align-items: center;} #header .messengers-wrapper a {display: block; padding: 8px 18px; border: 1px solid #80807E; background-color: #F5F3F4; margin-right: 6px;} #header .messengers-wrapper a:last-of-type{margin-right: 0;} #header .messengers-wrapper a svg path {transition: all .3s ease-in-out;} #header .messengers-wrapper a.instagram:hover {background: linear-gradient(to right,#833ab4,#fd1d1d,#fcb045);} #header .messengers-wrapper a.telegram:hover {background-color:#0088cc;} #header .messengers-wrapper a.viber:hover {background-color:#59267c;} #header .messengers-wrapper a:hover svg path {fill: #fff;} .burger-contacts {display: flex;} #header .burger-contacts .messengers-wrapper a {background-color:#fff; width: auto;} @media screen and (max-width: 800px) { #header .messengers-wrapper a {padding: 5px 10px;} } @media screen and (max-width: 780px) { .face-wrap .single-select {width: 30%;} .face-wrap .single-select ul {padding-left:0;} .face-wrap .single-select li {list-style-image: none;} .face-wrap .single-select .select-title {font-size: 0.9rem} } @media screen and (max-width: 720px) { .main-switch-burger {display: none;} } @media screen and (max-width: 540px) { .face-wrap .content-block {flex-wrap: wrap;} .face-wrap .single-select {width: 100%;} .face-wrap .single-select ul {padding-left:0;} .face-wrap .single-select li {list-style-image: none;} .face-wrap .single-select .select-title {font-size: 0.9rem} } @media screen and (max-width: 480px) { #header .messengers-wrapper a {padding: 5px 8px;} .menu-whith_out-burger .logo {width:100px;} .menu-whith_out-burger .logo a {display:block;} .menu-whith_out-burger .logo a img {width: 100%; object-fit: contain;} }