@import url('../css-1');

* {box-sizing:border-box; margin:0; padding:0;}

html {height:100%;}
body {font:300 14px/1.4em 'Roboto', sans-serif; height:100%; background:#fff; color:#444;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display:block;}

a {color:#20B2AA; outline:none; text-decoration:none;}
a:hover {text-decoration:underline;}

input, textarea, select {outline:none;}

[class^="col_"] {display:inline-block; vertical-align:top;}
[class^="col_"]:last-child:after {display:table; width:100%; content:"";}
.col_25 {width:24.5%;}
.col_33 {width:33%;}
.col_50 {width:49.5%;}

.center {text-align:center;}
.left {text-align:left;}
.right {text-align:right;}
.justify {text-align:justify;}

.table {display:table;}
.table .row {display:table-row;}
.table .col {display:table-cell; vertical-align:middle;}

.button {display:inline-block; height:50px; line-height:50px; background:#20B2AA; background:linear-gradient(to right, #20B2AA, #6C64FE); border-radius:100px; padding:0 40px; text-decoration:none; text-align:center; font-size:1.2em; font-weight:400; color:#fff; cursor:pointer; transition:.3s;}
.button.lite {height:40px; line-height:40px; background:none; border:2px solid #20B2AA; color:#20B2AA; text-decoration:none; margin-top:2em;}
.button:hover {background:#6C64FE; background:linear-gradient(to right, #6C64FE, #20B2AA); color:#fff;}
.button span {display:inline-block; padding-left:32px; background:url(../images/knopka.png) no-repeat left center;}

.wrapper {width:100%; /*position:fixed; top:0; bottom:0; overflow:auto;*/}
.width {margin:0 auto; width:1200px; max-width:100%;}
.width_big {margin:0 auto; width:1440px; max-width:100%;}

/* Top */
.top {position:sticky; top:0; z-index:333; width:100%; background:#fff; color:#444; font-weight:400; box-shadow:0 2px 5px #ccc;}
.top a {display:inline-block; color:#444; font-size:1.1em; text-decoration:none; outline:none;}
.top a:hover {transition:.2s;}

.nav a {padding:0 10px; font-weight:500; line-height:55px; border:2px solid transparent;}
.nav a.active, .nav a:hover {color:#20B2AA; border-bottom:2px solid #20B2AA;}

.phones {background:url(../images/icon-phone.png) no-repeat left center / 23px; padding:10px 0 10px 40px;}
.adr {background:url(../images/icon-map.png) no-repeat left center / 23px; padding-left:40px;}

.phones a, .adr a {display:inline-block; margin-right:5px; border:0; border-bottom:1px dashed #20B2AA;}
.info .phones a {margin: 10px;}
/* Header */
.header {position:relative; height:800px; width:100%; padding-top:59px; background:url(../images/bg.jpg) no-repeat top center / cover;}
.header .logo {text-align: right; display: block; width: 35%; margin:80px 20% 10px 30%;}
.header .slogan {font-size:40px; line-height:1.3em; color:#03b1ac; font-weight:700; text-align: center; display: block; width: auto; margin: auto auto 10px 20%;}
.header .zapis {position:absolute; left:0; bottom:120px; width:100%; text-align:center;}


/* Middle */
.section.content {background:#fff; font-family:'Roboto'; color:#333; padding:50px 0;}
.section_title {text-align:center; padding:50px 0 110px; font-size:40px; font-weight:600; line-height:1.2em;}
.section_title span {display:block; width:650px; max-width:100%; margin:20px auto; font-size:22px; font-weight:300; line-height:1.2em;}
#uslugi {padding-bottom:200px;}
.us .block {margin:0 auto 50px auto; padding-bottom:40px; width:95%; box-shadow:0 5px 25px #dedede; color:#333;}
.us .block img {display:block; margin:0 auto 40px; max-width:100%;}
.us_title {font-size:1.3em; font-weight:700;}
.us_sub_title {font-size:1.2em; font-weight:300; margin:20px 0;}
.us_price {font-size:1.8em; font-weight:700; color:#20B2AA;}
.us_price b {display:inline-block; text-transform:uppercase; font-size:20px; line-height:0.33em; border-bottom:2px solid #20B2AA; width:0.4em;}


.about {clear:both;}
.about:after {display:table; width:100%; content:"";}
.about img {float:left; margin-right:80px;}
.about p {font-size:1.29em; font-weight:500; line-height:1.4em; margin-bottom:20px; text-align:justify;}


.contacts {position:relative; background:url(../images/bg2.jpg) no-repeat top center / contain; padding:200px 0 2em 0;}
.infoblock {margin:0 auto 0; width:1000px; max-width:100%; background:#fff; padding:0 40px 40px; box-shadow:0 0 25px #999;}
.infoblock .section_title {padding:50px 0;}

.info > div {font-size:1.4em; font-weight:600; line-height:1.4em;}
.info b.strong {display:block; padding:20px 0 40px 0; font-size:1.4em;}

.flex {display:flex; flex-wrap: wrap; justify-content: center;}
.flex > div {width:50%;}
.flex .phones a {margin:0 1em 0 0;}

@media only screen and (max-width:769px) {
	.flex > div {width:100%; text-align:center;}
}


/* scrollUp */
.scrollUp {display:none; position:fixed; bottom:12vh; right:3vw; width:50px; height:50px; line-height:50px; text-align:center; font-weight:700; color:#01abff; border:3px solid #01abff; cursor:pointer; border-radius:25px; z-index:1;}
.scrollUp:hover {background:#01abff; color:#fff;}
.phones {margin-bottom:20px;}



.shownav, .sidebar, .body-layer {display:none;}

/* Modal */
.box-modal {position:relative; width:500px; max-width:100% !important; margin:0 auto; padding:2vw; background:#fff; color:#101421;}
.box-modal.width {width:1100px;}
.box-modal.docinfo {width:800px;}
.mclose {position:absolute; top:0; right:10px;}
.mclose b {font-size:3em; font-weight:300; line-height:1em; color:#9b9b9b; cursor:pointer; transition:.4s all;}
.mclose:hover b {color:#20B2AA;}
.modal-overlay, .modal-container {position:fixed; top:0; bottom:0; width:100%; z-index:1000;}
.modal-container {min-height:100%; overflow:auto; margin:0; padding:0; border:0; border-collapse:collapse; max-width:100%;}
*:first-child+html .modal-container {height:100%; max-width:100%;}
.modal-container_i {display:table; width:100%; height:100%; margin:0 auto; max-width:100%;}
.modal-container_i2 {display:table-cell; vertical-align:middle; padding:1vw; margin:0; border:0; vertical-align:middle;}
.modal-error {padding:20px; border-radius:10px; background:#000; color:#fff;}
.modal-loading {width:80px; height:80px; border-radius:10px; background:#000 url(loading.gif) no-repeat 50% 50%;}
.mtitle {display:block; font:300 16px/1em 'Roboto'; margin-bottom:50px; text-align:center;}
.mtitle b {display:block; font:300 30px/1em 'Roboto'; margin-bottom:25px;}
.mform [type="text"], .mform [type="tel"], .mform [type="password"], .mform [type="email"], .mform select, .mform textarea {display:block; width:100%; height:44px; line-height:44px; border-radius:22px; margin-bottom:15px; padding:0 20px; color:#9b9b9b; text-align:center; background:none; border:1px solid #9b9b9b;}
.mform textarea {min-height:100px;}
.mform label {display:block; padding:5px 0; text-align:center; font-size:.8em; cursor:pointer;}
.callbackbtn {display:block; margin:10px auto; height:44px; line-height:44px; border-radius:22px;}
@media only screen and (max-width:769px) {.modal-container_i,.modal-container_i2 {display:block;}}

.section.form {padding:0;}
.blue {background:#20B2AA; background:linear-gradient(to right, #20B2AA, #6C64FE)}
.mform.zform {position:relative; text-align:left; padding:130px 0; color:#fff;}
.mform.zform b {display:block; font-size:2.2em; line-height:1.2em; font-weight:500; margin-bottom:40px;}
.mform.zform [type="text"], .mform.zform [type="tel"], .mform.zform .callbackbtn {display:inline-block; width:220px; margin-right:20px; background:#fff; border:1px solid transparent; color:#333;}
.mform.zform .callbackbtn {line-height:44px; width:290px; background:#fff; color:#000;}
.mform.zform .callbackbtn span {background:url(../images/knopka_b.png) no-repeat left center;}
.mform.zform img.devushka {position:absolute; right:0; bottom:0;}


@media only screen and (max-width:769px) {
	/*.wrapper {position:relative; top:auto; bottom:auto;}*/
	.table, .table .row, .table .col {display:block;}
	.right {text-align:center;}
	.top {position:relative; top:auto; left:auto; padding-top:60px; text-align:center; box-shadow:none;}
	.top .col.phones, .top .col.adr {display:inline-block; padding:10px 0 10px 35px;}
	[class^="col_"] {display:block; float:none; width:100%; margin:0 auto;}
	/*.body-layer {position:fixed; top:0; bottom:0; left:0; right:0; background:#000; opacity:.5; z-index:1;}*/
	.width, .width_big {width:95%; margin:0 auto;}
	.wrapper {width:100%;}
	
	.shownav {display:block; position:fixed; top:0; left:0; right:0; text-align:center; height:50px; background:#fff; cursor:pointer; z-index:33; box-shadow:0 2px 5px #ccc;}
	.shownav b,.shownav b:before,.shownav b:after {display:block; position:absolute; width:30px; height:4px; border-radius:2px; background:#20B2AA; content:''; transition:.4s all;}
	.shownav b {top:22.5px; right:15px;}
	.shownav b:before {top:-8px;}
	.shownav b:after {bottom:-8px;}
	.shownav.active b {background-color:transparent;}
	.shownav.active b:before {top:0; transform:rotate(45deg);}
	.shownav.active b:after {top:0;transform:rotate(-45deg);}

	.phones {display:block; width:100%; background:none; margin-bottom:0;}
	
	.col.nav {display:none; position:fixed; top:50px; left:0; right:0; background:#fff; overflow:auto; z-index:333;}
	.nav a {display:block; padding:20px 0; line-height:1.1em; text-decoration:none;}

	.header {position:relative; height:600px; padding-top:50px;}
	.header .logo {display:block; margin:0 auto 10px;}
	.header .slogan {font-size:30px; font-weight:600;}
	.header .zapis {bottom:80px;}


	.section_title {font-size:2em; padding:0 0 60px 0;}
	.section.content {padding-top:50px;}
	.section.first {padding-top:50px;}

	.mform.zform {text-align:center;}
	.mform.zform b {padding-bottom:40px;}
	.mform.zform [type="text"], .mform.zform [type="tel"], .mform.zform .callbackbtn {display:block; width:300px; max-width:100%; margin:10px auto;}
	.mform.zform .callbackbtn {max-width:100%; margin:5px auto;}
	.mform.zform {padding:60px 0;}
	.mform.zform img.devushka {display:none;}

	.about img {float:none; margin:0 auto 20px; display:block; max-width:350px;}
	.about p {font-size:1.2em;}


	.contacts {min-height:auto; padding-top:80px;}
	.infoblock {position:relative; top:auto; left:0; right:0; margin:100px auto 0; width:100%; box-shadow:none;}


	.scrollUp {top:0; right:0; bottom:auto; background:#20B2AA; color:#fff; border-radius:0; z-index:5;}
	.scrollUp:hover {background:#20B2AA;}

	.callme {width:30px;}

}

/* Slick Slider */
.slick-slider {position:relative; max-width: 100%; display:block; box-sizing:border-box; touch-action:pan-y;}
.slick-list {position:relative; display:block; overflow-x:hidden; overflow-y:auto; margin:0; padding:0; outline:none;}
.slick-list:focus {outline:none;}
.slick-list.dragging {cursor:pointer; cursor:hand;}
.slick-slider .slick-track, .slick-slider .slick-list {transform:translate3d(0, 0, 0);}
.slick-track {position:relative; top:0; left:0; display:block; margin-left:auto; margin-right:auto;}
.slick-track:before,.slick-track:after {display:table; content:'';}
.slick-track:after {clear:both;}
.slick-loading .slick-track {visibility:hidden;}
.slick-slide {display:none; float:left; height:100%; min-height:1px; text-align:center !important;}
[dir='rtl'] .slick-slide {float:right;}
.slick-slide.slick-loading img {display:none;}
.slick-slide.dragging img {pointer-events:none;}
.slick-initialized .slick-slide {display:block;}
.slick-loading .slick-slide {visibility:hidden;}
.slick-vertical .slick-slide {display:block; height:auto; border:1px solid transparent;}
.slick-arrow {position:absolute; top:39%; width:50px; height:50px; border:2px solid #20B2AA; border-radius:25px; line-height:40px; color:#20B2AA;background:#fff; font-size:50px; cursor:pointer; outline:none; z-index:9; text-align:center; text-decoration:none !important;}
.slick-arrow.slick-next {right:0;}
.slick-arrow.slick-prev {left:0;}
.slick-arrow.slick-hidden {display:none;}
.slick-dots {text-align:center; margin:40px 0 10px; padding:0;}
.slick-dots li {width:14px; height:14px; border-radius:50%; display:inline-block; background:none; border:1px solid #20B2AA; margin:10px;}
.slick-dots li:hover {cursor:pointer;}
.slick-dots li button {display:none;}
.slick-dots li.slick-active {background:#20B2AA !important;}
.slick-disabled {opacity:.3;}

.doctors {position:relative;}

.second .slick-slide {opacity:.3;}
.second .slick-slide:hover {cursor:pointer;}
.second .slick-slide img {width:250px;}
.second .slick-dots {margin-top:100px; text-align:center;}


.sliderbox {padding:80px 0 0;}
.slider {width:750px; position:absolute; top:260px; left:50%; margin-left:-400px; z-index:1;}
.slider .doctor {display:table; width:700px; background:#fff; border-radius:10px; box-shadow:0 0 25px #ccc; margin:25px auto;}
.slider .doctor > div {display:table-cell; width:50%;}
.slider .doctor .sl_text {vertical-align:top; text-align:left; padding:20px;}
.slider .doctor .sl_img img {display:block; border-radius:10px 0 0 10px;}

.dr_name {font-size:2.4em; font-weight:700; line-height:1.3em; padding:40px 0;}
.dr_info {font-size:1.6em; font-weight:500; line-height:1.3em;}

.gall img {display:block; margin:10px auto; max-width:90%;}

@media only screen and (max-width:769px) {
	.second {display:none;}
	
	.sliderbox {padding:0;}
	.slider {width:auto; position:relative; top:auto; left:auto; margin:0 auto;}
	.slider .doctor {display:block; width:auto; border-radius:0; box-shadow:none; margin:5px auto;}
	.slider .doctor > div {display:block; width:100%;}
	.slider .doctor .sl_img img {border-radius:0; margin:0 auto;}
	.slick-arrow.slick-next {right:2vw;}
	.slick-arrow.slick-prev {left:2vw;}
	.slider .doctor .sl_text {position:absolute; bottom:0; left:0; right:0; z-index:3; background:#fff; padding:20px; text-align:center;}
	.dr_name {font-size:1.6em; padding:0 10px 0;}
	.dr_info {font-size:1.2em;}
}

.otz {font-size:1.1em; opacity:.5; outline:none !important; padding:20px; box-shadow:0 1px 5px #ccc; margin:5px; cursor:pointer;}
.otz.slick-current {opacity:1; color:#000; cursor:default;}
.otz-img {display:block; padding-bottom:20px;}
.otz-img img {width:100px; height:100px; border-radius:50%;}
.otz-img:after {content:""; display:block; height:30px; background:url(../images/rating.png) no-repeat center center / 100px;}
.otz span {display:block; font-weight:700; margin-top:20px;}
/*
.otz-name {font-size:2em; margin-bottom:20px; font-weight:700;}
.otz-name img {width:60px; height:60px;}
.otz-text {text-align:justify;}
*/


.info > div.imformation {padding:10px 0; font-size:.8em; color:#777;}
.info > div.imformation a {}

.doctor_info {padding:20px; font-size:1.2em;}
.doctor_info > b {display:block; font-weight:normal; font-size:1.6em; margin-bottom: 30px;}
.doctor_info ul {list-style:none;}
.doctor_info ul li {font-size:1.2em; line-height:1.2em; margin-bottom:15px;}


/* Art Skiff team: scoped booking-section layout, 2026-10-14. */
#form .mform.zform {
  padding: 70px 620px 60px 0;
  min-height: 330px;
  font-size: 12px;
  line-height: 1.5;
}
#form .mform.zform b {
  font-size: 30px;
  line-height: 1.25;
  margin-bottom: 24px;
}
#form .mform.zform [type="text"],
#form .mform.zform [type="tel"] {
  width: calc(50% - 8px);
  margin: 0 8px 14px 0;
  font-size: 14px;
}
#form .mform.zform [type="tel"] { margin-right: 0; }
#form .mform.zform .callbackbtn {
  width: 280px;
  max-width: 100%;
  margin: 0 0 12px;
  padding: 0 20px;
  font-size: 15px;
}
#form .mform.zform img.artskiff-team {
  display: block;
  position: absolute;
  right: -15px;
  bottom: 0;
  width: 610px;
  max-width: none;
  height: auto;
  pointer-events: none;
}
@media only screen and (min-width: 1024px) and (max-width: 1230px) {
  #form .mform.zform { width: 95%; padding-right: 51%; padding-left: 12px; }
  #form .mform.zform img.artskiff-team { right: 0; width: 50%; }
}
@media only screen and (max-width: 1023px) {
  #form .mform.zform {
    width: 95%;
    min-height: 0;
    padding: 42px 16px 0;
    text-align: center;
  }
  #form .mform.zform b { font-size: 28px; margin-bottom: 22px; padding-bottom: 0; }
  #form .mform.zform [type="text"],
  #form .mform.zform [type="tel"] {
    display: inline-block;
    width: 220px;
    max-width: calc(50% - 8px);
    margin: 0 4px 12px;
  }
  #form .mform.zform .callbackbtn { display: block; margin: 0 auto 12px; }
  #form .mform.zform img.artskiff-team {
    position: relative;
    right: auto;
    bottom: auto;
    width: 580px;
    max-width: calc(100% + 32px);
    margin: 28px auto 0;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
  }
}
@media only screen and (max-width: 480px) {
  #form .mform.zform b { font-size: 25px; }
  #form .mform.zform [type="text"],
  #form .mform.zform [type="tel"] {
    display: block;
    width: 300px;
    max-width: 100%;
    margin: 0 auto 12px;
  }
}