* {margin: 0px; padding: 0px; box-sizing: border-box; outline: none; -webkit-locale: auto}
html, body {width: 100%}
body {font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; color: #000; line-height: 1.3; font-size: 20px; -webkit-text-size-adjust: none; font-weight: 300}
body.lock {overflow: hidden; position: fixed}
.max {margin: 0px auto; max-width: 1680px; padding: 0 60px}

a {color: inherit; text-decoration: none; outline: none; cursor: pointer; transition: 250ms}
h1, h2, h3 {font-weight: 400; font-family: Georgia, "Times New Roman", serif}
h1 {font-size: 48px}
h2 {font-size: 48px; margin-bottom: 40px; margin-top: 100px}
h3 {font-size: 26px; margin-bottom: 20px}
h2 span, h3 span {font-weight: bold}

b, strong, th {font-weight: 500}
i {font-style: normal}
ul {list-style-type: disc; margin-left: 1em}
img {object-fit: contain}
img, svg {height: auto; max-height: 100%; max-width: 100%; display: block}
iframe {width: 100%; border: none}
input, select, textarea, button {-webkit-appearance: none; -moz-appearance: none; font-family: inherit; font-size: inherit; color: inherit; border-radius: 0px}
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=search] {display: block; width: 100%; font-size: 15px; border: 3px solid transparent; padding: 0px 20px; background: #ebebeb; line-height: 46px; height: 50px; border-radius: 5px; font-weight: 500; transition: 250ms}
textarea {display: block; width: 100%; border:2px solid transparent; padding: 25px; resize: none; height: 100px; font-size: 15px; background: #ebebeb; border-radius: 5px; font-weight: 500; transition: 250ms}
input[type=text]:focus, input[type=tel]:focus, input[type=email]:focus, textarea:focus, input[type=password]:focus, input[type=search]:focus {border-color: #A1AA27}

input[type=checkbox] {display: inline-block; vertical-align: middle; width: 16px !important; height: 16px; margin-right: 10px !important; position: relative; border:none; border: 1px solid #dadada; background: #fff}
input[type=checkbox]:hover {border-color: #E73633}
input[type=checkbox]:checked {background: url("data:image/svg+xml,<svg viewBox='0 0 356.7 297.3' xmlns='http://www.w3.org/2000/svg'><polygon points='42.4,153 0,195.4 101.9,297.3 356.7,42.4 314.3,0 101.9,212.4'/></svg>") 50% 50% no-repeat; background-size: 9px; border-color: #E73633}

input[type=radio] {display: inline-block; vertical-align: middle; width: 16px !important; height: 16px; margin-right: 10px !important; position: relative; border-radius: 50%; margin-left: 4px; border:none; border: 1px solid #dadada; background: #fff}
input[type=radio]:hover {border-color: #FF3D00}
input[type=radio]:checked {background: #fff; border: 4px solid #FF3D00}

select, .form-list .SumoSelect>.CaptionCont {display: block; width: 100%; font-size: 15px; font-weight: 500; border: none; border: 2px solid transparent; padding: 0px 25px; background: #ebebeb url("data:image/svg+xml,<svg viewBox='11.4 7.1' width='11.4' height='7.1' xmlns='http://www.w3.org/2000/svg'><path d='M5,6.4l-5-5L1.4,0l4.3,4.3L10,0l1.4,1.4l-5,5L5.7,7.1L5,6.4z'/></svg>") no-repeat; background-position: right 25px center; border-radius: 5px; line-height: 46px; height: 50px !important;  color: #7f7f7f; box-shadow: none !important; cursor: pointer; transition: border-color 250ms}
select:hover, .form-list .SumoSelect>.CaptionCont:hover {border-color: #E73633}

input[readonly], input[readonly]:focus {opacity: 0.5; border-color: #b3b3b3}

input.check:focus:invalid {border-bottom-color: #f10d48}
svg {fill: currentColor}
svg * {transition: fill 250ms}

::placeholder {color:#BEC0C2}
/* GLOBAL */


/* BASIC */
main {overflow-x: hidden}
main.page .content {padding: 160px 0}
.hidden {display: none}
.lazy {visibility: hidden; opacity: 0; transition: 250ms}
.ds {-webkit-user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none}
.flex {display: flex; flex-wrap: wrap}
.flex.nowrap {flex-wrap: nowrap}
.flex.align-center {align-items: center}
.flex.end {justify-content: end}
.flex.center {justify-content: center}
.flex.column {flex-direction: column}
.flex.space-between {justify-content: space-between}
.cover {background-position: 50% 50%; background-repeat: no-repeat; background-size: cover}
.contain-0 {background-position: 0% 50%; background-repeat: no-repeat; background-size: contain}
.contain-50 {background-position: 50% 50%; background-repeat: no-repeat; background-size: contain}
.mobile-show {display: none}
.tablet-show {display: none}
.mobile-flex {display: none}
.button {height: 50px; padding: 0 25px; gap: 10px; border: 1px solid #000; background: #000; color: #fff; border-radius: 30px}
.button:hover {background: #fff; color: #000 !important}

/* WIDGET */
.ugoloc-booking-steps__rooms {display: none !important}
.ugoloc-sidebar__studio img {display: none !important}
.ugoloc-widget__main-screen-footer {display: none !important}
.ugoloc-widget .ugoloc-steps-progress__item--active .ugoloc-steps-progress__item-counter, .ugoloc-widget .ugoloc-custom-select__item--selected, .ugolocmx-calendar-content .cell.active, .ugoloc-widget .ugoloc-button--blue, .ugoloc-widget .ugoloc-booking-calendar--mobile .ugoloc-booking-calendar__head-item--active .ugoloc-booking-calendar__head-item-bottom, .ugoloc-widget .ugoloc-booking-calendar__time-item--active, .ugoloc-widget .ugoloc-steps-progress__item--completed .ugoloc-steps-progress__item-counter, .ugoloc-widget .ugoloc-steps-progress__item--completed .ugoloc-steps-progress__item-counter, .ugoloc-widget .ugoloc-steps-progress__item--completed:after {background: #000 !important; border-color: #000 !important; color: #fff !important}

.line {width: 1px; background: rgba(0,0,0,0.1); position: fixed; top: 0; left: 100px; height: 100%; z-index: 2000}

header {height: 100px; position: sticky; position: -webkit-sticky; top: 0; z-index: 1000; font-size: 16px; background: linear-gradient(#ffffff, #ffffff55); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px)}

.back {position: fixed; left: 40px; top: 40px; font-size: 20px; z-index: 1000}
main:not(.home) .back {transform: rotateZ(90deg)}


header .max {height: 100%}
header:not(.fixed) a:not(.button):hover {opacity: 0.5}
header .contacts-block {gap: 20px}
header .contacts-block .phone {font-weight: bold}
header .contacts-block .social {gap: 5px}
header .contacts-block .social a {height: 40px; width: 40px; font-size: 22px}
header .menu-block {gap: 20px; text-transform: uppercase}
header .logo {width: 100px; position: relative}
header .logo .round {transform: translateX(25px); transition: 1500ms; opacity: 0}
body.loaded header .logo .round {transform: translateX(0); opacity: 1}


section {position: relative}
section h2:first-of-type {margin-top: 0}
.first {padding: 60px 0 120px 0; background: #fff}
.first h1 {font-size: 56px; font-weight: 400; margin-bottom: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 18px; text-transform: uppercase}
.first h2 {font-size: 18px; margin-top: 20px; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase}
.first .slogan {margin: 40px 0; font-size: 72px; line-height: 1; font-family: Georgia, "Times New Roman", serif; font-weight: bold}
.first .slogan span {color: #e05f3d; display: block; font-style: italic}
.first .grid {display: grid; grid-template-columns: 1fr 1fr; gap: 60px}
.first .button {margin-right: 20px}
.first .price {font-size: 20px; font-weight: bold}
.first .left-part {position: relative}
.first .left-part .address {position: absolute; padding: 10px; text-transform: uppercase; background: #FFD8BA; bottom: 20px; left: 20px; font-size: 13px}
.first .left-part img {border-radius: 0 100px 0 0; object-fit: cover; width: 100%; height: 100%}
.first .best {width: 100px; margin-left: 40px; display: block; margin: 40px 0}

.about {background: #FFD8BA; color: #000; padding: 60px 0}
.about .grid {position: relative; display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 40px}
.about h3 {margin: 0}
.about i {position: absolute; bottom: 20px; right: 260px}
.about ul {gap: 20px; text-transform: uppercase; font-size: 13px; margin: 0}
.about ul li:before {content: ''; background: url("data:image/svg+xml,<svg viewBox='0 0 356.7 297.3' xmlns='http://www.w3.org/2000/svg'><polygon points='42.4,153 0,195.4 101.9,297.3 356.7,42.4 314.3,0 101.9,212.4'/></svg>") 50% 50% no-repeat; background-size: 9px; width: 20px; height: 20px; flex-shrink: 0}

.label {text-transform: uppercase; font-weight: bold; font-size: 13px}

/* SWIPER */
.swiper {overflow: hidden; position: relative}
.swiper-pagination-bullets {gap: 5px; position: absolute; left: 0 !important; width: 100% !important; bottom: 20px !important; z-index: 1; transform: unset !important}
.swiper-pagination-bullets .swiper-pagination-bullet {width: 8px; margin: 0 !important; height: 8px; border-radius: 50%; background: #fff; opacity: 0.5; flex-shrink: 0; display: none}
.swiper-pagination-bullet-active, .swiper-pagination-bullet-active-next, .swiper-pagination-bullet-active-next-next {display: block !important}
.swiper-pagination-bullets .swiper-pagination-bullet-active {opacity: 1}
.swiper .prev, .swiper .next {width: 80px; height: 80px; position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 1; color: #fff; font-size: 26px; opacity: 0; translate: 250ms}
.swiper:hover .prev, .swiper:hover .next {opacity: 1}
.swiper .prev:hover, .swiper .next:hover {color: #000}
.swiper .prev {left: 1%}
.swiper .next {right: 1%}
.swiper .swiper-slide {overflow: hidden}
.swiper-lazy-preloader {width: 24px; height: 24px; border: 1px solid #000 !important; margin-left: -12px; margin-top: -12px; border-top-color: transparent !important; position: absolute; top: 50%}
/* SWIPER */


.space {padding-top: 120px}
.space .top-part {display: grid; grid-template-columns: 1fr auto 1fr; gap: 60px}
.space .top-part h2 {font-size: 72px; line-height: 1; font-weight: bold}
.space .grid {display: grid; margin-top: 20px}
.space .grid-1 {grid-template-columns: minmax(0,2fr) minmax(0,1fr); background: #eef1f4}
.space .grid-2 {grid-template-columns: minmax(0,1fr) minmax(0,2fr); background: #1d1e1b; color: #fff}
.space .space-slider {aspect-ratio: 16/9; width: 100%}
.space .img {object-fit: cover; height: 100%; object-position: 50% 50%; width: 100%}
.space .text {padding: 60px}
.space .num {margin-bottom: auto; font-weight: bold; text-transform: uppercase; font-size: 13px}
.space .button {font-size: 13px; color: inherit; border: 1px solid currentcolor; background: transparent; padding: 10px; border-radius: 30px; text-transform: uppercase; margin-top: 40px}
.space .button:hover {background: #000; color: #fff !important}

.advantages {padding-top: 50px}
.advantages .grid {display: flex; gap: 20px}
.advantages .item {width: 300px}
.advantages b {margin: 10px 0; display: block}
.advantages img {width: 80px; height: 80px}

.home .gallery {padding-top: 100px}
.gallery {background: #fff}
.gallery .grid {display: grid; gap: 20px; grid-template-columns: repeat(3,minmax(0,1fr))}
.gallery .gallery-slider {margin-bottom: 10px}
.gallery img, .gallery video {height: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 5px; width: 100%; margin: 0 !important; cursor: pointer}

.background {padding-top: 100px; background: #fff}
.background .grid {gap: 20px; display: flex; text-align: center; margin-bottom: 40px}
.background .item i {width: 100px; aspect-ratio: 1/1; border-radius: 50%; display: block; margin-bottom: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.2)}

.equipment {padding: 100px 0; background: #f5f7f9}
.equipment .grid {display: grid; column-gap: 20px; row-gap: 40px; grid-template-columns: repeat(3,1fr)}
.equipment .item {gap: 20px}
.equipment .item span {font-size: 18px; font-weight: 500}
.equipment .item b {display: block; margin-top: 5px}
.equipment .item img {width: 80px; aspect-ratio: 1/1; mix-blend-mode: multiply}
.equipment .item .text {width: calc(100% - 100px)}


.content {line-height: 1.5}
.content p + p {margin-top: 5px}
.content h1 {margin-bottom: 40px}
.content h3 {margin-top: 40px; margin-bottom: 10px}

.requisites {padding: 100px 0}
.requisites .grid {grid-template-columns: repeat(10, minmax(0,1fr)); gap: 10px; display: grid}
.requisites .grid img {aspect-ratio: 3/4; border-radius: 3px; object-fit: cover}

.spoiler {margin: 20px 0}
.spoiler .spoiler-title {height: 50px; background: #FFD8BA; padding: 0 10px 0 20px; border-radius: 3px; cursor: pointer}
.spoiler .spoiler-toggle {width: 40px; height: 40px; position: relative}
.spoiler .spoiler-toggle:before, .spoiler .spoiler-toggle:after {content: ''; position: absolute; border-radius: 1px; background: #000; transform-origin: 50% 50%; transition: 250ms}
.spoiler.active .spoiler-title .spoiler-toggle:after {transform: rotateZ(90deg)}
.spoiler .spoiler-toggle:before {height: 2px; width: 10px; left: 15px; top: 50%; margin-top: -1px}
.spoiler .spoiler-toggle:after {width: 2px; height: 10px; top: 15px; left: 50%; margin-left: -1px}
.spoiler .spoiler-content {display: none; padding-top: 20px}

.overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 8000; display: none}
.modal-order {display: none; position: fixed; top: 10%; left: 50%; width: 100%; max-width: 1000px; height: 80%; z-index: 9000; background: #fff; padding: 40px; border-radius: 10px; transform: translateX(-50%)}
.modal-order .inner {height: 100%; overflow-y: auto}
.modal .close {width: 30px; height: 30px; position: fixed; top: -50px; right: -50px}
.modal .close:after, .modal .close:before {content: ''; position: absolute; width: 2px; height: 100%; top: 50%; left: 0; margin-top: -1px; transform-origin: 50% 50%; background: #fff; border-radius: 1px}
.modal .close:after {transform: rotateZ(45deg)}
.modal .close:before {transform: rotateZ(-45deg)}

.team {background: #fff; padding-top: 100px}
.team .grid {gap: 20px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr))}
.team img {aspect-ratio: 3/4; object-fit: cover; margin-bottom: 20px}
.team .button {margin-top: 20px}

.services {background: #fff; padding-top: 100px}
.services table {width: 100%; border-collapse: collapse}
.services td, .services th {padding: 10px; text-align: left}
.services tr:nth-of-type(odd) td {background: #f3f3f5}
.services tr:hover td {background: #FFD8BA}

.reviews {padding-top: 100px}
.reviews h2 {margin: 0}
.reviews .yandex {width: 100px}
.reviews .grid {gap: 20px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 40px}
.reviews .item {padding: 20px; border-right: 10px; background: #f3f3f5}
.reviews .item .name {gap: 10px}
.reviews .item .name b {font-weight: 500}
.reviews .item .name .date {font-size: 13px}
.reviews .item .text {margin-top: 20px}
.reviews .item .name i {width: 50px; height: 50px; background: #FFD8BA; border-radius: 50%; color: #fff}
.reviews .item .rating {color: #ffcd33; font-size: 14px; gap: 2px}
.reviews .button {margin: 20px auto 0 auto; width: calc((100% - 40px)/3)}
.reviews .more-reviews {margin-top: 20px}
.reviews .more-reviews a {border-bottom: 1px solid #000}
.reviews .more-reviews i {margin-left: 5px; opacity: 0.3; font-size: 14px}

.personal blockquote {margin: 40px 0; display: block; position: relative; font-size: 20px; font-family: 'Poiret One', sans-serif}
.personal blockquote:before {color: #FFD8BA; content: '″'; font-size: 60px; line-height: 1}
.personal .tariff {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-bottom: 100px}
.personal .tariff .item {background: #f3f3f5; padding: 20px; border-radius: 10px}
.personal .tariff .item h3 {margin: 0}

footer {margin-top: 100px; padding-bottom: 60px; background: #f3f3f5}
footer h2 {margin-top: 0}
footer .inner {display: grid; align-items: center; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px; padding: 40px 20px}
footer .belka {width: 30px; height: 14px; opacity: 0.2; display: block; margin-top: 20px}
footer .belka:hover {opacity: 1}

.fancybox-slide--video {padding: 44px 0 !important; overflow: hidden !important}

.informer {color: #fff; z-index: 3000; width: 100%; overflow: hidden; position: sticky; bottom: 0; position: -webkit-sticky}
.informer .inner {animation: marquee 15s infinite linear; white-space: nowrap; padding: 20px 0; gap: 20px}
.informer.ny {background: #406950}
.informer.va {background: #ff66cb}
.informer.spring {background: #A3BA6F}
.informer.easter {background: #e8bb00}
.informer.summer {background: #00ca48}
.informer.autumn {background: #e8bb00}


.video {position: fixed; bottom: 80px; right: 20px; z-index: 100}
.video .close {position: absolute; right: 10px; top: 10px; font-size: 20px; z-index: 1; cursor: pointer}
.video video {aspect-ratio: 9/16; object-fit: cover; width: 150px; border-radius: 5px; background: #040404}

@keyframes marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

@media screen and (max-width: 1919px) {
	body {font-size: 18px}
}

@media screen and (max-width: 1439px) {
	.max {padding: 0 40px}
}

@media screen and (max-width: 1023px) {
.first .grid {grid-template-columns: 100%}
.tablet-hide {display: none !important}
.first .slogan {font-size: 60px}
.first .slogan span {font-size: 42px}
.space .grid-1, .space .grid-2 {grid-template-columns: 100%}
.space .text {padding: 40px 20px; order: 2}
.space .num {margin-bottom: 20px; font-size: 11px}
.space .grid .img {order: 1}
.space .top-part {grid-template-columns: 100%; gap: 0; margin-bottom: 40px}
.space .top-part h2 {font-size: 60px}
.label {margin-bottom: 20px}

}

@media screen and (max-width: 767px) {
	footer .inner {grid-template-columns: 100%}
	.swiper .prev, .swiper .next {font-size: 20px; width: 40px; height: 40px}
	.swiper .next {right: 0}
	.swiper .prev {left: 0}
	body {font-size: 14px}
	.about h3 {font-size: 22px}
	.first .price {font-size: 16px}
	::-webkit-scrollbar {display: none}
	.mobile-hide {display: none !important}
	.mobile-show {display: block !important}
	.mobile-flex {display: flex !important}
	header {height: 60px}
	header:after {display: none}
	header .fa-circle-arrow-down {left: 11px; top: 11px; font-size: 18px}
	header .logo-block {font-size: 26px}
	header .contacts-block .social {font-size: 18px; gap: 0}
	header .contacts-block {gap: 15px}
	/* header .contacts-block .phone {font-size: 20px; width: 40px; height: 40px} */
	.max {padding: 0 20px}
	h1 {font-size: 32px}
	h2 {font-size: 26px}
	h3 {font-size: 16px}
	.first {position: static}
	.first .text {height: unset; padding-top: 80px; position: relative}
	.gallery .grid {grid-template-columns: repeat(2,minmax(0,1fr))}
	.reviews .grid {grid-template-columns: 100%}
	.advantages .grid {flex-wrap: wrap}
	.advantages .item {width: 100%; display: flex; align-items: center; justify-content: space-between}
	.advantages .item img {width: 60px}
	.advantages .item .text {width: calc(100% - 80px)}
	.tab-links {font-size: 16px}
	.about .grid {grid-template-columns: 100%}
	.about h2 {margin-bottom: 40px}
	.about i {right: auto; left: 20px}
	.go {position: fixed; bottom: 70px; left: 10px; right: 10px; background: #000; color: #fff; z-index: 1000}
	.equipment .grid {grid-template-columns: 100%; row-gap: 20px}
	.background {overflow: hidden}
	.background .grid {margin: 0 -30px 20px -30px; display: flex; overflow-x: auto; padding-top: 10px}
	.background .grid .item {flex-shrink: 0}
	.background .item i {width: 23vw}
	.background .grid:before, .background .grid:after {content: ''; width: 10px; height: 10px; flex-shrink: 0}
	.team .grid {grid-template-columns: repeat(2,1fr)}
	.team .grid h3 span {display: block}
	.team .button {padding: 0}
	.personal .tariff {grid-template-columns: 100%}
	.requisites .grid {grid-template-columns: repeat(3,minmax(0,1fr))}
	.menu-button {position: relative; width: 40px; height: 40px}
	.menu-button span {position: absolute; left: 0; height: 2px; border-radius: 1px; background: #000; transition: bottom 300ms ease 300ms, top 300ms ease 300ms, transform 300ms ease 0ms; transform-origin: 50% 50%}
	.menu-button span:nth-of-type(1) {top: 15px; width: 20px}
	.menu-button span:nth-of-type(2) {bottom: 15px; width: 15px}
	.menu-button.active span {transition: bottom 300ms ease 0ms, top 300ms ease 0ms, transform 300ms ease 300ms}
	.menu-button.active span:nth-of-type(1) {top: 50%; margin-top: -1px; transform: rotateZ(-45deg)}
	.menu-button.active span:nth-of-type(2) {bottom: 50%; width: 20px; margin-bottom: -1px; transform: rotateZ(45deg)}
	.menu-block {position: fixed; top: 60px; flex-direction: column; padding: 40px 20px; left: 0; width: 100%; background: #fff; transform: scaleY(0); transition: 250ms; z-index: 1000; transform-origin: 0 0; gap: 20px}
	.menu-block.active {transform: scaleY(1); gap: 20px; height: 100vh}
	.video video {width: 100px}
	.tmb-wrap {left: 20px !important; right: 20px !important; width: calc(100% - 40px) !important}
	.video {bottom: 140px}
	.reviews .button {width: 100%}
}