/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article, aside, footer, header, nav, section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption, figure, main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b, strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b, strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code, kbd, samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio, video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button, input, optgroup, select, textarea {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button, input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button, select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button, html [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"], [type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}
/**
 * Сбросить оформление с details и скрыть контент
 */
html > body > div.popup > details>summary, html > body > div.popup > a, html > body > main > section > p.goto > a, #lightbox > div.content > div.body > form > div.success > p.controls > button, html > body > main > section.apartments > a.all, #lightbox > div.content > div.body > form > ul.fields > li > button, html > body > main > section.commercial > div.filter > div.view-change > button, html > body > main > section.promo-form > form > div.success > p.controls > button, html > body > main > section.subscribe > form > div.success > p.controls > button, html > body > main > section.promo-form > form > ul.fields > li > button, html > body > main > section.subscribe > form > ul.fields > li > button
{

	position: relative;
	
	display: inline-block;
	
	box-sizing: border-box;
	height: 56px;
	padding: 0 50px;
	margin: 0;
	
	font-size: 16px;
	font-weight: 700;
	line-height: 56px;
	white-space: nowrap;
	text-align: center;
	
	-webkit-appearance: none;
	
	   -moz-appearance: none;
	
	        appearance: none;
	
	color: white;
	background: #c3beba;
	
	border: none;
	border-radius: 28px;
	box-shadow: 16px 0 20px rgba( 86, 63, 0, 0.08 );
}
html > body > div.popup > details>summary:not([disabled]), html > body > div.popup > a:not([disabled]), html > body > main > section > p.goto > a:not([disabled]), #lightbox > div.content > div.body > form > div.success > p.controls > button:not([disabled]), html > body > main > section.apartments > a.all:not([disabled]), #lightbox > div.content > div.body > form > ul.fields > li > button:not([disabled]), html > body > main > section.commercial > div.filter > div.view-change > button:not([disabled]), html > body > main > section.promo-form > form > div.success > p.controls > button:not([disabled]), html > body > main > section.subscribe > form > div.success > p.controls > button:not([disabled]), html > body > main > section.promo-form > form > ul.fields > li > button:not([disabled]), html > body > main > section.subscribe > form > ul.fields > li > button:not([disabled])
	{
		cursor: pointer;
	}
html > body > div.popup > details>summary:not([disabled]):focus, html > body > div.popup > a:not([disabled]):focus, html > body > div.popup > details>summary:not([disabled]):hover, html > body > div.popup > a:not([disabled]):hover, html > body > main > section > p.goto > a:not([disabled]):focus, html > body > main > section > p.goto > a:not([disabled]):hover, #lightbox > div.content > div.body > form > div.success > p.controls > button:not([disabled]):focus, #lightbox > div.content > div.body > form > div.success > p.controls > button:not([disabled]):hover, html > body > main > section.apartments > a.all:not([disabled]):focus, html > body > main > section.apartments > a.all:not([disabled]):hover, #lightbox > div.content > div.body > form > ul.fields > li > button:not([disabled]):focus, #lightbox > div.content > div.body > form > ul.fields > li > button:not([disabled]):hover, html > body > main > section.commercial > div.filter > div.view-change > button:not([disabled]):focus, html > body > main > section.commercial > div.filter > div.view-change > button:not([disabled]):hover, html > body > main > section.promo-form > form > div.success > p.controls > button:not([disabled]):focus, html > body > main > section.promo-form > form > div.success > p.controls > button:not([disabled]):hover, html > body > main > section.subscribe > form > div.success > p.controls > button:not([disabled]):focus, html > body > main > section.subscribe > form > div.success > p.controls > button:not([disabled]):hover, html > body > main > section.promo-form > form > ul.fields > li > button:not([disabled]):focus, html > body > main > section.promo-form > form > ul.fields > li > button:not([disabled]):hover, html > body > main > section.subscribe > form > ul.fields > li > button:not([disabled]):focus, html > body > main > section.subscribe > form > ul.fields > li > button:not([disabled]):hover
		{
			background: #5a9bb7;
		}
#lightbox > div.content > div.body > h2, #lightbox > div.content > div.body > h3, #lightbox > div.content > div.body > ul.frames > li > h3, #lightbox > div.content > div.body > form > div.success > p:first-of-type, html > body > main > section.environment > h2, html > body > main > section.commercial > div.filter > h3, html > body > main > section.promo-form > form > div.success > p:first-of-type, html > body > main > section.subscribe > form > div.success > p:first-of-type, html > body > main > section.environment > div.slideshow > div.sections > section > h3, html > body > main > section.environment > div.illustration > div.sections > section > h3, html > body > main > section.component > div.slideshow > ul.slides > li > h3
{
	margin: 0 0 24px;
	
	font-family: "Circe",sans-serif;
	font-size: 44px;
	font-weight: 400;
	line-height: 1.09;

	background-image: linear-gradient( to right, #334554, #5a9bb7 );
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
#lightbox > div.content > div.body > form > ul.fields > li > input:not([type="checkbox"]):not([type="radio"]), #lightbox > div.content > div.body > form > ul.fields > li > textarea, html > body > main > section.promo-form > form > ul.fields > li > input:not([type="checkbox"]):not([type="radio"]), html > body > main > section.subscribe > form > ul.fields > li > input:not([type="checkbox"]):not([type="radio"])
{
	box-sizing: border-box;
	height: 40px;
	padding: 0 15px;
	
	color: #334554;
	background: white;
	
	border: 1px solid #d4d7d9;
	border-radius: 3px;
	
	transition: border-color 0.3s;
}
#lightbox > div.content > div.body > form > ul.fields > li > input:not([type="checkbox"]):not([type="radio"]):hover, #lightbox > div.content > div.body > form > ul.fields > li > textarea:hover, html > body > main > section.promo-form > form > ul.fields > li > input:not([type="checkbox"]):not([type="radio"]):hover, html > body > main > section.subscribe > form > ul.fields > li > input:not([type="checkbox"]):not([type="radio"]):hover
	{
		border-color: rgb(185, 189, 193);
	}
#lightbox > div.content > div.body > form > ul.fields > li > input:not([type="checkbox"]):not([type="radio"]):focus, #lightbox > div.content > div.body > form > ul.fields > li > textarea:focus, html > body > main > section.promo-form > form > ul.fields > li > input:not([type="checkbox"]):not([type="radio"]):focus, html > body > main > section.subscribe > form > ul.fields > li > input:not([type="checkbox"]):not([type="radio"]):focus
	{
		border-color: rgb(131, 139, 145);
		outline: none;
	}

#lightbox > div.content > div.body > form > ul.fields > li > label, html > body > main > section.promo-form > form > ul.fields > li > label, html > body > main > section.subscribe > form > ul.fields > li > label
{
	display: block;
	
	padding: 0 0 10px;
}
#lightbox > div.content > div.body > p, html > body > main > section > p, html > body > main > section.environment > div.slideshow > div.sections > section > p, html > body > main > section.environment > div.illustration > div.sections > section > p
{
	margin: 0;
	
	font-size: 20px;
	line-height: 1.4;
}
#lightbox > div.content > div.body > p:not(:last-child), html > body > main > section > p:not(:last-child), html > body > main > section.environment > div.slideshow > div.sections > section > p:not(:last-child), html > body > main > section.environment > div.illustration > div.sections > section > p:not(:last-child)
	{
		margin-bottom: 16px;
	}
#lightbox > div.content > div.body > p > strong, html > body > main > section > p > strong, html > body > main > section.environment > div.slideshow > div.sections > section > p > strong, html > body > main > section.environment > div.illustration > div.sections > section > p > strong
	{
		color: #5a9bb7;
	}
html > body > header
{
	position: relative;
	z-index: 1;
	
	overflow: hidden;
	
	box-sizing: border-box;
	height: auto;
	min-height: 100vh;
	padding: 0 0 0 70px;
}

/**
 * Сбросить всё оформление со стандартной кнопки
 */
#lightbox > div.content > div.body > form > ul.fields > li.checkbox > input, html > body > main > section.promo-form > form > ul.fields > li.checkbox > input, html > body > main > section.subscribe > form > ul.fields > li.checkbox > input
{
	
	position: absolute;
	z-index: -1;
	
	opacity: 0;
}
#lightbox > div.content > div.body > form > ul.fields > li.checkbox > input + label, html > body > main > section.promo-form > form > ul.fields > li.checkbox > input + label, html > body > main > section.subscribe > form > ul.fields > li.checkbox > input + label
	{
		position: relative;
		
		display: block;
		
		padding: 0 0 0 35px;
		
		font-size: 14px;
	}
#lightbox > div.content > div.body > form > ul.fields > li.checkbox > input + label::before, html > body > main > section.promo-form > form > ul.fields > li.checkbox > input + label::before, html > body > main > section.subscribe > form > ul.fields > li.checkbox > input + label::before
		{
			position: absolute;
			top: 50%;
			left: 0;
			
			box-sizing: border-box;
			width: 25px;
			height: 25px;
			
			content: "";
			
			border: 1px solid #d4d7d9;
			border-radius: 3px;
			
			-webkit-transform: translateY(-12px);
			
			        transform: translateY(-12px);
			
			transition: border-color 0.3s;
		}
#lightbox > div.content > div.body > form > ul.fields > li.checkbox > input:hover + label::before, html > body > main > section.promo-form > form > ul.fields > li.checkbox > input:hover + label::before, html > body > main > section.subscribe > form > ul.fields > li.checkbox > input:hover + label::before
		{
			border-color: rgb(185, 189, 193);
		}
#lightbox > div.content > div.body > form > ul.fields > li.checkbox > input:focus + label::before, html > body > main > section.promo-form > form > ul.fields > li.checkbox > input:focus + label::before, html > body > main > section.subscribe > form > ul.fields > li.checkbox > input:focus + label::before
		{
			border-color: rgb(131, 139, 145);
			outline: none;
		}
#lightbox > div.content > div.body > form > ul.fields > li.checkbox > input:checked + label::after, html > body > main > section.promo-form > form > ul.fields > li.checkbox > input:checked + label::after, html > body > main > section.subscribe > form > ul.fields > li.checkbox > input:checked + label::after
		{
			
			position: absolute;
			top: 50%;
			left: 0;
			
			box-sizing: border-box;
			width: 15px;
			height: 8px;
			
			content: "";
			
			border-bottom: 1px solid;
			border-left: 1px solid;
			
			-webkit-transform: translate(5px, calc(-50% - 3px)) scaleX(0.9) rotate(-45deg);
			
			        transform: translate(5px, calc(-50% - 3px)) scaleX(0.9) rotate(-45deg);
		}
html > body > main > section.commercial > div.filter > div.view-change > button
{
	
	line-height: 50px;
	
	color: white;
	background: transparent;
	
	border: 2px solid white;
}
html > body > main > section.commercial > div.filter > div.view-change > button:not([disabled]):hover, html > body > main > section.commercial > div.filter > div.view-change > button:not([disabled]):focus
	{
		color: #5a9bb7;
		background: white;
	}
html > body > main > section.promo-form > form > div.success > p.controls > button, html > body > main > section.promo-form > form > ul.fields > li > button, html > body > main > section.subscribe > form > ul.fields > li > button
{

	color: #1b3c57;
	background: white;

	transition:
		color 0.3s,
		background 0.3s;
}
html > body > main > section.promo-form > form > div.success > p.controls > button:hover, html > body > main > section.promo-form > form > ul.fields > li > button:hover, html > body > main > section.subscribe > form > ul.fields > li > button:hover
	{
		color: white;
	}
#lightbox > div.content > div.body > h2, html > body > main > section.commercial > div.filter > h3, html > body > main > section.environment > div.slideshow > div.sections > section > h3, html > body > main > section.environment > div.illustration > div.sections > section > h3
{
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
}

html > body > main > section.commercial > h2, html > body > main > section.features > h2, html > body > main > section.component > div.info > h2, html > body > main > section.your-house > div.info > h2
{
	margin: 0 0 24px;

	font-size: 44px;
	line-height: 1.09;
}

html > body > main > section.commercial > h2 > span, html > body > main > section.features > h2 > span, html > body > main > section.component > div.info > h2 > span, html > body > main > section.your-house > div.info > h2 > span
	{
		display: inline-block;
		
		background-image: linear-gradient( to right, #334554, #5a9bb7 );
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
#lightbox > div.content > div.body > h3, #lightbox > div.content > div.body > ul.frames > li > h3, #lightbox > div.content > div.body > form > div.success > p:first-of-type, html > body > main > section.promo-form > form > div.success > p:first-of-type, html > body > main > section.subscribe > form > div.success > p:first-of-type, html > body > main > section.component > div.slideshow > ul.slides > li > h3
{
	font-size: 21px;
	font-weight: 400;
	line-height: 1.5;
}
html > body > main > section.promo-form > form > ul.fields > li > input:not([type="checkbox"]):not([type="radio"]), html > body > main > section.subscribe > form > ul.fields > li > input:not([type="checkbox"]):not([type="radio"])
{
	color: white;
	background-color: #1b3c57;
	
	border-color: rgb(73, 99, 121);
}
html > body > main > section.promo-form > form > ul.fields > li > input:not([type="checkbox"]):not([type="radio"]):hover, html > body > main > section.subscribe > form > ul.fields > li > input:not([type="checkbox"]):not([type="radio"]):hover
	{
		border-color: rgb(118, 138, 154);
	}
html > body > main > section.promo-form > form > ul.fields > li > input:not([type="checkbox"]):not([type="radio"]):focus, html > body > main > section.subscribe > form > ul.fields > li > input:not([type="checkbox"]):not([type="radio"]):focus
	{
		border-color: rgb(209, 216, 221);
	}

#lightbox > div.content > div.body > form > ul.fields > li > textarea
{
	height: 120px;
	padding-top: 15px;
	padding-bottom: 15px;
	
	resize: none;
}
html > body > main > section.commercial > div.filter
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	
	box-sizing: border-box;
	-webkit-flex-shrink: 0;
	    -ms-flex-negative: 0;
	        flex-shrink: 0;
	width: calc(31.25vw - 22px);
	padding: 50px calc(3.13vw - 2px) 100px calc(6.25vw - 4px);
	
	color: white;
	background: url("images/pattern.svg") #1b3c57;
}
@supports (display: grid)
	{
	}

@supports (display: grid)
	{
		
		@media (max-width: 1099px)
		{
		}
	}
html > body > main > section.promo-form > form > ul.fields > li.checkbox > input + label::before, html > body > main > section.subscribe > form > ul.fields > li.checkbox > input + label::before
		{
			background-color: #1b3c57;
			
			border-color: rgb(73, 99, 121);
		}
html > body > main > section.promo-form > form > ul.fields > li.checkbox > input:hover + label::before, html > body > main > section.subscribe > form > ul.fields > li.checkbox > input:hover + label::before
		{
			border-color: rgb(118, 138, 154);
		}
html > body > main > section.promo-form > form > ul.fields > li.checkbox > input:focus + label::before, html > body > main > section.subscribe > form > ul.fields > li.checkbox > input:focus + label::before
		{
			border-color: rgb(209, 216, 221);
		}

@-webkit-keyframes blink
{
	from
	{
		opacity: 1;
	}
	50%
	{
		opacity: 0.5;
	}
	to
	{
		opacity: 1;
	}
}

@keyframes blink
{
	from
	{
		opacity: 1;
	}
	50%
	{
		opacity: 0.5;
	}
	to
	{
		opacity: 1;
	}
}

@-webkit-keyframes fade-in
{
	from
	{
		opacity: 0;
	}
	
	to
	{
		opacity: 1;
	}
}

@keyframes fade-in
{
	from
	{
		opacity: 0;
	}
	
	to
	{
		opacity: 1;
	}
}

@-webkit-keyframes rotate
{
	0%
	{
		-webkit-transform: rotate(0deg);
		        transform: rotate(0deg);
	}
	100%
	{
		-webkit-transform: rotate(360deg);
		        transform: rotate(360deg);
	}
}

@keyframes rotate
{
	0%
	{
		-webkit-transform: rotate(0deg);
		        transform: rotate(0deg);
	}
	100%
	{
		-webkit-transform: rotate(360deg);
		        transform: rotate(360deg);
	}
}

@-webkit-keyframes slide-from-left
{
	from
	{
		-webkit-transform: translateX(-100%);
		        transform: translateX(-100%);
	}
	to
	{
		-webkit-transform: translateX(0);
		        transform: translateX(0);
	}
}

@keyframes slide-from-left
{
	from
	{
		-webkit-transform: translateX(-100%);
		        transform: translateX(-100%);
	}
	to
	{
		-webkit-transform: translateX(0);
		        transform: translateX(0);
	}
}

@-webkit-keyframes slide-from-right
{
	from
	{
		-webkit-transform: translateX(100%);
		        transform: translateX(100%);
	}
	to
	{
		-webkit-transform: translateX(0);
		        transform: translateX(0);
	}
}

@keyframes slide-from-right
{
	from
	{
		-webkit-transform: translateX(100%);
		        transform: translateX(100%);
	}
	to
	{
		-webkit-transform: translateX(0);
		        transform: translateX(0);
	}
}

@font-face
{
	font-family: "Circe";
	font-style: normal;
	font-weight: 300;
	font-display: fallback;
	src: local("Circe Light"), local("Circe-Light"),
		url("fonts/circe/circe-light.woff2") format("woff2"),
		url("fonts/circe/circe-light.woff") format("woff");
}

@font-face
{
	font-family: "Circe";
	font-style: normal;
	font-weight: 400;
	font-display: fallback;
	src: local("Circe"), local("Circe Regular"), local("Circe-Regular"),
		url("fonts/circe/circe-regular.woff2") format("woff2"),
		url("fonts/circe/circe-regular.woff") format("woff");
}

@font-face
{
	font-family: "Circe";
	font-style: normal;
	font-weight: 700;
	font-display: fallback;
	src: local("Circe Bold"), local("Circe-Bold"),
		url("fonts/circe/circe-bold.woff2") format("woff2"),
		url("fonts/circe/circe-bold.woff") format("woff");
}

#lightbox
{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 4;
	
	overflow-x: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	
	width: 100%;
	height: 100vh;
}

#lightbox::before
	{
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		
		content: "";
		pointer-events: none;
		
		opacity: 0;
		background: black;
		
		transition: opacity 0.3s;
	}

a.lazy-image
{
	display: block;
	
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
}

a
{
	color: inherit;
	
	transition: color 0.3s;
}

a:hover
	{
		color: #1b3c57;
	}

input, textarea, select, button
{
	font-family: inherit;
}

span.nowrap
{
	white-space: nowrap;
}

html
{
	overflow-x: hidden;
	
	font-family: "Circe",sans-serif;
	font-size: 17px;
}

#lightbox.open::before
	{
		opacity: 0.2;
	}

#lightbox.open > div.content
{
	-webkit-transform: translateX(0);
	        transform: translateX(0);
	
	transition-timing-function: ease-out;
}

#lightbox > div.content
{
	position: absolute;
	top: 0;
	right: 0;
	
	box-sizing: border-box;
	width: calc(50vw - 35px);
	min-width: 540px;
	min-height: 100%;
	padding: 40px calc(6.25vw - 4px) 100px 40px;
	
	background: white;
	
	box-shadow: -1px 0px 2px rgba(0, 0, 0, 0.2);
	
	-webkit-transform: translateX(100%);
	
	        transform: translateX(100%);
	
	transition-property: -webkit-transform;
	
	transition-property: transform;
	
	transition-property: transform, -webkit-transform;
	transition-duration: 0.3s;
	transition-timing-function: ease-in;
	
	will-change: transform;
}

html > body
{
	min-width: 320px;
	
	color: #334554;
	background: white;

	-webkit-text-size-adjust: none;
	-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html > body .flip-text
	{
		display: inline-block;

		-webkit-transform: scale( -1, 1 );

		        transform: scale( -1, 1 );
	}

html > body.video-lightbox > aside#lightbox
	{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-justify-content: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-align-items: center;
		    -ms-flex-align: center;
		        align-items: center;
		
		padding: 0;
	}

html > body.video-lightbox > aside#lightbox::before, html > body.video-lightbox > aside#lightbox::after
		{
			content: none;
		}

html > body.video-lightbox > aside#lightbox > div.content
		{
			position: static;
			
			width: 80%;
			min-height: 0;
			padding: 0;
			
			background: none;

			box-shadow: none;
		}

html > body.video-lightbox > aside#lightbox > div.content > header
			{
				display: none;
			}

html > body.video-lightbox > aside#lightbox > div.content > div.body
			{
				position: relative;
				
				width: 100%;
				height: 0;
				padding-top: 62.5%;
			}

html > body.video-lightbox > aside#lightbox > div.content > div.body > div.video-full, html > body.video-lightbox > aside#lightbox > div.content > div.body > div.video-full > iframe
				{
					position: absolute;
					top: 0;
					left: 0;
					
					width: 100%;
					height: 100%;
				}

html > body > a.up
{
	
	position: fixed;
	right: 15px;
	bottom: 40px;
	z-index: 2;
	
	display: block;
	overflow: hidden;
	
	width: 60px;
	height: 60px;
	
	text-indent: 100%;
	white-space: nowrap;
	
	pointer-events: none;
	
	opacity: 0;
	background: #c3beba;
	
	border-radius: 50%;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
	
	-webkit-transform: translateY(110px);
	
	        transform: translateY(110px);
	
	transition: opacity 0.3s,
		-webkit-transform 0.3s;
	
	transition: transform 0.3s,
		opacity 0.3s;
	
	transition: transform 0.3s,
		opacity 0.3s,
		-webkit-transform 0.3s;
}

html > body > a.up:hover
	{
		background: #334554;
	}

html > body > a.up::before
	{
		
		position: absolute;
		top: 50%;
		left: 50%;
		
		width: 20px;
		height: 20px;
		margin: -10px 0 0 -10px;
		
		content: "";
		
		background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='15' viewBox='0 0 20 15' stroke='white'%3E%3Cpath fill='none' stroke-miterlimit='10' d='M12 .5l7 7-7 7M19 7.5H0'/%3E%3C/svg%3E") center center no-repeat;
		
		-webkit-transform: scale(1.5) rotate(-90deg);
		
		        transform: scale(1.5) rotate(-90deg);
		
		transition: -webkit-transform 0.3s;
		
		transition: transform 0.3s;
		
		transition: transform 0.3s, -webkit-transform 0.3s;
	}

html > body > a.up.visible
	{
		pointer-events: auto;
		
		opacity: 1;
		
		-webkit-transform: translateY(0);
		
		        transform: translateY(0);
	}

html > body > input#header_menu
{
	display: none;
}

html > body > input#header_menu:checked + nav.main
	{
		-webkit-transform: translateX( 0 );
		        transform: translateX( 0 );

		transition: -webkit-transform 0.2s 0.2s;

		transition: transform 0.2s 0.2s;

		transition: transform 0.2s 0.2s, -webkit-transform 0.2s 0.2s;
	}

html > body > input#header_menu:checked + nav.main > label
		{
			width: 0;
		}

html > body > input#header_menu:checked + nav.main > label::before, html > body > input#header_menu:checked + nav.main > label::after
			{
				pointer-events: auto;
				
				opacity: 1;

				transition: opacity 0.2s 0.2s;
			}

html > body > input#header_menu:checked + nav.main > label > span
			{
				opacity: 0;

				transition: opacity 0s;
			}

html > body > input#header_menu:checked + nav.main > div.logo > svg
			{
				-webkit-transform: none;
				        transform: none;

				transition: -webkit-transform 0.2s 0.2s;

				transition: transform 0.2s 0.2s;

				transition: transform 0.2s 0.2s, -webkit-transform 0.2s 0.2s;
			}

html > body > input#header_menu:checked + nav.main > div.logo > svg > g
				{
					transition: opacity 0.2s 0.2s;
				}

html > body > input#header_menu:checked + nav.main > div.logo > svg > g.text, html > body > input#header_menu:checked + nav.main > div.logo > svg > g.other
					{
						opacity: 1;
					}

html > body > input#header_menu:checked + nav.main > div.logo > svg > g.logo
					{
						opacity: 0;
					}

html > body > input#header_menu:checked + nav.main > ul.menu
		{
			opacity: 1;

			transition: opacity 0.2s 0.2s;
		}

html > body > input#header_menu:checked + nav.main > ul.menu > li:not(:first-child)
			{
				pointer-events: auto;
			}

html > body > input#header_menu:checked + nav.main > a.seven-suns
		{
			opacity: 1;

			transition: opacity 0.2s 0.2s;
		}

html > body > input#header_menu:checked + nav.main > div.video-container
		{
			opacity: 1;

			transition: opacity 0.2s 0.2s;
		}

html > body > input#header_menu:checked + nav.main ~ *
		{
			-webkit-filter: blur( 2px );
			        filter: blur( 2px );
		}

#lightbox > div.content > header
{
	position: relative;
	
	height: 0;
}

/**
 * Сбросить всё оформление со стандартной кнопки
 */

#lightbox > div.content > header > button.close
{
	display: inline;
	
	box-sizing: content-box;
	padding: 0;
	margin: 0;
	
	-webkit-appearance: none;
	
	   -moz-appearance: none;
	
	        appearance: none;
	
	background: transparent;
	
	border: none;
	/*@include icon-close($size, 36px);*/
	
	position: absolute;
	top: -40px;
	right: calc(-6.25vw - -4px);
	
	display: block;
	overflow: hidden;
	
	width: calc(6.25vw - 4px);
	height: 110px;
	
	text-indent: 100%;
	white-space: nowrap;
	
	background: url("images/btn-close.svg") center 40px no-repeat;
	
	transition: -webkit-transform 0.3s;
	
	transition: transform 0.3s;
	
	transition: transform 0.3s, -webkit-transform 0.3s;
	will-change: transform;
}

#lightbox > div.content > header > button.close:not([disabled])
	{
		cursor: pointer;
	}

#lightbox > div.content > header > button.close:not([disabled]):hover, #lightbox > div.content > header > button.close:focus
	{
		outline: none;
		
		-webkit-transform: scale(1.2);
		
		        transform: scale(1.2);
	}

#lightbox > div.content > div.body > dl
{
	font-size: 14px;
	line-height: 1.3;
}

#lightbox > div.content > div.body > dl > dt
	{
		margin: 0 0 10px;
		
		font-size: 16px;
		font-weight: 700;
	}

#lightbox > div.content > div.body > dl > dd
	{
		margin: 0 0 20px;
	}

#lightbox > div.content > div.body > h2 > img
	{
		max-width: 100%;
		max-height: 60px;

		object-fit: contain;
	}

#lightbox > div.content > div.body > h3
{
	
	margin: 30px 0 20px;
}

#lightbox > div.content > div.body > img, #lightbox > div.content > div.body > p>img
{
	display: block;
	
	max-width: 100%;
	margin: 25px auto;
}

#lightbox > div.content > div.body > time
{
	display: block;
	
	margin: 0 0 45px;
	
	font-size: 14px;
	vertical-align: middle;
}

#lightbox > div.content > div.body > time > svg
	{
		margin-right: 0.5em;
		
		vertical-align: bottom;
		
		fill: currentColor;
	}

#lightbox > div.content > div.body > ul.documents
{
	
	padding: 0;
	margin: 20px 0;
	
	font-weight: 700;
	line-height: 1.3;
	
	list-style: none;
}

#lightbox > div.content > div.body > ul.documents > li
	{
		display: block;
		
		margin-bottom: 20px;
	}

#lightbox > div.content > div.body > ul.documents > li > a
		{
			position: relative;
			
			display: block;
			
			text-decoration: none;
		}

#lightbox > div.content > div.body > ul.documents > li > a > svg
			{
				position: relative;
				top: -2px;
				
				width: 15px;
				height: 19px;
				margin-right: 5px;
				
				vertical-align: middle;
				
				opacity: 0.4;
				
				stroke: currentColor;
				
				transition: opacity 0.3s;
			}

#lightbox > div.content > div.body > ul.documents > li > a:hover > svg
				{
					opacity: 1;
				}

#lightbox > div.content > div.body > ul.documents > li > a > small
			{
				display: block;
				
				padding-left: 20px;
				margin-top: 5px;
				
				font-size: 14px;
				font-weight: 400;
			}

#lightbox > div.content > div.body > ul.frames
{
	padding: 0;
	margin: 20px 0;
	
	list-style: none;
}

#lightbox > div.content > div.body > ul.frames > li
	{
		display: block;
		
		margin-bottom: 20px;
	}

#lightbox > div.content > div.body > ul.frames > li > iframe
		{
			display: block;
			
			width: 100%;
			
			border: none;
		}

#lightbox > div.content > div.body > ul.images
{
	padding: 0;
	margin: 20px 0;
	
	list-style: none;
}

#lightbox > div.content > div.body > ul.images > li
	{
		display: block;
		
		margin-bottom: 20px;
	}

#lightbox > div.content > div.body > ul.images > li > img
		{
			display: block;
			
			width: 100%;
		}

#lightbox > div.content > div.body > ul:not([class])
{
	list-style: none;
}

#lightbox > div.content > div.body > ul:not([class]) > li
	{
		position: relative;

		line-height: 1.5;
	}

#lightbox > div.content > div.body > ul:not([class]) > li:not(:last-child)
		{
			margin-bottom: 8px;
		}

#lightbox > div.content > div.body > ul:not([class]) > li::before
		{
			position: absolute;
			top: 10px;
			left: -30px;

			width: 20px;
			height: 2px;

			content: '';

			background: #1b3c57;
		}

html > body.lightbox-mode-fullscreen > #lightbox
{
	position: absolute;
	
	height: auto;
	min-height: 100vh;
}

html > body.lightbox-mode-fullscreen > #lightbox::before
	{
		display: none;
	}

html > body.lightbox-mode-fullscreen > footer
{
	display: none;
}

html > body.lightbox-mode-fullscreen > main
{
	display: none;
}

html > body.lightbox-mode-fullscreen > nav.main
{
	display: none;
}

html > body > div.popup
{
	position: fixed;
	bottom: 20px;
	left: 90px;
	z-index: 2;

	overflow: hidden;

	box-sizing: border-box;
	width: 272px;
	padding: 20px 16px;

	text-align: center;

	background: url( 'images/pattern.svg' ) center center #5a9bb7;

	border-radius: 4px;

	-webkit-transform: translateY( 0 );

	        transform: translateY( 0 );

	transition: -webkit-transform 0.7s;

	transition: transform 0.7s;

	transition: transform 0.7s, -webkit-transform 0.7s;
}

html > body > div.popup.hide
	{
		-webkit-transform: translateY( calc(100% + 50px) );
		        transform: translateY( calc(100% + 50px) );
	}

html > body > div.popup::before
	{
		position: absolute;
		top: -108px;
		left: 42px;
		z-index: -1;

		width: 1200px;

		content: url( 'images/bg-petals.svg' );

		opacity: 0.5;

		mix-blend-mode: overlay;
	}

html > body > div.popup > button.close
{
	position: absolute;
	top: 0;
	right: 0;

	width: 32px;
	height: 32px;
	padding: 0;

	cursor: pointer;

	background: none;

	border: none;
	border-radius: 50%;
}

html > body > div.popup > button.close::before, html > body > div.popup > button.close::after
	{
		position: absolute;
		top: 15px;
		left: 10px;

		width: 12px;
		height: 2px;

		content: '';

		background: white;
	}

html > body > div.popup > button.close::before
	{
		-webkit-transform: rotate( 45deg );
		        transform: rotate( 45deg );
	}

html > body > div.popup > button.close::after
	{
		-webkit-transform: rotate( -45deg );
		        transform: rotate( -45deg );
	}

html > body > div.popup > button:not(.close)
{
	font-size: 14px;
	font-weight: 400;
	line-height: 1.29;

	text-decoration: underline dotted rgba(255, 255, 255, 0.4);

	cursor: pointer;

	color: rgba(255, 255, 255, 0.6);
	background: none;

	border: none;

	transition: -webkit-text-decoration-color 0.2s;

	transition: text-decoration-color 0.2s;

	transition: text-decoration-color 0.2s, -webkit-text-decoration-color 0.2s, -moz-text-decoration-color 0.2s;
}

html > body > div.popup > button:not(.close):hover
	{
		-webkit-text-decoration-color: transparent;
		   -moz-text-decoration-color: transparent;
		        text-decoration-color: transparent;
	}

html > body > div.popup > details > h2, html > body > div.popup > details > form
	{
		display: none;
	}

html > body > div.popup > details>summary, html > body > div.popup > a
{

	margin-bottom: 0;

	text-decoration: none;

	transition: background 0.2s;
}

html > body > div.popup > details>summary:hover:not([disabled]), html > body > div.popup > details>summary:focus:not([disabled]), html > body > div.popup > a:hover:not([disabled]), html > body > div.popup > a:focus:not([disabled])
	{
		background-color: #1b3c57;
	}

html > body > div.popup > div.timer
{
	margin-bottom: 20px;
}

html > body > div.popup > div.timer > ul
	{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-justify-content: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		
		padding: 0;
		margin: 0;

		list-style: none;
	}

html > body > div.popup > div.timer > ul > li
		{
			text-align: center;
			
			color: white;
		}

html > body > div.popup > div.timer > ul > li:not(:last-child) > strong::after
				{
					content: ':';
				}

html > body > div.popup > div.timer > ul > li > strong
			{
				display: block;

				margin-bottom: -12px;
				
				font-size: 40px;
				font-weight: 700;
				font-variant-numeric: tabular-nums;
				line-height: 1.48;
				letter-spacing: -0.05em;
			}

html > body > div.popup > div.timer > ul > li > span
			{
				font-size: 13px;
				font-weight: 300;
				line-height: 1.5;
				letter-spacing: 0;
			}

html > body > div.popup > h2
{
	margin: 0 0 8px;

	font-size: 17px;
	font-weight: 700;
	line-height: 1.29;

	color: white;
}

html > body > div.popup > p
{
	margin: 0 0 12px;
	
	font-size: 16px;
	font-weight: 400;
	line-height: 1.38;

	color: white;
}

html > body > div.video-ligthbox
{
	

}

html > body > div.video-ligthbox > iframe
{

}

html > body > footer
{
	position: relative;
	z-index: 1;
	
	display: -webkit-flex;
	
	display: -ms-flexbox;
	
	display: flex;
	-webkit-align-items: space-between;
	    -ms-flex-align: space-between;
	        align-items: space-between;
	overflow: hidden;
	
	box-sizing: border-box;
	padding: 60px
		calc(6.25vw - 4px)
		60px
		calc(6.25vw + 66px);
	
	font-size: 14px;
	
	border-top: 1px solid #e6e6e6;
}

html > body > footer > div.contacts
{
	min-width: 250px;
	margin-right: 5%;
}

html > body > footer > div.contacts > a.tel
	{
		display: block;
		
		margin-left: -1ex;
		margin-bottom: 34px;
		
		font-size: 21px;
		text-decoration: none;
		white-space: nowrap;
	}

html > body > footer > div.contacts > p.opening-hours
	{
		margin-bottom: 8px;
		
		line-height: 1.5;
		
		opacity: 0.5;
	}

html > body > footer > div.contacts > p.opening-hours > span
		{
			white-space: nowrap;
		}

html > body > footer > div.contacts > p.copyright
	{
		margin-top: 0;
		
		white-space: nowrap;
	}

/* TODO: Разобраться с сортировкой, убрать screen */

html > body > footer > div.info
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	
	-webkit-flex: auto;
	
	    -ms-flex: auto;
	
	        flex: auto;
	min-width: 240px;
	padding-top: 3px;
}

html > body > footer > div.info > p
	{
		margin-top: 0;
		
		line-height: 1.5;
	}

html > body > footer > div.info > p > a
		{
			text-decoration: none;
		}

html > body > footer > div.info > p.address
		{
			margin-bottom: 17px;
		}

html > body > footer > div.info > p.privacy
		{
			width: 100%;
			margin-bottom: 0;
		}

html > body > footer > div.info > p.privacy > small
			{
				font-size: inherit;
				
				cursor: help;
			}

html > body > header.loading > figure
	{
		opacity: 0;
	}

html > body > header.loading > h1 > svg .logo
			{
				-webkit-animation: blink 2s ease-in-out infinite;
				        animation: blink 2s ease-in-out infinite;
			}

html > body > header
{
	
	display: -webkit-flex;
	
	display: -ms-flexbox;
	
	display: flex;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-align-items: flex-start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	
	padding-top: 250px;
	padding-left: calc(66px + 6.25vw);
	padding-bottom: 60px;
	margin-bottom: 120px;
	
	-webkit-font-smoothing: antialiased;
	
	color: white;
	background: black;
}

html > body > header#commercial
	{
		min-height: 600px;
	}

html > body > header#commercial > h1
		{
			color: white;
			background-image: none;
			-webkit-background-clip: none;
			-webkit-text-fill-color: none;
		}

html > body > header#commercial + main
		{
			padding-left: 70px;
		}

html > body > header.ready > div.slideshow
	{
		opacity: 1;
	}

html > body > header > figure
{
	position: absolute;
	top: 0;
	left: 69px;
	z-index: -2;

	width: 100%;
	height: 100%;
	margin: 0;

	transition: opacity 0.3s ease-in-out;
}

html > body > header > figure::before
	{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 2;

		content: '';

		background: linear-gradient( rgba( 0, 0, 0, 0.35 ), transparent 50%, transparent 75%, rgba( 0, 0, 0, 0.35 ) );
	}

html > body > header > figure > img
	{
		width: 100%;
		height: 100%;

		object-position: right center;
		object-fit: cover;
	}

html > body > header > h1
{
	position: relative;
	
	max-width: 566px;
	margin: auto 0 19px;
	
	font-size: 72px;
	font-weight: 400;
	line-height: 56px;
	letter-spacing: 0.05em;
	text-transform: uppercase;

	text-shadow: 1px 1px 5px rgba( 0, 0, 0, 0.9 );
	text-transform: none;
}

html > body > header > h1 > a
	{
		display: block;
		
		margin-bottom: 40px;
	}

html > body > header > h1 > svg
	{
		display: block;

		width: 100%;
		height: auto;
	}

html > body > header > h1 > svg path
		{
			fill: white;
		}

html > body > header > img
{
	position: absolute;
	top: 0;
	left: 69px;
	z-index: -2;

	width: 100%;
	height: 100%;

	object-position: left bottom;
	object-fit: cover;
}

html > body > main.compilation
{
	padding: 0 0 0 70px;
}

html > body > main > figure.compilation
{
	width: 100%;
	margin: 0;

	font-size: 0;
}

html > body > main > figure.compilation img
	{
		width: 100%;

		font-size: 15px;
	}

html > body > nav.main
{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;

	box-sizing: border-box;
	width: 300px;
	min-height: 100vh;

	background: white;

	box-shadow: 1px 0 2px rgba( 0, 0, 0, 0.2 );

	-webkit-transform: translateX( -230px );

	        transform: translateX( -230px );

	transition: -webkit-transform 0.2s 0.2s;

	transition: transform 0.2s 0.2s;

	transition: transform 0.2s 0.2s, -webkit-transform 0.2s 0.2s;
}

html > body > nav.main > a.online-office
{
	position: relative;
	
	display: block;
	-webkit-align-self: stretch;
	    -ms-flex-item-align: stretch;
	        align-self: stretch;

	padding: 18px 16px 12px;
	margin: 0 32px 24px 50px;
	
	color: #5a9bb7;
	background: #fcfaf8;

	border-radius: 4px;
}

html > body > nav.main > a.online-office:hover > svg
		{
			fill: rgba(7, 43, 49, 0.7);
		}

html > body > nav.main > a.online-office > svg
	{
		fill: #072b31;

		-webkit-transform: fill $time-show $time-open;

		        transform: fill $time-show $time-open;
	}

html > body > nav.main > a.online-office::before, html > body > nav.main > a.online-office::after
	{
		position: absolute;
		
		content: '';
	}

html > body > nav.main > a.online-office::before
	{
		top: 12px;
		right: 12px;
		
		width: 32px;
		height: 32px;

		background: #5a9bb7;

		border-radius: 50%;
	}

html > body > nav.main > a.online-office::after
	{
		top: 24px;
		right: 25px;
		
		width: 6px;
		height: 6px;
		
		border-top: 2px solid #fcfaf8;
		border-right: 2px solid #fcfaf8;

		-webkit-transform: rotate( 45deg );

		        transform: rotate( 45deg );
	}

#lightbox > div.content > div.body > article.commercial
{
	
}

#lightbox > div.content > div.body > article.commercial > div.advantages
{
	margin-bottom: 40px;
}

#lightbox > div.content > div.body > article.commercial > div.advantages > h3
	{
		margin: 0 0 16px;
		
		font: inherit;
		font-weight: 700;
	}

#lightbox > div.content > div.body > article.commercial > div.advantages > ul
	{
		padding: 0;
		margin: 0;

		list-style: none;
	}

#lightbox > div.content > div.body > article.commercial > div.advantages > ul > li
		{
			position: relative;

			padding-left: 32px;
		}

#lightbox > div.content > div.body > article.commercial > div.advantages > ul > li::before
			{
				position: absolute;
				top: 9px;
				left: 0;

				width: 18px;
				height: 2px;

				content: '';

				background: #5a9bb7;
			}

#lightbox > div.content > div.body > form
{
	position: relative;
}

html > body > footer > div.links
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-align-items: flex-end;
	    -ms-flex-align: end;
	        align-items: flex-end;
	
	margin-top: 25px;
}

html > body > footer > div.links > a.domrf
{
	margin-top: 32px;
}

html > body > footer > div.links > div.office
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: center;
	    -ms-flex-align: center;
	        align-items: center;
	
	height: 50px;
}

html > body > footer > div.links > div.office > a
	{
		display: block;
		
		color: #072b31;
		opacity: 0.2;
		
		transition: opacity 0.2s;
	}

html > body > footer > div.links > div.office > a > svg
		{
			display: block;
			
			width: 100%;
			
			fill: currentColor;
		}

html > body > footer > div.links > div.office > a:hover
		{
			opacity: 1;
		}

/*@media screen and ($screen-tablet <= width < $screen-notebook)
	{
		height: auto;
		margin-top: 5px;
		
		> a
		{
			width: 90px;
		}
	}*/

/* TODO: Разобраться с сортировкой, убрать screen */

html > body > footer > div.links > p.creator
{
	margin: 18px 0 0 40px;
	
	white-space: nowrap;
}

html > body > footer > div.links > p.creator > a
	{
		text-decoration: none;
	}

html > body > footer > div.links > ul.social
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	
	padding: 0;
	margin: 0;
}

html > body > footer > div.links > ul.social > li
	{
		display: block;
		
		margin-left: 20px;
	}

html > body > footer > div.links > ul.social > li > a
		{
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-justify-content: center;
			    -ms-flex-pack: center;
			        justify-content: center;
			-webkit-align-items: center;
			    -ms-flex-align: center;
			        align-items: center;
			
			width: 50px;
			height: 50px;
			
			text-decoration: none;
			
			opacity: 0.3;
			background: #072b31;
			
			border-radius: 50%;
			
			transition: opacity 0.2s;
		}

html > body > footer > div.links > ul.social > li > a:hover
			{
				opacity: 1;
			}

/* TODO: Разобраться с сортировкой, убрать screen */

html > body > header > div.copyright
{
	position: absolute;
	right: calc(6.25vw - 4px);
	bottom: 60px;
	
	font-size: 14px;
}

html > body > header > div.copyright > small.copyright
{
	margin-left: 30px;
	
	font: inherit;
}

html > body > header > div.copyright > small.create
{
	font: inherit;
}

html > body > header > div.copyright > small.create > a
	{
		color: inherit;
	}

html > body > header > div.seven-suns
{
	position: absolute;
	top: 60px;
	left: calc(66px + 6.25vw);
	
	font-size: 14px;
	white-space: nowrap;
}

html > body > header > div.seven-suns > a.logo
{
	position: relative;
	top: -3px;
	
	display: inline-block;
	
	vertical-align: middle;
	
	color: inherit;
}

html > body > header > div.seven-suns > a.logo > svg
	{
		display: block;
		
		width: auto;
		height: 40px;
		
		transition: -webkit-transform 0.3s;
		
		transition: transform 0.3s;
		
		transition: transform 0.3s, -webkit-transform 0.3s;
		will-change: transform;
		
		fill: currentColor;
	}

html > body > header > div.seven-suns > a.logo:hover > svg
		{
			-webkit-transform: scale(1.1);
			        transform: scale(1.1);
		}

html > body > header > div.seven-suns > span.subtitle
{
	
	position: relative;
	
	margin-left: 40px;
}

html > body > header > div.seven-suns > span.subtitle::before
	{
	position: absolute;
	top: 50%;
	left: -20px;
	
	width: 1px;
	height: 30px;
	
	content: "";
	pointer-events: none;
	
	opacity: 0.3;
	background: white;
	
	-webkit-transform: translateY(-50%);
	
	        transform: translateY(-50%);
	}

html > body > header > div.slideshow
{
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	
	width: 100%;
	height: 100%;

	opacity: 0;

	transition: opacity 0.3s ease-in-out;
}

html > body > header > div.slideshow > ul.slides
{
	position: relative;
	z-index: -1;
	
	overflow: hidden;
	
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	
	list-style: none;
}

html > body > header > div.slideshow > ul.slides::before
	{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 2;

		content: '';

		background: linear-gradient( rgba( 0, 0, 0, 0.35 ), transparent 50%, transparent 75%, rgba( 0, 0, 0, 0.35 ) );
	}

html > body > header > div.slideshow > ul.slides > li
	{
		position: absolute;
		top: 0;
		left: 0;
		
		display: none;
		overflow: hidden;
		
		width: 100%;
		height: 100%;
		
		pointer-events: none;
	}

html > body > header > div.slideshow > ul.slides > li img
		{
			display: block;
			
			width: 100%;
			height: 100%;
			
			object-fit: cover;
			object-position: right center;
			
			transition: opacity 0.5s ease-out, -webkit-transform 1.1s cubic-bezier(0.23, 0.2, 0.24, 0.96);
			
			transition: opacity 0.5s ease-out, transform 1.1s cubic-bezier(0.23, 0.2, 0.24, 0.96);
			
			transition: opacity 0.5s ease-out, transform 1.1s cubic-bezier(0.23, 0.2, 0.24, 0.96), -webkit-transform 1.1s cubic-bezier(0.23, 0.2, 0.24, 0.96);
			will-change: transform, opacity;
		}

html > body > header > div.slideshow > ul.slides > li.prev
		{
			display: block;
		}

html > body > header > div.slideshow > ul.slides > li.prev img
			{
				opacity: 0.5;
			}

html > body > header > div.slideshow > ul.slides > li.current
		{
			z-index: 1;
			
			display: block;
			
			-webkit-animation-name: slide-from-right;
			
			        animation-name: slide-from-right;
			-webkit-animation-duration: 1.1s;
			        animation-duration: 1.1s;
			-webkit-animation-timing-function: cubic-bezier(0.49, 0.18, 0.24, 0.99);
			        animation-timing-function: cubic-bezier(0.49, 0.18, 0.24, 0.99);
		}

html > body > header > div.slideshow > ul.slides > li.current img
			{
				transition: none;
			}

html > body > header > div.slideshow > ul.slides.backwards > li.current
		{
			-webkit-animation-name: slide-from-left;
			        animation-name: slide-from-left;
		}

html > body > header > div.subtitle
{
	
}

html > body > header > div.subtitle > button.go-down, html > body > header > div.subtitle > a
{
	position: relative;

	display: inline-block;

	padding-right: 32px;

	font: inherit;
	font-weight: 700;
	text-decoration: none;

	cursor: pointer;

	color: white;
	background: none;

	border: none;
}

html > body > header > div.subtitle > button.go-down::before, html > body > header > div.subtitle > a::before
	{
		position: absolute;
		top: 0;
		right: 0;

		width: 12px;
		height: 12px;

		content: '';

		border-top: 2px solid white;
		border-right: 2px solid white;

		-webkit-transform: rotate( 135deg );

		        transform: rotate( 135deg );
	}

html > body > header > div.subtitle > p
{
	box-sizing: border-box;
	max-width: 566px;
	margin: 0 0 37px;
	
	line-height: 1.31;
	font-size: 26px;
	font-weight: 700;
}

html > body > header > div.tel
{
	position: absolute;
	top: 60px;
	right: calc(6.25vw - 4px);
}

html > body > header > div.tel > dl
{
	margin: 0;
	
	font-size: 14px;
	line-height: 1.3;
	text-align: right;
}

html > body > header > div.tel > dl > div
	{
		display: inline-block;
		
		margin: 0 0 0 20px;
	}

html > body > header > div.tel > dl > div > dd
		{
			margin: 0;
		}

html > body > header > div.tel > p.slogan
{
	margin: 15px 0 10px;
	
	font-weight: 700;
	text-align: right;
}

html > body > header > div.video-container
{
	position: absolute;
	top: 128px;
	left: calc(66px + 6.25vw);

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;
	-webkit-align-items: center;
	    -ms-flex-align: center;
	        align-items: center;

	cursor: pointer;
}

html > body > header > div.video-container:hover > div.video-wrapper::before
		{
			border-width: 0;
		}

html > body > header > div.video-container > div.video-full
	{
		display: none;
	}

html > body > main > section > h2
{
	margin-bottom: 0.55em;
}

html > body > main > section > p.goto
{
	margin-top: 2em;
}

html > body > main > section > p.goto > a
	{
		
		display: inline-block;
		
		text-decoration: none;
	}

html > body > main > section > p
{
	
	font-size: 20px;
}

html > body > main > section > p:not(:last-of-type)
	{
		margin-bottom: 1em;
	}

html > body > main > section > p:last-of-type
	{
		margin-bottom: 0;
	}

html > body > main > section > p + p
	{
		font-size: 17px;

		color: #072b31;
	}

html > body > nav.main > a.seven-suns
{
	margin-top: auto;

	font-size: 0;
	text-align: center;

	opacity: 0;

	border-top: 1px solid #e6e6e6;

	transition: opacity 0.2s;
}

html > body > nav.main > a.seven-suns > svg
{
	width: 205px;
	height: 70px;

	fill: #4e585d;
}

html > body > nav.main > div.logo
{
	margin: 40px 47px;
}

html > body > nav.main > div.logo > svg
{
	width: 100%;
	height: auto;

	-webkit-transform: translate( 93px, -5px ) scale( 1.15 );

	        transform: translate( 93px, -5px ) scale( 1.15 );

	transition: -webkit-transform 0.2s;

	transition: transform 0.2s;

	transition: transform 0.2s, -webkit-transform 0.2s;
}

html > body > nav.main > div.logo > svg > g
	{
		transition: opacity 0s;
	}

html > body > nav.main > div.logo > svg > g.text, html > body > nav.main > div.logo > svg > g.other
		{
			opacity: 0;
		}

html > body > nav.main > div.video-container
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: center;
	    -ms-flex-align: center;
	        align-items: center;

	margin: 0 32px 24px 50px;

	cursor: pointer;

	opacity: 0;
}

html > body > nav.main > div.video-container:hover > div.video-wrapper::before
		{
			border-width: 0;
		}

html > body > nav.main > div.video-container > div.video-full
	{
		display: none;
	}

html > body > nav.main > ul.menu
{
	padding: 0;
	margin: 0 47px 40px 47px;

	list-style: none;

	opacity: 0;

	transition: opacity 0s;
}

html > body > nav.main > label
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 2;

	width: 70px;

	cursor: pointer;
}

html > body > nav.main > label::before, html > body > nav.main > label::after
	{
		position: fixed;
		
		pointer-events: none;
		content: '';

		opacity: 0;

		transition: opacity 0.2s;
	}

html > body > nav.main > label::before
	{
		top: 0;
		left: 300px;

		width: 100vw;
		height: 100vh;

		cursor: auto;

		background: rgba( 0, 0, 0, 0.2 );
	}

html > body > nav.main > label::after
	{
		top: 30px;
		left: 330px;

		width: 30px;
		height: 30px;

		cursor: pointer;

		background: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' stroke='white'%3E%3Cpath fill='none' stroke-width='2' d='M2,2 L28,28 M28,2 L2,28'/%3E%3C/svg%3E" ) center center no-repeat;
	}

html > body > nav.main > label > img
{
	display: none;

	width: auto;
	height: 36px;
	margin-top: 5px;
}

html > body > nav.main > label > span
{
	position: relative;
	
	display: block;

	margin-top: 122px;
	
	font-size: 14px;
	text-transform: uppercase;

	-webkit-transform: rotate( -90deg );

	        transform: rotate( -90deg );

	transition: opacity 0.2s;
}

html > body > nav.main > label > span::before
	{
		position: absolute;
		top: -12px;
		right: -2px;

		width: 2px;
		height: 40px;

		content: '';

		background: #1b3c57;

		box-shadow:
			-7px 0 0 0 #1b3c57,
			7px 0 0 0 #1b3c57;
	}

#lightbox > div.content > div.body > article.commercial > div.info
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: flex-start;
	    -ms-flex-align: start;
	        align-items: flex-start;

	margin-bottom: 40px;
}

#lightbox > div.content > div.body > form.progress
{
	pointer-events: none;
}

#lightbox > div.content > div.body > form.progress::before
	{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		
		content: "";
		
		opacity: 0.5;
		background: white;
	}

#lightbox > div.content > div.body > form.progress::after
	{
	display: inline-block;
	
	width: 1em;
	height: 1em;
	
	border: 0 dotted transparent;
	border-top-width: 1px;
	border-top-color: rgba(0, 0, 0, 0.6);
	border-radius: 50%;
	
	-webkit-animation: rotate 0.8s linear infinite;
	
	        animation: rotate 0.8s linear infinite;
		
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		
		margin: auto;
		
		font-size: 40px;
		
		content: "";
	}

#lightbox > div.content > div.body > article.commercial > div.layout
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	
	margin-bottom: 40px;
}

#lightbox > div.content > div.body > form.success > div.success
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	
	-webkit-animation: fade-in 0.8s 1;
	
	        animation: fade-in 0.8s 1;
}

#lightbox > div.content > div.body > form > div.success
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	
	display: none;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-justify-content: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-align-items: center;
	    -ms-flex-align: center;
	        align-items: center;
	
	background: white;
}

#lightbox > div.content > div.body > form > div.success > p
	{
		margin: 0 0 10px;
	}

#lightbox > div.content > div.body > form > div.success > p:first-of-type
	{
		
		padding-top: 130px;
		
		background: url('images/forms/mail-ok.svg') center top no-repeat;
	}

#lightbox > div.content > div.body > form > div.success > p.controls
	{
		margin-top: 20px;
	}

#lightbox > div.content > div.body > form > div.success > p.controls > button
		{
			
			min-width: 220px;
		}

#lightbox > div.content > div.body > form > ul.fields
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	-webkit-justify-content: space-between;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	
	padding: 0;
	margin: 0;
	
	list-style: none;
}

html > body > header > div.slideshow > div.controls
{
	position: absolute;
	right: calc(6.25vw - 4px);
	bottom: 100px;
}

/**
 * Сбросить всё оформление со стандартной кнопки
 */

html > body > header > div.slideshow > div.controls > button
{
	display: inline;
	
	box-sizing: content-box;
	padding: 0;
	margin: 0;
	
	-webkit-appearance: none;
	
	   -moz-appearance: none;
	
	        appearance: none;
	
	background: transparent;
	
	border: none;
	
	position: relative;
	
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	
	vertical-align: middle;
	
	cursor: pointer;
	
	color: inherit;
	
	border: 2px solid;
	border-radius: 50%;
}

html > body > header > div.slideshow > div.controls > button:focus
	{
		outline: none;
	}

html > body > header > div.slideshow > div.controls > button > svg
	{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		
		margin: auto;
		
		fill: currentColor;
	}

html > body > header > div.slideshow > div.controls > button.prev
	{
		margin-right: 20px;
	}

html > body > header > div.slideshow > div.controls > button.prev > svg
		{
			right: 2px;
		}

html > body > header > div.slideshow > div.controls > button.next
	{
		margin-left: 20px;
	}

html > body > header > div.slideshow > div.controls > button.next > svg
		{
			left: 2px;
		}

html > body > header > div.slideshow > div.controls > span.counter
{
	display: inline-block;
	
	min-width: 3.5ex;
	
	font-size: 24px;
	text-align: right;
	vertical-align: middle;
}

html > body > header > div.tel > p.main
{
	margin: 0 0 15px;
	
	white-space: nowrap;
}

html > body > header > div.tel > p.main > a.online-office
{
	text-decoration: none;
	vertical-align: middle;
	
	color: inherit;
}

html > body > header > div.tel > p.main > a.online-office > svg
	{
		vertical-align: middle;
		
		transition: -webkit-transform 0.3s;
		
		transition: transform 0.3s;
		
		transition: transform 0.3s, -webkit-transform 0.3s;
		will-change: transform;
		
		fill: currentColor;
	}

html > body > header > div.tel > p.main > a.tel
{
	
	position: relative;
	
	margin-left: 40px;
	
	font-size: 28px;
	font-weight: 300;
	text-decoration: none;
	vertical-align: middle;
	
	color: inherit;
}

html > body > header > div.tel > p.main > a.tel::before
	{
	position: absolute;
	top: 50%;
	left: -20px;
	
	width: 1px;
	height: 30px;
	
	content: "";
	pointer-events: none;
	
	opacity: 0.3;
	background: white;
	
	-webkit-transform: translateY(-50%);
	
	        transform: translateY(-50%);
	}

html > body > header > div.video-container > div.video-info
{

}

html > body > header > div.video-container > div.video-info > p
{
	margin: 0;
	
	font-size: 20px;
	line-height: 1.5;
}

html > body > header > div.video-container > div.video-info > p.video-title
	{
		font-weight: 400;
	}

html > body > header > div.video-container > div.video-info > p.video-duration
	{
		font-weight: 300;
	}

html > body > header > div.video-container > div.video-wrapper
{
	position: relative;
	
	overflow: hidden;
	
	width: 86px;
	height: 86px;
	margin-right: 16px;

	border-radius: 50%;
}

html > body > header > div.video-container > div.video-wrapper::before, html > body > header > div.video-container > div.video-wrapper::after
	{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		content: '';
	}

html > body > header > div.video-container > div.video-wrapper::before
	{
		z-index: 1;

		border: 6px solid #5a9bb7;
		border-radius: 50%;

		transition: border-width 0.2s;
	}

html > body > header > div.video-container > div.video-wrapper::after
	{
		background: url( 'images/index/play.svg' ) 38px center no-repeat;
	}

html > body > header > div.video-container > div.video-wrapper > video
{
	width: 100%;
	height: 100%;

	object-fit: cover;
}

html > body > main > section.apartments
{

}

html > body > main > section.apartments > a.all
{

	display: block;

	width: 292px;
	margin: 40px auto;

	text-decoration: none;
}

html > body > main > section.commercial
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;

	border-bottom: 1px solid #e6e6e6;
}

html > body > main > section.commercial > h2
{
	
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin-bottom: 40px;

	text-align: center;
}

html > body > main > section.commercial > h2::before
	{
		left: 50%;

		-webkit-transform: translateX( -50% );

		        transform: translateX( -50% );
	}

html > body > main > section.commercial > input[name="view"]
{
	display: none;
}

html > body > main > section.commercial > input[name="view"]:checked#view_list ~ div.apartments, html > body > main > section.commercial > input[name="view"]:checked#view_plan ~ div.plan
		{
			display: block;
		}

html > body > main > section.commercial > input[name="view"]:checked#view_list ~ div.filter > div.view-change > label[for="view_list"], html > body > main > section.commercial > input[name="view"]:checked#view_plan ~ div.filter > div.view-change > label[for="view_plan"]
		{
			display: none;
		}

html > body > main > section.commercial > input[name="view"]:checked#view_list ~ div.filter > div.view-change > button::after
		{
			content: ' на плане';
		}

html > body > main > section.commercial > input[name="view"]:checked#view_plan ~ div.filter > div.view-change > button::after
		{
			content: ' списком';
		}

html > body > main > section.commercial > input[name="view"]:checked#view_plan ~ div.filter > form > ul.fields > li.checkboxes > svg
		{
			pointer-events: none;
			
			opacity: 0.5;
		}

html > body > main > section.advantages
{
	max-width: 1618px;
	padding: 0 calc(6.25vw - 4px);
	margin: -40px auto 120px;
}

html > body > main > section.advantages > input[name="advantages"]
{
	display: none;
}

html > body > main > section.advantages > input[name="advantages"]#advantages_0:checked ~ ul > li:first-child::before, html > body > main > section.advantages > input[name="advantages"]#advantages_0:checked ~ ul > li:first-child::after, html > body > main > section.advantages > input[name="advantages"]#advantages_1:checked ~ ul > li:nth-child( 2 )::before, html > body > main > section.advantages > input[name="advantages"]#advantages_1:checked ~ ul > li:nth-child( 2 )::after, html > body > main > section.advantages > input[name="advantages"]#advantages_2:checked ~ ul > li:last-child::before, html > body > main > section.advantages > input[name="advantages"]#advantages_2:checked ~ ul > li:last-child::after
		{
			width: 600px;
			height: 600px;

			background: rgba(27, 60, 87, 0.45);
		}

html > body > main > section.advantages > input[name="advantages"]#advantages_0:checked ~ ul > li:first-child > p, html > body > main > section.advantages > input[name="advantages"]#advantages_1:checked ~ ul > li:nth-child( 2 ) > p, html > body > main > section.advantages > input[name="advantages"]#advantages_2:checked ~ ul > li:last-child > p
		{
			opacity: 1;
		}

html > body > main > section.environment.negative::before
	{
		content: none;
	}

html > body > main > section.environment.negative > div.slideshow > a, html > body > main > section.environment.negative > div.illustration > a
		{
			position: absolute;
			top: 79px;
			right: 24px;
			z-index: 2;

			padding: 8px 48px 8px 16px;

			font-size: 16px;
			font-weight: 700;
			line-height: 1.5;
			text-decoration: none;

			color: white;

			background: url( 'images/download.svg' ) calc(100% - 8px) center no-repeat rgba(0, 0, 0, 0.2);
			-webkit-backdrop-filter: blur( 20px );
			        backdrop-filter: blur( 20px );

			border-radius: 68px;
		}

html > body > main > section.environment.negative > div.slideshow::before, html > body > main > section.environment.negative > div.illustration::before
		{
			content: none;
		}

html > body > main > section.environment.negative > div.slideshow::after, html > body > main > section.environment.negative > div.illustration::after
		{
			right: -85px;
			left: auto;
		}

html > body > main > section.environment.negative > div.slideshow > ul.slides, html > body > main > section.environment.negative > div.illustration > ul.slides
		{
			margin-left: auto;
		}

html > body > main > section.environment.negative > div.slideshow > div.sections > section, html > body > main > section.environment.negative > div.illustration > div.sections > section
			{
				right: calc(58vw - 35px);
				left: 0;
			}

html > body > main > section.environment.negative > div.slideshow > div.sections > section, html > body > main > section.environment.negative > div.slideshow > div.sections > section > p, html > body > main > section.environment.negative > div.illustration > div.sections > section, html > body > main > section.environment.negative > div.illustration > div.sections > section > p
				{
					color: #1b3c57 !important;
				}

html > body > main > section.environment.negative > div.slideshow > div.controls, html > body > main > section.environment.negative > div.illustration > div.controls
		{
			right: auto;
			left: 80px;
		}

html > body > main > section.environment.negative > div.slideshow > div.controls > button, html > body > main > section.environment.negative > div.illustration > div.controls > button
			{
				color: #1b3c57;
				background: transparent;

				border: 2px solid #1b3c57;
			}

html > body > main > section.environment.negative > div.slideshow > div.controls > span.counter, html > body > main > section.environment.negative > div.illustration > div.controls > span.counter
			{
				color: #1b3c57;
			}

html > body > main > section.environment
{
	position: relative;
	
	padding-top: 170px;
}

html > body > main > section.environment::before
	{
		position: absolute;
		bottom: 20px;
		left: calc(50% - 460px);
		z-index: 1;

		display: block;

		width: 201px;
		height: 202px;

		content: '';
	}

html > body > main > section.environment > h2, html > body > main > section.environment > p
{
	max-width: 800px;
	margin-right: auto;
	margin-left: auto;
	
	text-align: center;
}

html > body > main > section.environment > h2
{
	
	background-position-x: center;
}

html > body > main > section.component.dark
{
	position: relative;
	z-index: 1;
	
	padding-top: 100px;
	padding-bottom: 100px;
}

html > body > main > section.component.dark::before
	{
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(50% - 50vw);
		z-index: -1;

		width: 100vw;

		content: '';

		background: url( 'images/pattern.svg' ) #1b3c57;
	}

html > body > main > section.component.dark > figure::before
	{
		content: none;
	}

html > body > main > section.component.dark > div.info > h2, html > body > main > section.component.dark > div.info > p
		{
			color: white;
		}

html > body > main > section.component.dark > div.info > h2 > strong, html > body > main > section.component.dark > div.info > p > strong
			{
				color: white;
			}

html > body > main > section.component
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	
	max-width: 1618px;
	padding: 0 calc(6.25vw - 4px);
	margin: 0 auto 120px;
}

html > body > main > section.component:first-child > div.info > p:first-of-type
			{
				font-size: 24px;
				line-height: 1.33;
			}

html > body > main > section.component.with-svg > figure::before
			{
				content: none;
			}

html > body > main > section.component.with-svg > figure img
			{
				width: auto;
				height: 750px;

				border-radius: 50%;
			}

html > body > main > section.component.with-svg > figure > picture
			{
				width: 100%;
			}

html > body > main > section.component.parking > div.info > ul > li:first-child::after
		{
			content: url( 'images/index/parking_1.svg' );
		}

html > body > main > section.component.parking > div.info > ul > li:nth-child( 2 )::after
		{
			content: url( 'images/index/parking_2.svg' );
		}

html > body > main > section.component.parking > div.info > ul > li::after
		{
			display: block;

			width: 88px;
			height: 60px;
			margin-top: 20px;
		}

html > body > main > section.component.small > figure
	{
		-webkit-flex-grow: 1;
		    -ms-flex-positive: 1;
		        flex-grow: 1;
		margin-right: 97px;
	}

html > body > main > section.component.small > figure::before
		{
			width: 100%;
		}

html > body > main > section.component.small > figure img
		{
			width: 100%;
			height: auto;
		}

html > body > main > section.component.small > div.info
	{
		width: calc(31.25vw - 22px);
	}

html > body > main > section.component.small > div.info:not(:first-child)
		{
			-webkit-flex-grow: 0;
			    -ms-flex-positive: 0;
			        flex-grow: 0;
		}

html > body > main > section.features
{
	position: relative;
	
	margin: 150px auto;
}

html > body > main > section.features > div.markup
{
	margin-bottom: 32px;
}

html > body > main > section.features > div.markup > ul
	{
		padding: 0;
		margin: 0;

		list-style: none;
	}

html > body > main > section.features > div.markup > ul > li
		{
			position: relative;

			padding-left: 32px;
		}

html > body > main > section.features > div.markup > ul > li:not(:last-child)
			{
				margin-bottom: 12px;
			}

html > body > main > section.features > div.markup > ul > li::before
			{
				position: absolute;
				top: 9px;
				left: 0;

				width: 18px;
				height: 2px;

				content: '';

				background: #5a9bb7;
			}

html > body > main > section.features > figure
{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;

	width: calc(37.5vw - 26px);
	margin: 0;
}

html > body > main > section.features > figure > img
	{
		width: 100%;
		height: 100%;

		object-fit: cover;
	}

html > body > main > section.features > h2, html > body > main > section.features > p, html > body > main > section.features > h3, html > body > main > section.features > ul, html > body > main > section.features > div.markup
{
	max-width: 600px;
	padding-left: 475px;
	margin-right: auto;
	margin-left: auto;
}

html > body > main > section.features > h2::before
	{
		left: 820px;
	}

html > body > main > section.features > h3
{
	margin: 28px auto 16px;

	font-size: 18px;
}

html > body > main > section.features > p
{
	margin-bottom: 45px;
}

html > body > main > section.features > ul
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	
	list-style: none;
}

html > body > main > section.features > ul > li
	{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-align-items: center;
		    -ms-flex-align: center;
		        align-items: center;

		width: 50%;

		font-weight: 700;
	}

html > body > main > section.features > ul > li:not(:nth-last-child( -n + 2 ))
		{
			margin-bottom: 40px;
		}

html > body > main > section.features > ul > li > img
		{
			width: 80px;
			height: 80px;
			margin: 0 20px 0 12px;

			object-fit: content;
		}

html > body > main > section.promo-form
{
	position: relative;
	z-index: 1;
	
	padding: 40px calc(6.25vw - 4px) 40px;
	
	color: white;
	background: url( 'images/pattern.svg' ) #1b3c57;
}

html > body > main > section.promo-form::after
	{
		display: table;
		clear: both;

		content: '';
	}

html > body > main > section.promo-form > div.timer > p
	{
		margin: 0 0 8px;
		
		font-size: 15px;
		line-height: 1.47;

		opacity: 0.6;
	}

html > body > main > section.promo-form > div.timer > ul
	{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		
		padding: 0;
		margin: 0;

		list-style: none;
	}

html > body > main > section.promo-form > div.timer > ul > li
		{
			

			color: #5a9bb7;
		}

html > body > main > section.promo-form > div.timer > ul > li:not(:last-child) > strong::after
				{
					content: ':';
				}

html > body > main > section.promo-form > div.timer > ul > li > strong
			{
				display: block;

				margin-bottom: -12px;
				
				font-size: 54px;
				font-weight: 700;
				font-variant-numeric: tabular-nums;
				line-height: 1.48;
				letter-spacing: -0.05em;
			}

html > body > main > section.promo-form > div.timer > ul > li > span
			{
				margin-left: 4px;
				
				font-size: 13px;
				font-weight: 300;
				line-height: 1.5;
				letter-spacing: 0;

				color: white;
			}

html > body > main > section.promo-form > h1
{
	margin: 0 0 20px;

	font-size: 44px;
	font-weight: 400;
	line-height: 1.09;
}

html > body > main > section.promo-form > p:last-of-type
	{
		margin-bottom: 20px;
	}

html > body > main > section.subscribe
{
	position: relative;
	
	padding: 144px calc(6.25vw - 4px) 107px;
	
	color: white;
	background: url( 'images/pattern.svg' ) #1b3c57;
}

html > body > main > section.subscribe > h2, html > body > main > section.subscribe > p
{
	position: relative;
	z-index: 1;
	
	max-width: 620px;
	margin-right: auto;
	margin-left: auto;
	
	font-weight: 300;
	text-align: center;
	
	opacity: 1;
	color: inherit;
}

html > body > main > section.subscribe > h2
{
	font-size: 44px;
	font-weight: 700;
	line-height: 1.09;

	margin: 0 auto 24px;
}

html > body > main > section.subscribe > img
{
	position: absolute;
	right: 0;
	bottom: 0;
}

html > body > main > section.subscribe > p
{
	font-size: 22px;
	line-height: 1.45;
}

html > body > main > section.subscribe > p > strong
	{
		font-weight: 700;

		color: white;
	}

html > body > main > section.your-house
{
	position: relative;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;
	-webkit-justify-content: space-between;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	
	max-width: 1618px;
	padding: 0 calc(3.13vw - 2px);
	margin: 0 auto 120px;
}

html > body > main > section.your-house::before
	{
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(50% - 50vw);
		z-index: -1;

		width: 100vw;

		content: '';

		background-image:
			url( 'images/noise.png' ),
			url( 'images/pattern-darker.svg' );
		background-color: #fcfaf8;
	}

html > body > nav.main > div.video-container > div.video-info
{

}

html > body > nav.main > div.video-container > div.video-info > p
{
	margin: 0;
	
	font-size: 14px;
	line-height: 1.5;

	color: #072b31;
}

html > body > nav.main > div.video-container > div.video-info > p.video-title
	{
		font-weight: 400;
	}

html > body > nav.main > div.video-container > div.video-info > p.video-duration
	{
		font-weight: 300;
	}

html > body > nav.main > div.video-container > div.video-wrapper
{
	position: relative;
	
	overflow: hidden;
	
	-webkit-flex-shrink: 0;
	
	    -ms-flex-negative: 0;
	
	        flex-shrink: 0;
	width: 60px;
	height: 60px;
	margin-right: 16px;

	border-radius: 50%;
}

html > body > nav.main > div.video-container > div.video-wrapper::before, html > body > nav.main > div.video-container > div.video-wrapper::after
	{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		content: '';
	}

html > body > nav.main > div.video-container > div.video-wrapper::before
	{
		z-index: 1;

		border: 6px solid #5a9bb7;
		border-radius: 50%;

		transition: border-width 0.2s;
	}

html > body > nav.main > div.video-container > div.video-wrapper::after
	{
		background: url( 'images/index/play.svg' ) 25px center no-repeat;
	}

html > body > nav.main > div.video-container > div.video-wrapper > video
{
	width: 100%;
	height: 100%;

	object-fit: cover;
}

html > body > nav.main > ul.menu > li
{
	margin-right: -70px;
	
	line-height: 1;
}

html > body > nav.main > ul.menu > li:hover
	{
		opacity: 0.7;
	}

html > body > nav.main > ul.menu > li:not(.secondary)
	{
		margin-bottom: 20px;

		font-size: 24px;
	}

html > body > nav.main > ul.menu > li:not(.secondary) > a
		{
			font-weight: 700;
		}

html > body > nav.main > ul.menu > li:not(:first-child)
	{
		pointer-events: none;
	}

html > body > nav.main > ul.menu > li:first-child > a::before
		{
			position: absolute;
			top: 8px;
			right: 0;
			z-index: 1;

			width: 70px;
			height: 70px;

			content: '';
		}

html > body > nav.main > ul.menu > li.secondary
	{
		margin: 0 0 14px 20px;

		font-size: 14px;
	}

html > body > nav.main > ul.menu > li.secondary + li:not(.secondary)
		{
			margin-top: 25px;
		}

html > body > nav.main > ul.menu > li.current
	{
		pointer-events: none;
	}

html > body > nav.main > ul.menu > li.current > a
		{
			color: #5a9bb7;
		}

html > body > nav.main > ul.menu > li > a
{
	text-decoration: none;
	
	color: #072b31;
}

#lightbox > div.content > div.body > article.commercial > div.info > ul.properties
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	
	width: 280px;
	padding: 0;
	margin: 0;

	list-style: none;
}

#lightbox > div.content > div.body > article.commercial > div.info > figure
{
	-webkit-flex-grow: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
	padding-right: 40px;
	margin: 0;
}

#lightbox > div.content > div.body > article.commercial > div.info > figure > figcaption
{
	margin: 0 0 24px;
	
	font-size: 28px;
	font-weight: 700;
}

#lightbox > div.content > div.body > article.commercial > div.info > figure > svg > path
	{
		fill: rgba(0, 0, 0, 0.1);
		stroke: rgb( 212, 212, 212 );
	}

#lightbox > div.content > div.body > article.commercial > div.info > figure > svg > path.current
		{
			fill: #5a9bb7;
			stroke: rgba(90, 155, 183, 0.5);
		}

#lightbox > div.content > div.body > article.commercial > div.info > figure > svg > text
	{
		pointer-events: none;
	}

#lightbox > div.content > div.body > article.commercial > div.info > figure > svg > text.section
		{
			font-size: 11px;

			fill: rgb( 160, 160, 160 );
		}

#lightbox > div.content > div.body > article.commercial > div.info > figure > svg > text.section.current
			{
				fill: white;
			}

#lightbox > div.content > div.body > article.commercial > div.layout > figure
{
	height: 335px;
	margin: 0;
}

#lightbox > div.content > div.body > article.commercial > div.layout > figure.layout
	{
		max-width: 50%;
		padding-right: 40px;
		margin-right: 40px;

		border-right: 1px solid #e6e6e6;
	}

#lightbox > div.content > div.body > article.commercial > div.layout > figure.layout:hover > img.zoom
			{
				opacity: 1;
			}

#lightbox > div.content > div.body > article.commercial > div.layout > figure > figcaption
{
	margin-bottom: 8px;
	
	font-size: 28px;
	font-weight: 700;
}

#lightbox > div.content > div.body > article.commercial > div.layout > figure > img
{
	object-fit: contain;
}

#lightbox > div.content > div.body > article.commercial > div.layout > figure > img:not(.zoom)
	{
		max-width: 100%;
		height: calc(100% - 40px);
	}

#lightbox > div.content > div.body > article.commercial > div.layout > figure > img.zoom
	{
		position: absolute;
		top: 40;
		left: calc(6.25vw - 4px);
		z-index: 1;

		box-sizing: border-box;
		width: 80%;
		height: 80vh;
		padding: 20px;

		pointer-events: none;

		opacity: 0;
		background: white;

		border-radius: 8px;

		box-shadow: 0 4px 16px 4px rgba(0, 0, 0, 0.1);

		transition: opacity 0.3s;
	}

#lightbox > div.content > div.body > article.commercial > div.layout > figure > svg
{
	width: 100%;
	height: 100%;
}

#lightbox > div.content > div.body > article.commercial > div.layout > figure > svg > path
	{
		fill: rgba(90, 155, 183, 0.25);
		stroke: #5a9bb7;
		stroke-width: 20px;
	}

#lightbox > div.content > div.body > form > ul.fields > li.checkbox
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: center;
	    -ms-flex-align: center;
	        align-items: center;
	
	-webkit-order: 1;
	
	    -ms-flex-order: 1;
	
	        order: 1;
	max-width: 16em;
	margin-top: 20px;
}

#lightbox > div.content > div.body > form > ul.fields > li.note
{
	font-size: 14px;
}

#lightbox > div.content > div.body > form > ul.fields > li
{
	display: block;
	
	margin: 0 0 20px;
}

#lightbox > div.content > div.body > form > ul.fields > li:not(.controls):not(.checkbox)
{
	width: 100%;
}

#lightbox > div.content > div.body > form > ul.fields > li > input:not([type="checkbox"]):not([type="radio"])
	{
		
		display: block;
		
		width: 100%;
	}

#lightbox > div.content > div.body > form > ul.fields > li > textarea
{
	
	width: 100%;
}

html > body > main > section.apartments > ul
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	
	padding: 0;
	margin: 0;

	list-style: none;
}

html > body > main > section.commercial > div.filter
{
	
	-webkit-flex-direction: row;
	
	    -ms-flex-direction: row;
	
	        flex-direction: row;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	-webkit-justify-content: flex-start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-align-items: flex-start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	-webkit-align-content: flex-start;
	    -ms-flex-line-pack: start;
	        align-content: flex-start;
	overflow: hidden;
	
	padding-top: 36px;
	padding-right: calc(6.25vw - 4px);
	padding-bottom: 20px;

	color: #334554;
	background: none;

	border-top: 1px solid #e6e6e6;
	border-right: 1px solid #e6e6e6;
}

html > body > main > section.commercial > div.filter > h3
{
	
	-webkit-flex-grow: 2;
	
	    -ms-flex-positive: 2;
	
	        flex-grow: 2;
	margin-right: 60px;
	margin-bottom: 24px;
}

html > body > main > section.commercial > div.plan
{
	position: relative;
	
	display: none;
	
	width: calc(100% - 31.25vw - 48px);

	border-top: 1px solid #e6e6e6;
}

html > body > main > section.commercial > div.plan:not([data-building]) > svg
		{
			width: 100%;
			height: 100%;
		}

html > body > main > section.commercial > div.plan:not([data-building]) > svg g#zoom-1
			{
				display: none;
			}

html > body > main > section.commercial > div.plan:not([data-building]) > div.tooltip.mark
			{
				-webkit-transform: translate( -16px, 32px );
				        transform: translate( -16px, 32px );
			}

html > body > main > section.commercial > div.plan:not([data-building]) > div.tooltip.mark.left
				{
					-webkit-transform: translate( calc(-100% + 44px), 32px );
					        transform: translate( calc(-100% + 44px), 32px );
				}

html > body > main > section.commercial > div.plan:not([data-building]) > div.tooltip.building
			{
				-webkit-transform: translate( 80px, 0 );
				        transform: translate( 80px, 0 );
			}

html > body > main > section.commercial > div.plan:not([data-building]) > div.buttons > button.zoom-out
		{
			pointer-events: none;

			background: rgb(102, 124, 142);
		}

html > body > main > section.commercial > div.plan[data-building]
	{
		overflow: hidden;
	}

html > body > main > section.commercial > div.plan[data-building] > svg
		{
			width: 500%;
			height: auto;

			cursor: -webkit-grab;

			cursor: grab;
		}

html > body > main > section.commercial > div.plan[data-building] > svg.grabbing
			{
				cursor: -webkit-grabbing;
				cursor: grabbing;
			}

html > body > main > section.commercial > div.plan[data-building] > svg g#zoom-0
			{
				display: none;
			}

html > body > main > section.commercial > div.plan[data-building] > div.tooltip.mark:not(.transport)
				{
					-webkit-transform: translate( -4px, 72px );
					        transform: translate( -4px, 72px );
				}

html > body > main > section.commercial > div.plan[data-building] > div.tooltip.mark:not(.transport).left
					{
						-webkit-transform: translate( calc(-100% + 40px), 72px );
						        transform: translate( calc(-100% + 40px), 72px );
					}

html > body > main > section.commercial > div.plan[data-building] > div.tooltip.mark.transport
				{
					-webkit-transform: translate( -4px, 40px );
					        transform: translate( -4px, 40px );
				}

html > body > main > section.commercial > div.plan[data-building] > div.tooltip.mark.transport.left
					{
						-webkit-transform: translate( calc(-100% + 40px), 40px );
						        transform: translate( calc(-100% + 40px), 40px );
					}

html > body > main > section.commercial > div.plan[data-building] > div.tooltip.room
			{
				-webkit-transform: translate( 8px, 0 );
				        transform: translate( 8px, 0 );
			}

html > body > main > section.commercial > div.plan[data-building] > div.buttons > button.zoom-in
		{
			pointer-events: none;

			background: rgb(102, 124, 142);
		}

html > body > main > section.commercial > div.plan > svg
{
	position: absolute;
	top: 0;
	left: 0;
}

html > body > main > section.commercial > div.plan > svg g[data-title]
	{
		cursor: pointer;
	}

html > body > main > section.commercial > div.plan > svg g[data-title]:hover [fill="#bab1c4"], html > body > main > section.commercial > div.plan > svg g[data-title]:hover [fill="#BAB1C4"]
			{
				fill: white;
			}

html > body > main > section.commercial > div.plan > svg g[data-title]:hover [fill="#fff"], html > body > main > section.commercial > div.plan > svg g[data-title]:hover [fill="#FFFFFF"]
			{
				fill: #1b3c57;
			}

html > body > main > section.commercial > div.plan > svg g#buildings-0 g[id*="BLD-"]:not(.disabled)
			{
				cursor: pointer;
			}

html > body > main > section.commercial > div.plan > svg g#buildings-0 g[id*="BLD-"]:not(.disabled):hover polygon
					{
						fill: rgba(90, 155, 183, 0.7);
					}

html > body > main > section.commercial > div.plan > svg g#buildings-0 g[id*="BLD-"].disabled
			{
				pointer-events: none;
			}

html > body > main > section.commercial > div.plan > svg g#buildings-0 g[id*="BLD-"].disabled polygon
				{
					display: none;
				}

html > body > main > section.commercial > div.plan > svg g#buildings-1 g[id*="B-"] g[id*="COM-"]:not(.disabled)
			{
				cursor: pointer;
			}

html > body > main > section.commercial > div.plan > svg g#buildings-1 g[id*="B-"] g[id*="COM-"]:not(.disabled) path, html > body > main > section.commercial > div.plan > svg g#buildings-1 g[id*="B-"] g[id*="COM-"]:not(.disabled) polygon
				{
					fill: #bab1c4;
				}

html > body > main > section.commercial > div.plan > svg g#buildings-1 g[id*="B-"] g[id*="COM-"]:not(.disabled):hover path, html > body > main > section.commercial > div.plan > svg g#buildings-1 g[id*="B-"] g[id*="COM-"]:not(.disabled):hover polygon
					{
						fill: #5a9bb7;
					}

html > body > main > section.commercial > div.apartments
{
	display: none;
	
	width: calc(100% - 31.25vw + 22px);
}

html > body > main > section.advantages > ul
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	
	padding: 0;
	margin: 0;

	list-style: none;
}

html > body > main > section.environment > div.slideshow, html > body > main > section.environment > div.illustration
{
	position: relative;
	
	margin: 50px calc(6.25vw - 4px) 0;

	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
}

html > body > main > section.environment > div.slideshow.scrolled-to > div.sections > section > h3, html > body > main > section.environment > div.illustration.scrolled-to > div.sections > section > h3
			{
				opacity: 1;
			}

html > body > main > section.environment > div.slideshow.scrolled-to > div.sections > section > p, html > body > main > section.environment > div.illustration.scrolled-to > div.sections > section > p
			{
				color: white;

				-webkit-transform: translateY( 0 );

				        transform: translateY( 0 );
			}

html > body > main > section.environment > div.slideshow::before, html > body > main > section.environment > div.illustration::before
	{
		position: absolute;
		top: 0;
		right: calc(50% - 50vw);
		bottom: 0;

		display: block;

		width: calc(50vw + 350px);

		content: '';

		background: url( 'images/pattern.svg' ) #1b3c57;
	}

html > body > main > section.environment > div.slideshow[data-count="1"], html > body > main > section.environment > div.illustration[data-count="1"]
	{
		pointer-events: none;
	}

html > body > main > section.environment > div.slideshow[data-count="1"] > div.controls, html > body > main > section.environment > div.illustration[data-count="1"] > div.controls
		{
			display: none;
		}

html > body > main > section.component > div.info:not(:first-child)
	{
		width: calc(50% - 72px);
	}

html > body > main > section.component > div.info:first-child
	{
		width: 35.5%;
		margin-right: 97px;
	}

html > body > main > section.component > div.info > h2.slim
	{
		font-weight: 400;
	}

html > body > main > section.component > div.info > p
{
	margin: 0;
}

html > body > main > section.component > div.info > p:not(:last-child)
	{
		margin-bottom: 16px;
	}

html > body > main > section.component > div.info > p:not(:first-of-type)
	{
		font-size: 20px;
		line-height: 1.4;
	}

html > body > main > section.component > div.info > p:first-of-type
	{
		font-size: 22px;
		font-weight: 700;
		line-height: 1.45;
	}

html > body > main > section.component > div.info > p.goto
	{
		margin-top: 32px;
	}

html > body > main > section.component > div.info > p > a
	{
		position: relative;

		padding-right: 36px;
		
		font-size: 17px;
		font-weight: 700;
		text-decoration: none;

		color: #aea69b;
	}

html > body > main > section.component > div.info > p > a:hover::before
			{
				right: -11px;
			}

html > body > main > section.component > div.info > p > a:hover::after
			{
				right: -12px;

				width: 36px;
			}

html > body > main > section.component > div.info > p > a::before, html > body > main > section.component > div.info > p > a::after
		{
			position: absolute;
			top: 0;
			bottom: 0;
	
			margin: auto;
			
			content: '';
		}

html > body > main > section.component > div.info > p > a::before
		{
			right: 1px;

			width: 16px;
			height: 16px;

			border-top: 2px solid #aea69b;
			border-right: 2px solid #aea69b;

			-webkit-transform: rotate( 45deg );

			        transform: rotate( 45deg );

			transition: right 0.25s;
		}

html > body > main > section.component > div.info > p > a::after
		{
			right: 0;

			width: 24px;
			height: 2px;

			background: #aea69b;

			transition:
				right 0.25s,
				width 0.25s;
		}

html > body > main > section.component > div.info > p > strong
	{
		color: #5a9bb7;
	}

html > body > main > section.component > div.info > ul.transport
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	clear: both;

	padding: 0;
	margin: 112px 0 0;

	list-style: none;
}

html > body > main > section.component > div.info > ul.transport > li
	{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		
		box-sizing: border-box;
		padding-right: 5%;
		width: 33.33%;

		font-size: 12px;
		text-transform: uppercase;
	}

html > body > main > section.component > div.info > ul.transport > li:not(:nth-child( -n + 3 ))
		{
			margin-top: 28px;
		}

html > body > main > section.component > div.info > ul.transport > li:first-child, html > body > main > section.component > div.info > ul.transport > li:nth-child( 2 ), html > body > main > section.component > div.info > ul.transport > li:nth-child( 3 )
		{
			position: relative;
		}

html > body > main > section.component > div.info > ul.transport > li:first-child > strong, html > body > main > section.component > div.info > ul.transport > li:nth-child( 4 ) > strong
			{
				color: #c3beba;
			}

html > body > main > section.component > div.info > ul.transport > li:nth-child( 2 )::before, html > body > main > section.component > div.info > ul.transport > li:nth-child( 3 )::before
			{
				content: url( 'images/index/driving.svg' );
			}

html > body > main > section.component > div.info > ul.transport > li:first-child::before
			{
				content: url( 'images/index/walking.svg' );
			}

html > body > main > section.component > div.info > ul.transport > li::before
		{
			position: absolute;
			top: -16px;
			left: 0;

			-webkit-transform: translateY( -100% );

			        transform: translateY( -100% );
		}

html > body > main > section.component > div.info > ul.transport > li > strong
		{
			margin-right: 12px;
			
			font-size: 52px;
			font-weight: 400;
			line-height: 0.9;
		}

html > body > main > section.component > div.slideshow
{
	position: relative;
	
	float: right;

	-webkit-flex-grow: 1;

	    -ms-flex-positive: 1;

	        flex-grow: 1;
	height: calc(30vw - 21px);
	max-height: 464px;
}

html > body > main > section.component > figure img
{
	width: 100%;
	height: auto;
}

html > body > main > section.component > figure
{
	position: relative;
	
	display: -webkit-flex;
	
	display: -ms-flexbox;
	
	display: flex;
	-webkit-justify-content: flex-end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	-webkit-align-items: flex-start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	
	width: 50%;
	margin: 0 72px 0 0;
}

html > body > main > section.component > figure::before
	{
		position: absolute;
		bottom: 0;
		right: 0;

		width: 692px;
		height: 100px;

		content: '';

		-webkit-transform: translateY( 100% );

		        transform: translateY( 100% );
	}

html > body > main > section.component > ul
{
	position: relative;
	
	display: grid;
	grid-template-columns: repeat( 2, -webkit-max-content );
	grid-template-columns: repeat( 2, max-content );
	-webkit-column-gap: 56px;
	   -moz-column-gap: 56px;
	        column-gap: 56px;
	row-gap: 40px;
	align-self: flex-start;
	
	padding: 0;
	margin: 0 auto;

	list-style: none;
}

html > body > main > section.promo-form > form
{
	position: relative;
	z-index: 1;

	float: right;

	width: calc(37.5vw - 26px);
	margin-left: calc(12.5vw - 9px);
}

html > body > main > section.promo-form > form > h2
{
	margin: 0 0 20px;
}

html > body > main > section.subscribe > form
{
	position: relative;
	
	max-width: 1150px;
	margin: 40px auto 0;
}

html > body > main > section.your-house > div
{

}

#lightbox > div.content > div.body > article.commercial > div.info > ul.properties > li
{
	box-sizing: border-box;
}

#lightbox > div.content > div.body > article.commercial > div.info > ul.properties > li:not(.title)
	{
		color: rgba(51, 69, 84, 0.5);
	}

#lightbox > div.content > div.body > article.commercial > div.info > ul.properties > li:not(.price):not(.title)
	{
		margin-top: auto;
	}

#lightbox > div.content > div.body > article.commercial > div.info > ul.properties > li.title, #lightbox > div.content > div.body > article.commercial > div.info > ul.properties > li.price
	{
		width: 100%;
	}

#lightbox > div.content > div.body > article.commercial > div.info > ul.properties > li.title
	{
		margin-bottom: 6px;
		
		font-size: 28px;
		font-weight: 700;
	}

#lightbox > div.content > div.body > article.commercial > div.info > ul.properties > li.price
	{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-align-items: center;
		    -ms-flex-align: center;
		        align-items: center;
		
		margin-top: 12px;
	}

#lightbox > div.content > div.body > article.commercial > div.info > ul.properties > li > p
{
	display: inline-block;
	
	margin: 0 16px 0 0;
}

#lightbox > div.content > div.body > article.commercial > div.info > ul.properties > li > strong
{
	margin-right: 12px;
	
	font-size: 28px;
	font-weight: 700;
	
	color: #5a9bb7;
}

#lightbox > div.content > div.body > form > ul.fields > li.controls
{
	-webkit-flex-grow: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
	margin-top: 20px;
	margin-right: 40px;
}

#lightbox > div.content > div.body > form > ul.fields > li.controls > button
{
	width: 100%;
	max-width: 220px;
}

html > body > main > section.apartments > ul > li
{
	box-sizing: border-box;
	width: 25%;
	margin-top: -1px;

	border: 1px solid #e6e6e6;

	transition: box-shadow 0.2s;
}

html > body > main > section.apartments > ul > li:not(:nth-child( 4n - 3 ))
	{
		border-left: none;
	}

html > body > main > section.apartments > ul > li:hover
	{
		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
	}

html > body > main > section.commercial > div.filter > div.view-change
{
	position: relative;
	
	width: 100%;
	margin-bottom: 36px;
}

html > body > main > section.commercial > div.filter > div.view-change > button
{

	width: 100%;
}

html > body > main > section.commercial > div.filter > div.view-change > label
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	cursor: pointer;
}

html > body > main > section.commercial > div.filter > div.view-change > label:hover ~ button
		{
			color: white;
			background-color: #c3beba;
		}

html > body > main > section.commercial > div.filter > div.button
{
	margin-top: 40px;
}

html > body > main > section.commercial > div.filter > div.button > details
{
	padding: 20px;
	
	background: #c3beba;

	border-radius: 8px;
}

html > body > main > section.commercial > div.filter > div.button > details > summary
	{
		cursor: pointer;
		-webkit-appearance: none;
		   -moz-appearance: none;
		        appearance: none;

		list-style: none;

		color: white;
	}

html > body > main > section.commercial > div.filter > div.button > details > summary::-webkit-details-marker
		{
			display: none;
		}

html > body > main > section.commercial > div.filter > div.button > details > summary > strong
		{
			display: block;

			margin-bottom: 12px;
			
			font-size: 22px;
			
			color: #5a9bb7;
		}

html > body > main > section.commercial > div.filter > div.button > details > summary ~ *
		{
			display: none;
		}

html > body > main > section.commercial > div.filter > form
{
	width: 100%;
}

html > body > main > section.commercial > div.plan > div.buttons
{
	position: absolute;
	top: 50%;
	right: 36px;

	-webkit-transform: translateY( -50% );

	        transform: translateY( -50% );
}

html > body > main > section.commercial > div.plan > div.buttons > button
{
	position: relative;
	
	display: block;
	
	width: 40px;
	height: 40px;

	cursor: pointer;

	background: #1b3c57;

	border: none;
	border-radius: 50%;
}

html > body > main > section.commercial > div.plan > div.buttons > button:not(:last-child)
	{
		margin-bottom: 8px;
	}

html > body > main > section.commercial > div.plan > div.buttons > button.zoom-in::after
		{
			content: '';

			-webkit-transform: translate( -50%, -50% ) rotate( 90deg );

			        transform: translate( -50%, -50% ) rotate( 90deg );
		}

html > body > main > section.commercial > div.plan > div.buttons > button::before, html > body > main > section.commercial > div.plan > div.buttons > button::after
	{
		position: absolute;
		top: 50%;
		left: 50%;
		
		width: 16px;
		height: 2px;

		background: white;

		-webkit-transform: translate( -50%, -50% );

		        transform: translate( -50%, -50% );
	}

html > body > main > section.commercial > div.plan > div.buttons > button::before
	{
		content: '';
	}

html > body > main > section.commercial > div.plan > div.tooltip
{
	position: absolute;

	min-width: 100px;
	max-width: 200px;
	padding: 16px 16px 12px;

	pointer-events: none;

	opacity: 0;
	background: white;

	border-radius: 8px;
	box-shadow: 0 0 25px 0 rgba(186, 177, 196, 0.3);

	transition:
		opacity 0.2s,
		-webkit-transform 0.2s ease-in-out 0.2s;

	transition:
		opacity 0.2s,
		transform 0.2s ease-in-out 0.2s;

	transition:
		opacity 0.2s,
		transform 0.2s ease-in-out 0.2s,
		-webkit-transform 0.2s ease-in-out 0.2s;
}

html > body > main > section.commercial > div.plan > div.tooltip.mark, html > body > main > section.commercial > div.plan > div.tooltip.building, html > body > main > section.commercial > div.plan > div.tooltip.room
	{
		transition:
			opacity 0.2s,
			-webkit-transform 0s ease-in-out 0s;
		transition:
			opacity 0.2s,
			transform 0s ease-in-out 0s;
		transition:
			opacity 0.2s,
			transform 0s ease-in-out 0s,
			-webkit-transform 0s ease-in-out 0s;
	}

html > body > main > section.commercial > div.plan > div.tooltip.building::after, html > body > main > section.commercial > div.plan > div.tooltip.room::after
		{
			display: block;

			width: 120px;
			padding: 8px 4px;
			margin-top: 8px;
			
			font-size: 14px;
			font-weight: 700;
			text-align: center;

			color: white;
			background: #1b3c57;

			border-radius: 4px;
		}

html > body > main > section.commercial > div.plan > div.tooltip.show
	{
		opacity: 1;
	}

html > body > main > section.commercial > div.plan > div.tooltip.transport
	{
		min-width: 180px;
	}

html > body > main > section.commercial > div.plan > div.tooltip > h3, html > body > main > section.commercial > div.plan > div.tooltip > p
	{
		margin: 0;
	}

html > body > main > section.commercial > div.plan > div.tooltip > h3
{
	font-size: 16px;
}

html > body > main > section.commercial > div.plan > div.tooltip > p
{
	margin-top: 4px;

	font-size: 12px;
	
	opacity: 0.8;
}

html > body > main > section.commercial > div.plan > div.tooltip > p > strong
	{
		font-size: 14px;

		color: #5a9bb7;
	}

html > body > main > section.commercial > div.apartments > table
{
	position: relative;

	display: block;
	
	width: 100%;
	
	border-collapse: collapse;
	empty-cells: show;
	table-layout: fixed;
}

html > body > main > section.commercial > div.apartments > table > thead, html > body > main > section.commercial > div.apartments > table > tbody
	{
		display: block;
	}

html > body > main > section.commercial > div.apartments > ul
{
	padding: 0;
	margin: 0;
	
	list-style: none;
}

html > body > main > section.advantages > ul > li
{
	position: relative;
	
	display: -webkit-flex;
	
	display: -ms-flexbox;
	
	display: flex;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-justify-content: space-between;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	overflow: hidden;
	
	box-sizing: border-box;
	width: calc(33.33% - 36px);
	max-width: 500px;
	padding: 32px;
}

html > body > main > section.advantages > ul > li:not(:last-child)
	{
		margin-right: 54px;
	}

html > body > main > section.advantages > ul > li:hover::before, html > body > main > section.advantages > ul > li:hover::after
		{
			width: 600px;
			height: 600px;

			background: rgba(27, 60, 87, 0.45);
		}

html > body > main > section.advantages > ul > li:hover > p
		{
			opacity: 1;
		}

html > body > main > section.advantages > ul > li::before, html > body > main > section.advantages > ul > li::after
	{
		position: absolute;
		top: 50%;
		left: 50%;

		content: '';

		border-radius: 50%;

		-webkit-transform: translate( -50%, -50% );

		        transform: translate( -50%, -50% );

		transition:
			width 0.2s,
			height 0.2s,
			background 0.2s;
	}

html > body > main > section.advantages > ul > li::before
	{
		width: 20px;
		height: 20px;

		background: #1b3c57;
	}

html > body > main > section.advantages > ul > li::after
	{
		width: 32px;
		height: 32px;

		background: rgba(27, 60, 87, 0.4);
	}

html > body > main > section.advantages > ul > li > h3, html > body > main > section.advantages > ul > li > p
	{
		position: relative;
		z-index: 1;
	}

html > body > main > section.advantages > ul > li > h3
{
	margin: auto 0 0;

	font-size: 24px;
	line-height: 1.17;

	color: white;
}

html > body > main > section.advantages > ul > li > img
{
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;

	width: 100%;
	height: 100%;

	object-fit: cover;
}

html > body > main > section.advantages > ul > li > label
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;

	cursor: pointer;
}

html > body > main > section.advantages > ul > li > p
{
	margin: 0 0 34px;
	
	line-height: 1.44;

	color: white;

	opacity: 0;

	transition: opacity 0.2s;
}

html > body > main > section.environment > div.slideshow > div.controls, html > body > main > section.environment > div.illustration > div.controls
{
	position: absolute;
	bottom: 83px;
	left: calc(51vw + 44px);
	
	white-space: nowrap;
}

/**
 * Сбросить всё оформление со стандартной кнопки
 */

html > body > main > section.environment > div.slideshow > div.controls > button, html > body > main > section.environment > div.illustration > div.controls > button
{
	display: inline;
	
	box-sizing: content-box;
	padding: 0;
	margin: 0;
	
	-webkit-appearance: none;
	
	   -moz-appearance: none;
	
	        appearance: none;
	
	background: transparent;
	
	border: none;
	
	position: relative;
	
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	
	vertical-align: middle;

	cursor: pointer;
	
	color: #1b3c57;
	background: white;
	
	border-radius: 50%;
}

html > body > main > section.environment > div.slideshow > div.controls > button:hover::before, html > body > main > section.environment > div.illustration > div.controls > button:hover::before
		{
			width: 100%;
			height: 100%;
		}

html > body > main > section.environment > div.slideshow > div.controls > button.prev, html > body > main > section.environment > div.illustration > div.controls > button.prev
	{
		margin-right: 30px;

		-webkit-transform: rotate( 180deg );

		        transform: rotate( 180deg );
	}

html > body > main > section.environment > div.slideshow > div.controls > button.next, html > body > main > section.environment > div.illustration > div.controls > button.next
	{
		margin-left: 30px;
	}

html > body > main > section.environment > div.slideshow > div.controls > button::before, html > body > main > section.environment > div.slideshow > div.controls > button::after, html > body > main > section.environment > div.illustration > div.controls > button::before, html > body > main > section.environment > div.illustration > div.controls > button::after
	{
		position: absolute;
		top: 50%;
		left: 50%;

		content: '';

		-webkit-transform: translate( -50%, -50% );

		        transform: translate( -50%, -50% );
	}

html > body > main > section.environment > div.slideshow > div.controls > button::before, html > body > main > section.environment > div.illustration > div.controls > button::before
	{
		width: 0;
		height: 0;

		background: #c3beba;

		border-radius: 50%;

		transition:
			width 0.25s,
			height 0.25s;
	}

html > body > main > section.environment > div.slideshow > div.controls > button::after, html > body > main > section.environment > div.illustration > div.controls > button::after
	{
		width: 100%;
		height: 100%;

		background: url( 'images/arrow-main.svg' ) center center no-repeat;
	}

html > body > main > section.environment > div.slideshow > div.controls > span.counter, html > body > main > section.environment > div.illustration > div.controls > span.counter
{
	display: inline-block;
	
	min-width: 3.5ex;
	
	font-size: 24px;
	font-weight: 700;
	text-align: right;
	vertical-align: middle;

	color: white;
}

html > body > main > section.environment > div.slideshow > ul.slides, html > body > main > section.environment > div.illustration > ul.slides
{
	position: relative;
	z-index: 1;
	
	overflow: hidden;
	
	width: calc(51vw - 36px);
	height: calc(31.62vw - 22px);
	padding: 0;
	margin: 55px 0;
	
	list-style: none;
}

html > body > main > section.environment > div.slideshow > ul.slides > li, html > body > main > section.environment > div.illustration > ul.slides > li
	{
		position: absolute;
		top: 0;
		left: 0;
		
		display: none;
		
		width: 100%;
		height: 100%;
		
		pointer-events: none;
		
		transition: opacity 1s;
	}

html > body > main > section.component > div.info > ul:not(.transport)
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	
	padding: 0;
	margin: 40px 0 0;

	list-style: none;
}

html > body > main > section.component > div.slideshow > ul.slides
{
	position: relative;
	z-index: 1;
	
	overflow: hidden;
	
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	
	list-style: none;
}

html > body > main > section.component > div.slideshow > ul.slides > li
	{
		position: absolute;
		top: 0;
		left: 0;
		
		display: none;
		
		width: 100%;
		height: 100%;
		
		pointer-events: none;
		
		transition: opacity 1s;
	}

html > body > main > section.component > div.slideshow > div.controls
{
	position: absolute;
	bottom: 40px;
	left: 40px;
	z-index: 1;

	white-space: nowrap;
}

/**
 * Сбросить всё оформление со стандартной кнопки
 */

html > body > main > section.component > div.slideshow > div.controls > button
{
	display: inline;
	
	box-sizing: content-box;
	padding: 0;
	margin: 0;
	
	-webkit-appearance: none;
	
	   -moz-appearance: none;
	
	        appearance: none;
	
	background: transparent;
	
	border: none;
	
	position: relative;
	
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	
	vertical-align: middle;

	cursor: pointer;
	
	background: url( 'images/arrow.svg' ) center center no-repeat;

	border: 2px solid #aea69b;
	border-radius: 50%;
}

html > body > main > section.component > div.slideshow > div.controls > button.prev
	{
		margin-right: 20px;

		-webkit-transform: rotate( 180deg );

		        transform: rotate( 180deg );
	}

html > body > main > section.component > div.slideshow > div.controls > button.next
	{
		margin-left: 20px;
	}

html > body > main > section.component > div.slideshow > div.controls > span.counter
{
	display: inline-block;
	
	min-width: 3.5ex;
	
	font-size: 24px;
	font-weight: 700;
	text-align: center;
	vertical-align: middle;

	color: #aea69b;
}

html > body > main > section.component > ul > li
{
	text-align: right;
}

html > body > main > section.component > ul > li > strong
{
	display: block;
	
	font-size: 44px;
	line-height: 1.09;

	background-image: linear-gradient( to right, #334554, #5a9bb7 );
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

html > body > main > section.promo-form > form.progress
{
	pointer-events: none;
}

html > body > main > section.promo-form > form.progress::before
	{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		
		content: "";
		
		opacity: 0.5;
		background: #c3beba;
	}

html > body > main > section.promo-form > form.progress::after
	{
	display: inline-block;
	
	width: 1em;
	height: 1em;
	
	border: 0 dotted transparent;
	border-top-width: 1px;
	border-top-color: rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	
	-webkit-animation: rotate 0.8s linear infinite;
	
	        animation: rotate 0.8s linear infinite;
		
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		
		margin: auto;
		
		font-size: 40px;
		
		content: "";
	}

html > body > main > section.promo-form > form.success > div.success
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	
	-webkit-animation: fade-in 0.8s 1;
	
	        animation: fade-in 0.8s 1;
}

html > body > main > section.promo-form > form > div.success
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	
	display: none;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-justify-content: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-align-items: center;
	    -ms-flex-align: center;
	        align-items: center;
	
	background: #c3beba;
}

html > body > main > section.promo-form > form > div.success > p
	{
		margin: 0 0 10px;
		
		color: inherit;
	}

html > body > main > section.promo-form > form > div.success > p:first-of-type
	{
		
		padding-top: 130px;
		
		background: url('images/forms/mail-ok-inverted.svg') center top no-repeat;
	}

html > body > main > section.promo-form > form > div.success > p.controls
	{
		margin-top: 20px;
	}

html > body > main > section.promo-form > form > div.success > p.controls > button
		{
			
			min-width: 200px;
		}

html > body > main > section.promo-form > form > ul.fields
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	-webkit-justify-content: space-between;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	
	padding: 0;
	margin: 0;
	
	list-style: none;
}

html > body > main > section.subscribe > form.progress
{
	pointer-events: none;
}

html > body > main > section.subscribe > form.progress::before
	{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		
		content: "";
		
		opacity: 0.5;
	}

html > body > main > section.subscribe > form.progress::after
	{
	display: inline-block;
	
	width: 1em;
	height: 1em;
	
	border: 0 dotted transparent;
	border-top-width: 4px;
	border-top-color: white;
	border-radius: 50%;
	
	-webkit-animation: rotate 0.8s linear infinite;
	
	        animation: rotate 0.8s linear infinite;
		
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		
		margin: auto;
		
		font-size: 40px;
		
		content: "";
	}

html > body > main > section.subscribe > form > div.success
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	
	display: none;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-justify-content: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-align-items: center;
	    -ms-flex-align: center;
	        align-items: center;
}

html > body > main > section.subscribe > form > div.success > p
	{
		margin: 0 0 10px;
		
		color: inherit;
	}

html > body > main > section.subscribe > form > div.success > p:first-of-type
	{
		
		padding-top: 130px;
		
		background: url('images/forms/mail-ok-inverted.svg') center top no-repeat;
	}

html > body > main > section.subscribe > form > div.success > p.controls
	{
		margin-top: 20px;
	}

html > body > main > section.subscribe > form > div.success > p.controls > button
		{
			
			min-width: 200px;
		}

html > body > main > section.subscribe > form > ul.fields
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	-webkit-justify-content: space-between;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	
	padding: 0;
	margin: 0;
	
	list-style: none;
}

html > body > main > section.subscribe > form.success > div.success
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	
	-webkit-animation: fade-in 0.8s 1;
	
	        animation: fade-in 0.8s 1;
}

html > body > main > section.subscribe > form.success > ul.fields
{
	opacity: 0;
}

html > body > main > section.your-house > div.image img, html > body > main > section.your-house > div.image svg
{
	top: 0;
	left: 0;

	height: 100%;
}

html > body > main > section.your-house > div.image
{
	position: relative;
	
	-webkit-flex-grow: 1;
	
	    -ms-flex-positive: 1;
	
	        flex-grow: 1;
	max-width: 940px;
}

html > body > main > section.your-house > div.image::before
	{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 1;

		width: 100vw;

		content: '';

		background: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35) );
	}

html > body > main > section.your-house > div.image > h2, html > body > main > section.your-house > div.image img, html > body > main > section.your-house > div.image svg
	{
		position: absolute;
	}

html > body > main > section.your-house > div.image.small img, html > body > main > section.your-house > div.image.small svg
	{
		width: 54vw;

		object-fit: cover;
	}

html > body > main > section.your-house > div.image > figure
{
	margin: 0;

	font-size: 0;
}

html > body > main > section.your-house > div.image > figure.mobile
	{
		display: none;
	}

html > body > main > section.your-house > div.image > figure > svg > g[id*="Tooltip_"]
		{
			cursor: pointer;
		}

html > body > main > section.your-house > div.image > figure > svg > g#Kindergarten, html > body > main > section.your-house > div.image > figure > svg > g#Commercial, html > body > main > section.your-house > div.image > figure > svg > g#View, html > body > main > section.your-house > div.image > figure > svg > g#Parking, html > body > main > section.your-house > div.image > figure > svg > g#Kindergarten_yard, html > body > main > section.your-house > div.image > figure > svg > g#Yard, html > body > main > section.your-house > div.image > figure > svg > g#Camera
		{
			display: none;
		}

html > body > main > section.your-house > div.image > figure > div.tooltip
	{
		position: absolute;

		display: none;

		box-sizing: border-box;
		max-width: 204px;
		padding: 24px;

		font-size: 14px;
		line-height: 1.43;

		color: white;
		background: #1b3c57;

		-webkit-transform: translate( -50%, calc(-100% - 12px) );

		        transform: translate( -50%, calc(-100% - 12px) );
	}

html > body > main > section.your-house > div.image > figure > div.tooltip.show
		{
			display: block;
		}

html > body > main > section.your-house > div.image > h2
{
	bottom: 56px;
	left: 64px;
	z-index: 1;

	margin: 0;
	
	font-size: 36px;
	line-height: 1.11;

	color: white;
}

html > body > main > section.your-house > div.info
{
	width: 30%;
	padding: 56px 0;
}

html > body > main > section.your-house > div.info > h2.slim
	{
		font-weight: 400;
	}

html > body > main > section.apartments > ul > li > a
{
	display: block;

	padding: 36px;

	text-decoration: none;
}

html > body > main > section.apartments > ul > li > a > h3
{
	margin: 0 0 4px;

	font-size: 26px;
	line-height: 1.15;
}

html > body > main > section.apartments > ul > li > a > img
{
	display: block;
	
	width: calc(100% - 100px);
	height: auto;
	margin: 0 auto 44px;
}

html > body > main > section.commercial > div.filter > form > ul.fields
{
	padding: 0;
	margin: 0;
	
	list-style: none;
}

html > body > main > section.commercial > div.apartments > table tr
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: center;
	    -ms-flex-align: center;
	        align-items: center;

	border-top: 1px solid #e6e6e6;
}

html > body > main > section.commercial > div.apartments > table tr > td, html > body > main > section.commercial > div.apartments > table tr > th
{
	-webkit-flex-shrink: 0;
	    -ms-flex-negative: 0;
	        flex-shrink: 0;
	padding: 0 20px;
	
	text-align: left;
	white-space: nowrap;
}

html > body > main > section.commercial > div.apartments > table tr > td.image, html > body > main > section.commercial > div.apartments > table tr > th.image
	{
		width: 9%;
		padding-left: 4%;
	}

html > body > main > section.commercial > div.apartments > table tr > td.room-type, html > body > main > section.commercial > div.apartments > table tr > th.room-type
	{
		width: 26%;
	}

html > body > main > section.commercial > div.apartments > table tr > td.section, html > body > main > section.commercial > div.apartments > table tr > th.section
	{
		width: 14%;
	}

html > body > main > section.commercial > div.apartments > table tr > td.square-total, html > body > main > section.commercial > div.apartments > table tr > th.square-total
	{
		width: 8%;
	}

html > body > main > section.commercial > div.apartments > table tr > td.other, html > body > main > section.commercial > div.apartments > table tr > th.other
	{
		width: 80px;
	}

html > body > main > section.commercial > div.apartments > ul > li
{
	display: block;
	
	height: 130px;
	
	border-bottom: 1px solid #e6e6e6;
}

html > body > main > section.environment > div.slideshow > div.sections > section.current, html > body > main > section.environment > div.illustration > div.sections > section.current
{
	visibility: visible;
	
	opacity: 1;
	
	transition: opacity 0.5s;
}

html > body > main > section.environment > div.slideshow > div.sections > section, html > body > main > section.environment > div.illustration > div.sections > section
{
	position: absolute;
	top: 35px;
	right: 0;
	left: calc(51vw - 36px);
	
	visibility: hidden;
	
	box-sizing: border-box;
	padding: 70px;
	
	color: white;
	opacity: 0;
	
	transition: opacity 0.5s,
		visibility 0s 0.5s;
}

html > body > main > section.environment > div.slideshow > div.sections > section > h3, html > body > main > section.environment > div.illustration > div.sections > section > h3
{
	
	margin-bottom: 16px;

	font-weight: 400;

	opacity: 0;

	transition: opacity 1s;
}

html > body > main > section.environment > div.slideshow > div.sections > section > p, html > body > main > section.environment > div.illustration > div.sections > section > p
{
	
	margin-bottom: 1em;

	font-weight: 300;

	opacity: 1;
	color: transparent;

	-webkit-transform: translateY( 60px );

	        transform: translateY( 60px );

	transition:
		color 1s,
		-webkit-transform 1s;

	transition:
		color 1s,
		transform 1s;

	transition:
		color 1s,
		transform 1s,
		-webkit-transform 1s;
}

html > body > main > section.environment > div.slideshow > ul.slides.backwards > li.current, html > body > main > section.environment > div.illustration > ul.slides.backwards > li.current
{
	-webkit-animation-name: slide-from-left;
	        animation-name: slide-from-left;
}

html > body > main > section.environment > div.slideshow > ul.slides > li, html > body > main > section.environment > div.illustration > ul.slides > li
{
	position: absolute;
	top: 0;
	left: 0;
	
	display: none;
	
	width: 100%;
	height: 100%;

	pointer-events: auto;
	
	transition: opacity 1s;
}

html > body > main > section.environment > div.slideshow > ul.slides > li.prev, html > body > main > section.environment > div.illustration > ul.slides > li.prev
	{
		display: block;
		
		opacity: 0;
	}

html > body > main > section.environment > div.slideshow > ul.slides > li.current, html > body > main > section.environment > div.illustration > ul.slides > li.current
	{
		z-index: 1;
		
		display: block;
		
		transition: none;
		
		-webkit-animation-name: slide-from-right;
		
		        animation-name: slide-from-right;
		-webkit-animation-duration: 0.5s;
		        animation-duration: 0.5s;
		-webkit-animation-timing-function: ease-out;
		        animation-timing-function: ease-out;
	}

html > body > main > section.environment > div.slideshow > ul.slides > li > div.video-container, html > body > main > section.environment > div.illustration > ul.slides > li > div.video-container
{
	position: relative;

	height: 100%;
}

html > body > main > section.environment > div.slideshow > ul.slides > li > div.video-container.playing > figure, html > body > main > section.environment > div.illustration > ul.slides > li > div.video-container.playing > figure
		{
			opacity: 0;
		}

html > body > main > section.environment > div.slideshow > ul.slides > li > div.video-container.playing > iframe, html > body > main > section.environment > div.illustration > ul.slides > li > div.video-container.playing > iframe
		{
			opacity: 1;
		}

html > body > main > section.environment > div.slideshow > ul.slides > li > div.video-container > figure, html > body > main > section.environment > div.slideshow > ul.slides > li > div.video-container > iframe, html > body > main > section.environment > div.illustration > ul.slides > li > div.video-container > figure, html > body > main > section.environment > div.illustration > ul.slides > li > div.video-container > iframe
	{
		transition: opacity 0.3s ease-in-out;
	}

html > body > main > section.environment > div.slideshow > ul.slides > li > div.video-container > figure, html > body > main > section.environment > div.illustration > ul.slides > li > div.video-container > figure
	{
		position: relative;
		z-index: 1;

		height: 100%;
		margin: 0;

		cursor: pointer;
	}

html > body > main > section.environment > div.slideshow > ul.slides > li > div.video-container > figure:hover::before, html > body > main > section.environment > div.illustration > ul.slides > li > div.video-container > figure:hover::before
			{
				-webkit-transform: translate( -50%, -50% ) scale( 1.5 );
				        transform: translate( -50%, -50% ) scale( 1.5 );
			}

html > body > main > section.environment > div.slideshow > ul.slides > li > div.video-container > figure::before, html > body > main > section.environment > div.illustration > ul.slides > li > div.video-container > figure::before
		{
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: 1;

			width: 82px;
			height: 82px;

			content: '';

			background: url( 'images/play-button.svg' ) center center no-repeat;

			-webkit-transform: translate( -50%, -50% );

			        transform: translate( -50%, -50% );

			transition: -webkit-transform 0.3s ease-in-out;

			transition: transform 0.3s ease-in-out;

			transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
		}

html > body > main > section.environment > div.slideshow > ul.slides > li > div.video-container > figure > img, html > body > main > section.environment > div.illustration > ul.slides > li > div.video-container > figure > img
		{
			position: absolute;
			top: 0;
			left: 0;

			width: 100%;
			height: 100%;

			object-fit: cover;
		}

html > body > main > section.environment > div.slideshow > ul.slides > li > div.video-container > iframe, html > body > main > section.environment > div.illustration > ul.slides > li > div.video-container > iframe
	{
		position: absolute;
		top: 0;
		left: 0;

		width: 100%;
		height: 100%;

		opacity: 0;
	}

html > body > main > section.environment > div.slideshow > ul.slides > li > img, html > body > main > section.environment > div.illustration > ul.slides > li > img
{
	display: block;
	
	width: 100%;
	height: 100%;
	
	object-fit: cover;
}

html > body > main > section.component > div.info > ul:not(.transport) > li
{
	font-weight: 700;
}

html > body > main > section.component > div.info > ul:not(.transport) > li:not(:last-child)
	{
		margin-right: 64px;
	}

html > body > main > section.component > div.info > ul:not(.transport) > li > strong
{
	display: block;

	margin-bottom: 8px;
	
	font-size: 40px;
	line-height: 1;

	color: #c3beba;
}

html > body > main > section.component > div.slideshow > ul.slides.backwards > li.current
{
	-webkit-animation-name: slide-from-left;
	        animation-name: slide-from-left;
}

html > body > main > section.component > div.slideshow > ul.slides > li
{
	position: absolute;
	top: 0;
	left: 0;
	
	display: none;
	
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 40px;

	pointer-events: auto;

	background-image:
			url( 'images/noise.png' ),
			url( 'images/pattern-darker.svg' );
	background-color: #fcfaf8;

	transition: opacity 1s;
}

html > body > main > section.component > div.slideshow > ul.slides > li.prev
	{
		display: block;
		
		opacity: 0;
	}

html > body > main > section.component > div.slideshow > ul.slides > li.current
	{
		z-index: 1;
		
		display: block;
		
		transition: none;
		
		-webkit-animation-name: slide-from-right;
		
		        animation-name: slide-from-right;
		-webkit-animation-duration: 0.5s;
		        animation-duration: 0.5s;
		-webkit-animation-timing-function: ease-out;
		        animation-timing-function: ease-out;
	}

html > body > main > section.component > div.slideshow > ul.slides > li::after
	{
		display: table;
		clear: both;

		content: '';
	}

html > body > main > section.component > div.slideshow > ul.slides > li > a:not(.lazy-image)
{
	position: relative;

	padding-right: 36px;
	
	font-weight: 700;
	text-decoration: none;

	color: #aea69b;
}

html > body > main > section.component > div.slideshow > ul.slides > li > a:not(.lazy-image):hover::before
		{
			right: -11px;
		}

html > body > main > section.component > div.slideshow > ul.slides > li > a:not(.lazy-image):hover::after
		{
			right: -12px;

			width: 36px;
		}

html > body > main > section.component > div.slideshow > ul.slides > li > a:not(.lazy-image)::before, html > body > main > section.component > div.slideshow > ul.slides > li > a:not(.lazy-image)::after
	{
		position: absolute;
		top: 0;
		bottom: 0;

		margin: auto;
		
		content: '';
	}

html > body > main > section.component > div.slideshow > ul.slides > li > a:not(.lazy-image)::before
	{
		right: 1px;

		width: 16px;
		height: 16px;

		border-top: 2px solid #aea69b;
		border-right: 2px solid #aea69b;

		-webkit-transform: rotate( 45deg );

		        transform: rotate( 45deg );

		transition: right 0.25s;
	}

html > body > main > section.component > div.slideshow > ul.slides > li > a:not(.lazy-image)::after
	{
		right: 0;

		width: 24px;
		height: 2px;

		background: #aea69b;

		transition:
			right 0.25s,
			width 0.25s;
	}

html > body > main > section.component > div.slideshow > ul.slides > li > h3
{

	margin-bottom: 2px;

	font-size: 30px;

	color: #1b3c57;
}

html > body > main > section.component > div.slideshow > ul.slides > li > img
{
	float: right;
	
	max-width: 50%;
	max-height: 95%;

	object-fit: contain;
	object-position: center top;
}

html > body > main > section.component > div.slideshow > ul.slides > li > p
{
	margin: 0 0 35px;

	opacity: 1;
	color: rgba(27, 60, 87, 0.7);
}

html > body > main > section.promo-form > form > ul.fields > li.checkbox
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: center;
	    -ms-flex-align: center;
	        align-items: center;
	
	max-width: 260px;
	margin-top: 10px;
	margin-bottom: 0;
}

html > body > main > section.promo-form > form > ul.fields > li
{
	display: block;
	
	margin: 0 0 20px;
}

html > body > main > section.promo-form > form > ul.fields > li:not(.controls):not(.checkbox):not(.text)
	{
		width: calc(50% - 10px);
	}

html > body > main > section.promo-form > form > ul.fields > li:not(.controls):not(.checkbox).text
	{
		width: 100%;
	}

html > body > main > section.promo-form > form > ul.fields > li > input:not([type="checkbox"]):not([type="radio"])
	{
		
		display: block;
		
		width: 100%;
	}

html > body > main > section.promo-form > form > ul.fields > li > label > a:hover, html > body > main > section.promo-form > form > ul.fields > li > label > a:focus
		{
			color: #5a9bb7;
		}

html > body > main > section.subscribe > form > ul.fields > li.checkbox
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: center;
	    -ms-flex-align: center;
	        align-items: center;
	
	-webkit-order: 1;
	
	    -ms-flex-order: 1;
	
	        order: 1;
	max-width: 260px;
	margin-top: 10px;
	margin-right: auto;
	margin-left: auto;
}

html > body > main > section.subscribe > form > ul.fields > li.checkbox a:hover
		{
			color: #c3beba;
		}

html > body > main > section.subscribe > form > ul.fields > li
{
	display: block;
	
	margin: 0 0 20px;
}

html > body > main > section.subscribe > form > ul.fields > li:not(.controls):not(.checkbox)
{
	width: calc(33.33% - 13px);
}

html > body > main > section.subscribe > form > ul.fields > li > input:not([type="checkbox"]):not([type="radio"])
	{
		
		display: block;
		
		width: 100%;
	}

html > body > main > section.your-house > div.info > p
{
	margin: 0;
}

html > body > main > section.your-house > div.info > p:not(:first-of-type):not(.goto)
	{
		margin-bottom: 16px;
		
		font-size: 20px;
		line-height: 1.4;
	}

html > body > main > section.your-house > div.info > p:first-of-type:not(.goto)
	{
		margin-bottom: 24px;
		
		font-size: 22px;
		font-weight: 700;
		line-height: 1.45;
	}

html > body > main > section.your-house > div.info > p:last-child
	{
		margin-top: 32px;
	}

html > body > main > section.your-house > div.info > p > strong
	{
		color: #5a9bb7;
	}

html > body > main > section.your-house > div.info > p > a
{
	position: relative;

	padding-right: 36px;
	
	font-weight: 700;
	text-decoration: none;

	color: #aea69b;
}

html > body > main > section.your-house > div.info > p > a:hover::before
		{
			right: -11px;
		}

html > body > main > section.your-house > div.info > p > a:hover::after
		{
			right: -12px;

			width: 36px;
		}

html > body > main > section.your-house > div.info > p > a::before, html > body > main > section.your-house > div.info > p > a::after
	{
		position: absolute;
		top: 0;
		bottom: 0;

		margin: auto;
		
		content: '';
	}

html > body > main > section.your-house > div.info > p > a::before
	{
		right: 1px;

		width: 16px;
		height: 16px;

		border-top: 2px solid #aea69b;
		border-right: 2px solid #aea69b;

		-webkit-transform: rotate( 45deg );

		        transform: rotate( 45deg );

		transition: right 0.25s;
	}

html > body > main > section.your-house > div.info > p > a::after
	{
		right: 0;

		width: 24px;
		height: 2px;

		background: #aea69b;

		transition:
			right 0.25s,
			width 0.25s;
	}

html > body > main > section.apartments > ul > li > a > ul
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	
	padding: 0;
	margin: 0;

	list-style: none;

	font-size: 22px;
	line-height: 1.14;
}

html > body > main > section.apartments > ul > li > a > ul > li[data-label]:not(:last-child)
		{
			margin-right: 20px;
		}

html > body > main > section.apartments > ul > li > a > ul > li[data-label]::before
		{
			content: attr( data-label );
		}

html > body > main > section.apartments > ul > li > a > ul > li.location
	{
		width: 100%;
		margin-bottom: 8px;

		font-size: 15px;
		line-height: 1.73;
	}

html > body > main > section.apartments > ul > li > a > ul > li::before
	{
		display: block;

		font-size: 15px;
		line-height: 1.73;

		opacity: 0.5;
	}

html > body > main > section.commercial > div.filter > form > ul.fields > li
{
	display: block;
	
	margin: 0 0 30px;
}

html > body > main > section.commercial > div.filter > form > ul.fields > li > div.range
{
	position: relative;
	
	padding-bottom: 9px;
}

html > body > main > section.commercial > div.filter > form > ul.fields > li > div.range > label
	{
		display: block;

		margin-bottom: 15px;

		font-weight: 700;
	}

html > body > main > section.commercial > div.filter > form > ul.fields > li > div.range > ul.inputs
	{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		
		padding: 0;
		margin: 0;

		list-style: none;
	}

html > body > main > section.commercial > div.filter > form > ul.fields > li > div.range > ul.inputs > li
		{
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-align-items: baseline;
			    -ms-flex-align: baseline;
			        align-items: baseline;
			
			width: 50%;
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li > div.range > ul.inputs > li > span.label
				{
					margin-right: 4px;
				}

html > body > main > section.commercial > div.filter > form > ul.fields > li > div.range > ul.inputs > li > span > input
				{
					padding: 0;

					color: #1b3c57;

					border: none;
					outline: none;
				}

html > body > main > section.commercial > div.filter > form > ul.fields > li > div.range > div.controls
	{
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;

		height: 2px;

		background: #e6e6e6;
	}

html > body > main > section.commercial > div.filter > form > ul.fields > li > div.range > div.controls > button
		{
			position: absolute;
			top: -8px;
			
			width: 16px;
			height: 16px;
			padding: 0;

			cursor: -webkit-grab;

			cursor: grab;

			background: #5a9bb7;

			border: none;
			border-radius: 50%;
			box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );

			-webkit-transform: translateX( -50% );

			        transform: translateX( -50% );

			transition:
				box-shadow 0.3s,
				-webkit-transform 0.3s;

			transition:
				transform 0.3s,
				box-shadow 0.3s;

			transition:
				transform 0.3s,
				box-shadow 0.3s,
				-webkit-transform 0.3s;
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li > div.range > div.controls > button:hover
			{
				box-shadow: none;

				-webkit-transform: translateX( -50% ) scale( 1.25 );

				        transform: translateX( -50% ) scale( 1.25 );
			}

html > body > main > section.commercial > div.filter > form > ul.fields > li > div.range > div.controls > span.range
		{
			position: absolute;
			top: 0;
			bottom: 0;

			background: #5a9bb7;
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes[data-for="sections"]
	{
		font-size: 0;
	}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes > input
{
	display: none;
}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes > label
{
	display: block;
	
	margin-bottom: 21px;
	
	font-size: 17px;
	font-weight: 700;
}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes > svg > path
	{
		cursor: pointer;
		
		fill: rgba(0, 0, 0, 0.1);
		stroke: rgb( 212, 212, 212 );
	}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes > svg > path.disabled
		{
			pointer-events: none;
			
			opacity: 0.5;
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes > svg > path.checked
		{
			fill: #5a9bb7;
			stroke: rgba(90, 155, 183, 0.5);
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes > svg > text
	{
		pointer-events: none;
	}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes > svg > text.disabled
		{
			opacity: 0.25;
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes > svg > text.section
		{
			font-size: 11px;

			fill: rgb( 160, 160, 160 );
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes > svg > text.street
		{
			font-size: 17px;

			fill: #334554;
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes > svg > text.checked
		{
			fill: white;
		}

html > body > main > section.commercial > div.apartments > table > tbody > tr.disabled
{
	display: none;
}

html > body > main > section.commercial > div.apartments > table > tbody > tr
{
	position: relative;

	height: 120px;
}

html > body > main > section.commercial > div.apartments > table > tbody > tr:hover
	{
		box-shadow: 0 2px 25px rgba(0, 0, 0, 0.2);
	}

html > body > main > section.commercial > div.apartments > table > thead > tr.fixed
{
	position: fixed;
	top: 0;
	z-index: 2;
	
	display: -webkit-flex;
	
	display: -ms-flexbox;
	
	display: flex;
	
	background: white;
}

html > body > main > section.commercial > div.apartments > table > thead > tr.fixed > th
	{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		
		-webkit-align-items: center;
		
		    -ms-flex-align: center;
		
		        align-items: center;
	}

html > body > main > section.commercial > div.apartments > table > thead > tr.fixed > th.total-cost
		{
			-webkit-justify-content: flex-end;
			    -ms-flex-pack: end;
			        justify-content: flex-end;
		}

html > body > main > section.commercial > div.apartments > table > thead > tr
{
	height: 60px;
}

html > body > main > section.commercial > div.apartments > table > thead > tr > th
{
	font-size: 14px;
	font-weight: 400;
}

html > body > main > section.commercial > div.apartments > ul > li > a
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 20px;
	
	text-decoration: none;
	
	color: inherit;
}

html > body > main > section.commercial > div.apartments > ul > li > a > div.favorites
{
	
	display: -webkit-flex;
	
	display: -ms-flexbox;
	
	display: flex;
	
	/* Временное отключение */
	pointer-events: none;
	visibility: hidden;
}

html > body > main > section.commercial > div.apartments > ul > li > a > div.favorites > input
	{
		position: absolute;
		z-index: -1;
		
		opacity: 0;
	}

html > body > main > section.commercial > div.apartments > ul > li > a > div.favorites > label
	{
		display: block;
		
		margin: auto;
		
		cursor: pointer;
	}

html > body > main > section.commercial > div.apartments > ul > li > a > div.favorites > label > svg
		{
			display: block;
			
			width: 20px;
			height: 20px;
			
			fill: none;
			stroke: #072b31;
			stroke-width: 2px;
			stroke-linejoin: round;
		}

html > body > main > section.commercial > div.apartments > ul > li > a > div.favorites > input:focus + label > svg, html > body > main > section.commercial > div.apartments > ul > li > a > div.favorites > label:hover > svg
		{
			stroke: #c3beba;
		}

html > body > main > section.commercial > div.apartments > ul > li > a > div.favorites > input:checked + label > svg
		{
			fill: #c3beba;
			stroke: #c3beba;
		}

html > body > main > section.commercial > div.apartments > ul > li > a > div.image
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	
	-webkit-flex: none;
	
	    -ms-flex: none;
	
	        flex: none;
	width: 80px;
	height: 100%;
	margin-right: 15px;
}

html > body > main > section.commercial > div.apartments > ul > li > a > div.image > img
	{
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 100%;
	}

html > body > main > section.commercial > div.apartments > ul > li > a > ul.details
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-justify-content: space-between;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	
	-webkit-flex: auto;
	
	    -ms-flex: auto;
	
	        flex: auto;
	padding: 0;
	margin: 0 10px 0 0;
	
	list-style: none;
}

html > body > main > section.commercial > div.apartments > ul > li > a > ul.details > li
	{
		margin: 0;
		
		white-space: nowrap;
	}

html > body > main > section.commercial > div.apartments > ul > li > a > ul.details > li.room
		{
			font-size: 24px;
			font-weight: 700;
			white-space: normal;
		}

html > body > main > section.commercial > div.apartments > ul > li > a > ul.details > li.room > small
			{
				font-size: 16px;
				font-weight: 400;
			}

html > body > main > section.commercial > div.apartments > ul > li > a > ul.details > li.cost.empty
			{
				opacity: 0.5;
			}

html > body > main > section.promo-form > form > ul.fields > li.controls > button
{
	margin-top: 29px;
}

html > body > main > section.subscribe > form > ul.fields > li.controls
{
	width: 100%;
	margin-top: 20px;
	
	text-align: center;
}

html > body > main > section.subscribe > form > ul.fields > li.controls > button
{
	width: 100%;
	max-width: 200px;
}

html > body > main > section.commercial > div.filter > form > ul.fields > li > fieldset
{
	display: block;
	
	padding: 0;
	margin: 0;
	
	border: none;
}

html > body > main > section.commercial > div.filter > form > ul.fields > li > fieldset > legend
{
	display: block;
	
	margin: 0 0 15px;
	
	font-weight: 700;
}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider
{
	
	position: relative;
	z-index: 1;
	
	box-sizing: border-box;
	height: 20px;
	padding: 9px 0;
	margin: 0 8px;
	
	font-size: 12px;
}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider *
	{
		/* Remove tap highlight color for mobile safari */
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider > div.rail
	{
		position: absolute;
		left: -8px;
		
		width: 100%;
		height: 2px;
		padding: 0 8px;
		
		background-color: rgba(255, 255, 255, 0.1);
	}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider > div.track
	{
		position: absolute;
		left: 0;
		
		height: 2px;
		
		background-color: #c3beba;
	}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider > div.handle
	{
		position: absolute;
		top: 2px;
		
		width: 16px;
		height: 16px;
		margin-left: -8px;
		
		cursor: pointer;
		cursor: -webkit-grab;
		cursor: grab;
		
		background-color: #c3beba;
		
		border-radius: 50%;
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
		
		transition: box-shadow 0.3s,
			-webkit-transform 0.3s;
		
		transition: transform 0.3s,
			box-shadow 0.3s;
		
		transition: transform 0.3s,
			box-shadow 0.3s,
			-webkit-transform 0.3s;
		
		/*> span.$(prefix)tip
		{
			$arrow-half-width: 3px;
			$arrow-height: 6px;
			
			position: absolute;
			bottom: calc(100% + $arrow-height);
			left: 50%;
			z-index: 1;
			
			box-sizing: border-box;
			min-width: 24px;
			padding: 0 6px;
			
			line-height: 24px;
			text-align: center;
			white-space: nowrap;
			
			pointer-events: none;
			
			color: $clr-tooltip-fg;
			background: $clr-tooltip-bg;
			
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
			
			transform: translateX(-50%) scale(0);
			transform-origin: center calc(100% + $arrow-height);
			
			transition-property: transform;
			transition-duration: 0.1s;
			transition-delay: 0.1s;
			transition-timing-function: ease-in;
			
			&::after
			{
				$clr-transparent: color($clr-tooltip-bg a(0));
				
				position: absolute;
				top: 100%;
				left: 50%;
				
				width: 0;
				height: 0;
				margin-left: -$arrow-half-width;
				
				content: "";
				
				border-width: $arrow-height $arrow-half-width 0;
				border-color: $clr-tooltip-bg $clr-transparent $clr-transparent;
				border-style: solid;
			}
		}
		
		&:hover,
		&:active,
		&.$(prefix)dragging
		{
			> span.$(prefix)tip
			{
				transform: translateX(-50%) scale(1);
				
				transition-timing-function: ease-out;
			}
		}*/
	}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider > div.handle:focus
		{
			outline: none;
			
			box-shadow: 0 0 5px #c3beba;
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider > div.handle:hover
		{
			-webkit-transform: scale(1.25);
			        transform: scale(1.25);
			
			box-shadow: none;
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider > div.handle:active, html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider > div.handle.dragging
		{
			cursor: -webkit-grabbing;
			cursor: grabbing;
			
			background-color: #c3beba;
			
			box-shadow: none;
			
			-webkit-transform: scale(1.25);
			
			        transform: scale(1.25);
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider > div.handle > span.tip
		{
			display: none;
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider > div.marks
	{
		position: absolute;
		top: 20px;
		left: 0;
		
		width: 100%;
	}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider > div.marks > span.text
		{
			position: absolute;
			
			display: inline-block;
			
			text-align: center;
			vertical-align: middle;
			white-space: nowrap;
			
			cursor: default;
			
			color: rgb(255, 255, 255);
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider > div.marks > span.text.active
			{
				color: white;
			}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider > div.steps
	{
		position: absolute;
		
		width: 100%;
		height: 2px;
	}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider > div.steps > span.dot
		{
			position: absolute;
			bottom: -3px;
			
			box-sizing: border-box;
			width: 8px;
			height: 8px;
			margin-left: -4px;
			
			cursor: pointer;
			
			background-color: #1b3c57;
			
			border-radius: 50%;
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider > div.steps > span.dot.active
			{
				background-color: #c3beba;
			}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider.disabled
	{
		background-color: rgba(255, 255, 255, 0.1);
	}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider.disabled > div.track
		{
			background-color: #072b31;
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider.disabled > div.handle
		{
			cursor: not-allowed;
			
			background-color: #072b31;
			
			box-shadow: none;
			
			-webkit-transform: none;
			
			        transform: none;
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider.disabled > div.steps > span.dot
			{
				cursor: not-allowed;
				
				border-color: #072b31;
			}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider.vertical
	{
		width: 20px;
		padding: 0 9px;
		margin: 8px 0;
	}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider.vertical > div.rail
		{
			top: -8px;
			left: 9px;
			
			width: 2px;
			height: 100%;
			padding: 8px 0;
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider.vertical > div.track
		{
			left: 9px;
			bottom: 0;
			
			width: 2px;
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider.vertical > div.handle
		{
			top: 0;
			left: 2px;
			
			margin-bottom: -8px;
			margin-left: 0;
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider.vertical > div.marks
		{
			top: 0;
			left: 20px;
			
			width: auto;
			height: 100%;
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider.vertical > div.steps
		{
			width: 2px;
			height: 100%;
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > div.range-slider.vertical > div.steps > span.dot
			{
				left: 3px;
				
				margin-bottom: -4px;
			}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > span.from, html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > span.to
{
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
	
	width: 50%;
}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > span.from > label, html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > span.to > label
	{
		position: relative;
		
		display: block;
		
		margin-right: 1ex;
	}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > span.from > label::after, html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > span.to > label::after
		{
			position: absolute;
			top: 0;
			left: calc(100% + 1ex);
			
			content: attr(data-value);
			pointer-events: none;
			
			color: #1b3c57;
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > span.from > input, html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > span.to > input
	{
		display: block;
		
		-webkit-flex-grow: 1;
		
		    -ms-flex-positive: 1;
		
		        flex-grow: 1;
		width: 50%;
		padding: 0;
		margin: 0;
		
		font: inherit;
		
		opacity: 0;
		color: #1b3c57;
		background: none;
		
		border: none;
	}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > span.from.focus > label::after, html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > span.to.focus > label::after
			{
				display: none;
			}

html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > span.from.focus > input, html > body > main > section.commercial > div.filter > form > ul.fields > li.range > fieldset > span.to.focus > input
		{
			opacity: 1;
		}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td.image > img
	{
		width: 120px;
		max-width: 100%;
		height: 80px;

		object-fit: contain;
	}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td > span.main
		{
			display: block;
		}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td > span.additional
		{
			display: block;

			margin-top: 8px;
			
			font-size: 15px;
			font-weight: 400;
			line-height: 20px;

			opacity: 0.5;
		}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td.room-type
{
	font-size: 28px;
	font-weight: 700;
}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td.room-type > small
	{
		font-size: 16px;
		font-weight: 400;
	}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td.total-cost.empty
	{
		opacity: 0.5;
	}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td > div.tooltip
{
	position: absolute;
	bottom: 50%;
	left: -200px;
	z-index: 1;

	display: none;

	width: 664px;
	height: 362px;

	background: white;

	border-radius: 4px;
	box-shadow: 0 20px 16px 0 rgba(0, 0, 0, 0.1);
}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td > div.tooltip > figure
	{
		box-sizing: border-box;
		width: 342px;
		padding: 56px;
		margin: 0;

		border-right: 1px solid #e6e6e6;
	}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td > div.tooltip > figure > img
		{
			width: 100%;
			height: 100%;

			object-fit: contain;
		}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td > div.tooltip > div
	{
		-webkit-flex-grow: 1;
		    -ms-flex-positive: 1;
		        flex-grow: 1;
		padding: 27px 0;

		text-align: center;
	}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td > div.tooltip > div > p
		{
			font-size: 12px;
		}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td > div.tooltip > div > figure
		{
			box-sizing: border-box;
			width: 100%;
			height: 140px;
			padding: 0 56px 33px;
			margin: 0 0 27px;
			
			border-bottom: 1px solid #e6e6e6;
		}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td > div.tooltip > div > figure > img
			{
				width: 100%;
				height: 100%;

				object-fit: contain;
			}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td > div.tooltip > div > svg
		{
			width: 200px;
			margin: -30px auto 20px;
		}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td > div.tooltip > div > svg > path
			{
				fill: rgba(0, 0, 0, 0.1);
				stroke: rgb( 212, 212, 212 );
			}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td > div.tooltip > div > svg > path.current
				{
					fill: #5a9bb7;
				}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes > fieldset > ul
{
	
	display: -webkit-flex;
	
	display: -ms-flexbox;
	
	display: flex;
	overflow: hidden;
	
	box-sizing: border-box;
	height: 30px;
	padding: 0;
	margin: 0;
	
	line-height: 28px;
	
	list-style: none;
	
	border: 1px solid #e6e6e6;
	border-radius: 3px;
}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes > fieldset > ul > li
{
	position: relative;
	
	display: block;
	
	-webkit-flex-grow: 1;
	
	    -ms-flex-positive: 1;
	
	        flex-grow: 1;
}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes > fieldset > ul > li > label
	{
		display: block;
		
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		
		text-align: center;
		
		border-right: 1px solid #e6e6e6;
		
		transition: background-color 0.3s;
	}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes > fieldset > ul > li > input:not([disabled]):not(:checked) + label:hover, html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes > fieldset > ul > li > input:focus + label
	{
		cursor: pointer;
		
		background-color: rgba(255, 255, 255, 0.3);
	}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes > fieldset > ul > li > input
	{
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		
		opacity: 0;
	}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes > fieldset > ul > li > input[disabled] + label
		{
			color: rgba(255, 255, 255, 0.3);
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes > fieldset > ul > li > input:checked + label
		{
			background-color: #5a9bb7;
			
			border-color: #e6e6e6;
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes > fieldset > ul > li > input:checked[disabled] + label
		{
			color: rgba(51, 69, 84, 0.3);
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes > fieldset > ul > li:last-of-type > label
		{
			border-right: none;
		}

html > body > main > section.commercial > div.apartments > table > tbody > tr:hover > td.other::after
	{
		opacity: 1;
	}

html > body > main > section.commercial > div.apartments > table > tbody > tr:hover > td > div.tooltip
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td.other
{
	margin-left: auto;
	
	line-height: 120px;
}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td.other::after
	{
		
		display: inline-block;
		
		width: 40px;
		height: 40px;
		
		vertical-align: middle;
		
		content: "";
		
		opacity: 0;
		background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='15' viewBox='0 0 20 15' stroke='%23fff'%3E%3Cpath fill='none' stroke-miterlimit='10' d='M12 .5l7 7-7 7M19 7.5H0'/%3E%3C/svg%3E") center center no-repeat #5a9bb7;
		
		border-radius: 50%;
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
		
		transition: opacity 0.3s;
	}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td.other > h2, html > body > main > section.commercial > div.apartments > table > tbody > tr > td.other > form
	{
		display: none;
	}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td.other > a.more
{
	position: absolute;
	top: 0;
	left: 0;
	
	width: 100%;
	height: 100%;

	cursor: pointer;
}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td.other > a.more ~ *
	{
		display: none;
	}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td.other > span.favorites
{
	
	position: relative;
	z-index: 2;
	
	display: inline-block;
	
	margin-right: 20px;
	
	vertical-align: middle;
	
	/* Временное отключение */
	pointer-events: none;
	visibility: hidden;
}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td.other > span.favorites > input
	{
		position: absolute;
		z-index: -1;
		
		opacity: 0;
	}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td.other > span.favorites > label
	{
		display: block;
		
		cursor: pointer;
	}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td.other > span.favorites > label > svg
		{
			display: block;
			
			width: 20px;
			height: 20px;
			
			fill: none;
			stroke: #072b31;
			stroke-width: 2px;
			stroke-linejoin: round;
		}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td.other > span.favorites > input:focus + label > svg, html > body > main > section.commercial > div.apartments > table > tbody > tr > td.other > span.favorites > label:hover > svg
		{
			stroke: #c3beba;
		}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td.other > span.favorites > input:checked + label > svg
		{
			fill: #c3beba;
			stroke: #c3beba;
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes.field-floor > fieldset > ul
{
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	
	height: auto;
}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes.field-floor > fieldset > ul > li
{
	width: 50%;
}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes.field-floor > fieldset > ul > li > label
	{
		padding: 11px 20px;

		line-height: 20px;
		text-align: left;
		
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes.field-floor > fieldset > ul > li > label > span.result
		{
			display: block;

			font-size: 15px;

			opacity: 0.5;
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes.field-floor > fieldset > ul > li:nth-last-child(-n+2) > label
		{
			border-bottom: none;
		}

html > body > main > section.commercial > div.filter > form > ul.fields > li.checkboxes.field-floor > fieldset > ul > li:nth-child(2n) > label
		{
			border-right: none;
		}

@media (min-width: 700px)
	{
			html > body > header > div.tel > p.main > a.online-office:hover > svg
			{
				-webkit-transform: scale(1.1);
				        transform: scale(1.1);
			}
	}

@media (min-width: 700px) and (max-width: 1099px)
	{
	}

@media (min-width: 1100px)
	{
		#lightbox ~ *
		{
			transition: -webkit-filter 0 0.05s;
			transition: filter 0 0.05s;
			transition: filter 0 0.05s, -webkit-filter 0 0.05s;
		}
		
		#lightbox ~ main
		{
			transition: -webkit-transform 0.3s;
			transition: transform 0.3s;
			transition: transform 0.3s, -webkit-transform 0.3s;
			
			whill-change: transform;
		}
		
		#lightbox::after
		{
			position: fixed;
			right: 0;
			bottom: 0;
			
			width: calc(50vw - 35px);
			min-width: 540px;
			height: 120px;
			
			content: "";
			pointer-events: none;
			
			background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
			
			-webkit-transform: translateX(100%);
			
			        transform: translateX(100%);
			
			transition-property: -webkit-transform;
			
			transition-property: transform;
			
			transition-property: transform, -webkit-transform;
			transition-duration: 0.3s;
			transition-timing-function: ease-in;
		}
		#lightbox.open ~ *
		{
			-webkit-filter: blur(4px);
			        filter: blur(4px);
		}
		
		#lightbox.open ~ main
		{
			-webkit-transform: scale(0.9);
			        transform: scale(0.9);
		}
		
		#lightbox.open::after
		{
			-webkit-transform: translateX(0);
			        transform: translateX(0);
			
			transition-timing-function: ease-out;
		}

html > body > input#header_menu:not(:checked) + nav.main > a.online-office
		{
				position: absolute;
				top: 50%;
				right: -106px;
				
				box-sizing: border-box;
				width: 218px;
				padding: 11px 16px 8px;
				
				-webkit-transform: rotate( -90deg );
				
				        transform: rotate( -90deg )
		}

				html > body > input#header_menu:not(:checked) + nav.main > a.online-office::before
				{
					top: 7px;
				}

				html > body > input#header_menu:not(:checked) + nav.main > a.online-office::after
				{
					top: 19px;
				}

html > body > main > section.commercial > div.filter.stuck+div.apartments
{
		margin-left: calc(31.25vw - 22px)
}
	}

@media (min-width: 1100px) and (max-width: 1399px)
	{
html > body > main > section.commercial > div.filter
{
		padding-left: calc(3.13vw - 2px)
}

html > body > main > section.commercial > div.filter
{
		padding-right: calc(3.13vw - 2px)
}
	}

@media (min-width: 1101px)
	{

html > body > main > section.commercial > div.filter > h3
{
		width: 100%;
		margin-right: 0
}
	}

@media (max-width: 1920px)
		{

html > body > main > section.component.small > figure
	{
			-webkit-justify-content: flex-start;
			    -ms-flex-pack: start;
			        justify-content: flex-start;
			
			height: auto;
			padding-top: 0
	}

html > body > main > section.component.small > figure img
		{
				position: static;

				width: auto;
				max-width: 100%
		}

html > body > main > section.your-house
{
		max-width: 1734px
}

html > body > main > section.component > figure img
{
		position: absolute;
		top: 0;
		right: 0;
		
		width: calc(100% + 6.25vw - 4px);
		height: 100%;
	
		object-fit: cover
}

html > body > main > section.component > figure
{
		height: 0;
		padding-top: 40%
}

html > body > main > section.your-house > div.image img, html > body > main > section.your-house > div.image svg
{
		width: calc(100% + 3.13vw - 2px);

		object-fit: cover
}

html > body > main > section.your-house > div.image.small img, html > body > main > section.your-house > div.image.small svg
	{
			width: 62vw
	}

html > body > main > section.your-house > div.info
{
		margin-right: 64px
}
		}

@media (max-width: 1599px)
	{

html > body > main > section.environment > div.slideshow > div.controls, html > body > main > section.environment > div.illustration > div.controls
{
		bottom: 55px
}

html > body > main > section.environment > div.slideshow > div.sections > section, html > body > main > section.environment > div.illustration > div.sections > section
{
		top: 0;

		padding: 55px
}
	}

@media (max-width: 1399px)
	{
html > body > div.popup > details>summary, html > body > div.popup > a, html > body > main > section > p.goto > a, #lightbox > div.content > div.body > form > div.success > p.controls > button, html > body > main > section.apartments > a.all, #lightbox > div.content > div.body > form > ul.fields > li > button, html > body > main > section.commercial > div.filter > div.view-change > button, html > body > main > section.promo-form > form > div.success > p.controls > button, html > body > main > section.subscribe > form > div.success > p.controls > button, html > body > main > section.promo-form > form > ul.fields > li > button, html > body > main > section.subscribe > form > ul.fields > li > button
{
		padding: 0 27px
}
#lightbox > div.content > div.body > h2, #lightbox > div.content > div.body > h3, #lightbox > div.content > div.body > ul.frames > li > h3, #lightbox > div.content > div.body > form > div.success > p:first-of-type, html > body > main > section.environment > h2, html > body > main > section.commercial > div.filter > h3, html > body > main > section.promo-form > form > div.success > p:first-of-type, html > body > main > section.subscribe > form > div.success > p:first-of-type, html > body > main > section.environment > div.slideshow > div.sections > section > h3, html > body > main > section.environment > div.illustration > div.sections > section > h3, html > body > main > section.component > div.slideshow > ul.slides > li > h3
{
		font-size: 36px
}
#lightbox > div.content > div.body > h2, html > body > main > section.commercial > div.filter > h3, html > body > main > section.environment > div.slideshow > div.sections > section > h3, html > body > main > section.environment > div.illustration > div.sections > section > h3
{
		font-size: 24px
}
#lightbox > div.content > div.body > h3, #lightbox > div.content > div.body > ul.frames > li > h3, #lightbox > div.content > div.body > form > div.success > p:first-of-type, html > body > main > section.promo-form > form > div.success > p:first-of-type, html > body > main > section.subscribe > form > div.success > p:first-of-type, html > body > main > section.component > div.slideshow > ul.slides > li > h3
{
		font-size: 18px
}

html > body > footer
{
		padding-top: 40px;
		padding-bottom: 80px
}

html > body > header > h1
{
		font-size: 72px
}

html > body > footer > div.links
{
		max-width: 300px;
		margin-top: 0
}

html > body > footer > div.links > p.creator
{
		margin-top: 2em;
		margin-left: 0
}
		html > body > footer > div.links > ul.social > li
		{
			margin-left: 10px;
		}
			
			html > body > footer > div.links > ul.social > li > a
			{
				width: 40px;
				height: 40px;
			}

html > body > header > div.copyright
{
		display: none
}

html > body > header > div.seven-suns > span.subtitle
{
		display: none
}

html > body > header > div.subtitle > p
{
		max-width: 490px;
		
		font-size: 18px
}

html > body > main > section > p
{
		font-size: 17px
}

html > body > main > section > p + p
	{
			font-size: 14px
	}

html > body > header > div.slideshow > div.controls
{
		bottom: 60px
}

html > body > main > section.component.with-svg > figure img
			{
					height: 100%
			}

html > body > main > section.features > h2, html > body > main > section.features > p, html > body > main > section.features > h3, html > body > main > section.features > ul, html > body > main > section.features > div.markup
{
		max-width: 45%;
		padding-left: 45%
}

html > body > main > section.features > h2::before
	{
			left: 0
	}

html > body > main > section.your-house
{
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;

		padding: 0 calc(6.25vw - 4px)
}

#lightbox > div.content > div.body > article.commercial > div.info > ul.properties
{
		margin-right: -40px
}

#lightbox > div.content > div.body > article.commercial > div.info > figure
{
		padding-right: 20px
}

html > body > main > section.environment > div.slideshow, html > body > main > section.environment > div.illustration
{
		margin-right: 0;
		margin-left: 0
}

html > body > main > section.component > div.info:first-child
	{
			margin-right: 50px
	}

html > body > main > section.component > div.info > ul.transport
{
		margin-left: -50%
}

html > body > main > section.component > div.slideshow
{
		margin-left: calc(6.25vw - 4px)
}

html > body > main > section.component > figure
{
		padding-top: 70%
}

html > body > main > section.component > figure::before
	{
			content: none
	}

html > body > main > section.advantages > ul > li
{
		width: calc(33.33% - 16px);
		padding: 16px 20px
}

html > body > main > section.advantages > ul > li:not(:last-child)
	{
			margin-right: 24px
	}

html > body > main > section.component > div.slideshow > div.controls
{
		bottom: 30px;
		left: 30px
}

html > body > main > section.your-house > div.image img, html > body > main > section.your-house > div.image svg
{
		position: static
}

html > body > main > section.your-house > div.image
{
		width: calc(100% + 12.5vw - 9px);
		max-width: none;
		margin-left: calc(-6.25vw - -4px)
}

html > body > main > section.your-house > div.image.small
{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-justify-content: center;
		    -ms-flex-pack: center;
		        justify-content: center
}

html > body > main > section.your-house > div.image.small img, html > body > main > section.your-house > div.image.small svg
	{
			position: static;

			width: 100vw
	}

html > body > main > section.your-house > div.image > h2
{
		left: calc(6.25vw - 4px)
}

html > body > main > section.your-house > div.info
{
		width: 100%;
		max-width: none;
		padding: 40px 0
}

html > body > main > section.apartments > ul > li > a
{
		padding: 24px
}

html > body > main > section.commercial > div.apartments > table tr > td.room-type, html > body > main > section.commercial > div.apartments > table tr > th.room-type
	{
			width: 19%
	}

html > body > main > section.commercial > div.apartments > table tr > td.other, html > body > main > section.commercial > div.apartments > table tr > th.other
	{
			padding: 0
	}

html > body > main > section.environment > div.slideshow > div.sections > section, html > body > main > section.environment > div.illustration > div.sections > section
{
		top: 10px;

		padding: 40px
}

html > body > main > section.component > div.slideshow > ul.slides > li
{
		padding: 30px
}

html > body > main > section.component > div.slideshow > ul.slides > li > h3
{
		font-weight: 700
}

html > body > main > section.component > div.slideshow > ul.slides > li > img
{
		max-width: 45%;
		margin: 0
}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td > span.main[data-short]
			{
					font-size: 0
			}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td > span.main[data-short]::before
				{
						font-size: 28px;
						
						content: attr( data-short )
				}
	}

@media (max-width: 1099px)
	{
html > body > header
{
		min-height: 0;
		padding-left: 0
}
html > body > main > section.commercial > div.filter
{
		width: 100%;
		padding-right: calc(6.25vw - 4px)
}

#lightbox > div.content
{
		width: 100vw;
		min-width: 0
}

html > body
{
		padding-top: 44px
}

html > body.video-lightbox > aside#lightbox
	{
			margin: 0
	}

html > body.video-lightbox > aside#lightbox > div.content
		{
				display: -webkit-flex;
				display: -ms-flexbox;
				display: flex;
				-webkit-align-items: center;
				    -ms-flex-align: center;
				        align-items: center;
				
				width: 100%;
				min-height: 100vh;

				background: white
		}

html > body.video-lightbox > aside#lightbox > div.content > header
			{
					position: absolute;
					top: 40px;
					right: 40px;
					
					display: block
			}

html > body > input#header_menu:checked + nav.main > label
		{
				top: 35px;
				right: 5vw;
				
				width: 30px;
				height: 30px;
				padding: 0;

				background: url( 'images/btn-close.svg' ) center center no-repeat;

				box-shadow: none;

				-webkit-transform: none;

				        transform: none
		}

html > body > input#header_menu:checked + nav.main > label > img
			{
					display: none
			}

html > body > input#header_menu:checked + nav.main > div.logo > svg
			{
					transition: -webkit-transform 0s 0.2s;
					transition: transform 0s 0.2s;
					transition: transform 0s 0.2s, -webkit-transform 0s 0.2s
			}

html > body > input#header_menu:checked + nav.main > div.logo > svg > g
				{
						transition: opacity 0s 0.2s
				}

#lightbox > div.content > header > button.close
{
		width: calc(26px + 6.25vw);
		
		background-position: left center
}

#lightbox > div.content > div.body > h2
{
		padding-right: 40px
}

html > body > div.popup
{
		left: 5vw
}

html > body > footer
{
		padding-right: 5vw;
		padding-left: 5vw
}

html > body > footer > div.info
{
		margin-right: 20px
}

html > body > header#commercial + main
		{
				padding-left: 0
		}

html > body > header
{
		min-height: 100vh;
		padding-top: 130px;
		padding-right: 5vw;
		padding-bottom: 50px;
		padding-left: 5vw;
		margin-bottom: 60px;
		
		transition: min-height 0.5s
}

html > body > header > figure
{
		left: 0;

		object-position: -75px bottom
}

html > body > header > figure::before
	{
			background: rgba( 0, 0, 0, 0.35 )
	}

html > body > header > h1
{
		margin: 32px 0
}

html > body > header > img
{
		left: 0;

		object-position: -75px bottom
}

html > body > main.compilation
{
		padding: 0
}

html > body > nav.main
{
		width: 100vw;

		-webkit-transform: translateX( -100% );

		        transform: translateX( -100% )
}

html > body > footer > div.links > div.office
{
		height: auto;
		margin-top: 5px
}
		
		html > body > footer > div.links > div.office > a
		{
			width: 90px;
		}

html > body > footer > div.links > p.creator
{
		margin-top: 1em
}

html > body > footer > div.links > ul.social
{
		-webkit-order: -1;
		    -ms-flex-order: -1;
		        order: -1
}
		
		html > body > footer > div.links > ul.social > li
		{
			margin-right: 10px;
			margin-left: 0;
		}

html > body > header > div.copyright > small.copyright
{
		margin-bottom: 10px
}

html > body > header > div.seven-suns
{
		top: 30px;
		left: 5vw
}

html > body > header > div.seven-suns > a.logo > svg
	{
			width: 200px
	}

html > body > header > div.slideshow > ul.slides::before
	{
			background: rgba( 0, 0, 0, 0.35 )
	}

html > body > header > div.tel
{
		top: 35px
}

html > body > header > div.video-container
{
		top: 150px;
		right: calc(6.25vw - 4px);
		left: auto
}

html > body > nav.main > div.logo
{
		margin: 40px 5vw
}

html > body > nav.main > div.logo > svg
{
		width: 206px
}

html > body > nav.main > div.logo > svg > g.logo
		{
				opacity: 0
		}

html > body > nav.main > ul.menu
{
		margin-left: 5vw
}

html > body > nav.main > label
{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-justify-content: space-between;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		
		box-sizing: border-box;
		width: 100vw;
		height: 44px;
		padding: 0 5vw;

		background: white;

		box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 );

		-webkit-transform: translateX( 100% );

		        transform: translateX( 100% )
}

html > body > nav.main > label::before, html > body > nav.main > label::after
	{
			content: none
	}

html > body > nav.main > label > img
{
		display: block
}

html > body > nav.main > label > span
{
		margin-top: 0;
		
		font-size: 0;

		-webkit-transform: none;

		        transform: none
}

html > body > nav.main > label > span::before
	{
			top: 1px;
			right: 19px;
			
			-webkit-transform: rotate( 90deg );
			
			        transform: rotate( 90deg )
	}

#lightbox > div.content > div.body > article.commercial > div.info
{
		display: block
}

html > body > header > div.slideshow > div.controls
{
		bottom: 50px
}

html > body > main > section.commercial > h2
{
		margin-left: 5vw;
		
		text-align: left
}

html > body > main > section.commercial > h2::before
	{
			left: 5vw;

			-webkit-transform: none;

			        transform: none
	}

html > body > main > section.advantages
{
		padding: 0 5vw;
		margin: 0 auto 80px
}

html > body > main > section.environment.negative > div.slideshow > a, html > body > main > section.environment.negative > div.illustration > a
		{
				top: 5vw;
				right: 5vw
		}

html > body > main > section.environment.negative > div.slideshow, html > body > main > section.environment.negative > div.illustration
	{
			background: white
	}

html > body > main > section.environment.negative > div.slideshow > div.sections, html > body > main > section.environment.negative > div.illustration > div.sections
		{
				padding-bottom: 0
		}

html > body > main > section.environment.negative > div.slideshow > div.sections > section, html > body > main > section.environment.negative > div.illustration > div.sections > section
			{
					right: 0
			}

html > body > main > section.environment.negative > div.slideshow > div.controls, html > body > main > section.environment.negative > div.illustration > div.controls
		{
				right: 5vw;
				bottom: -10px;
				left: auto
		}

html > body > main > section.environment
{
		padding-top: 40px
}

html > body > main > section.environment::before
	{
			display: none
	}

html > body > main > section.environment > h2, html > body > main > section.environment > p
{
		max-width: 540px;
		margin-right: 5vw;
		margin-left: 5vw;
		
		text-align: left
}

html > body > main > section.environment > h2
{
		background-position-x: left
}

html > body > main > section.component.dark
{
		padding-top: 60px;
		padding-bottom: 0
}

html > body > main > section.component
{
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;

		padding: 0 5vw;
		margin-bottom: 60px
}

html > body > main > section.component.with-svg > figure img
			{
					width: 100%;
					height: auto;

					border-radius: 0
			}

html > body > main > section.features
{
		max-width: 100%;
		margin-top: 70px;
		margin-right: 5vw;
		margin-left: 5vw
}

html > body > main > section.features > figure
{
		left: -5vw;

		width: calc(37.5vw - 26px);

		-webkit-transform: none;

		        transform: none
}

html > body > main > section.features > h2, html > body > main > section.features > p, html > body > main > section.features > h3, html > body > main > section.features > ul, html > body > main > section.features > div.markup
{
		max-width: 540px;
		margin-left: 0
}

html > body > main > section.features > ul > li
	{
			width: 100%
	}

html > body > main > section.features > ul > li:not(:nth-last-child( -n + 2 ))
		{
				margin-bottom: 25px
		}

html > body > main > section.features > ul > li:nth-last-child( 2 )
		{
				margin-bottom: 25px
		}

html > body > main > section.promo-form
{
		padding-right: 5vw;
		padding-left: 5vw;

		background-position: right top;
		background-size: auto
}

html > body > main > section.subscribe
{
		padding: 60px 5vw;
		margin-top: -60px
}

html > body > main > section.subscribe > h2, html > body > main > section.subscribe > p
{
		margin-left: 0;
		
		text-align: left
}

html > body > main > section.your-house
{
		padding: 0 5vw;
		margin: -60px 0 60px
}

#lightbox > div.content > div.body > article.commercial > div.info > ul.properties
{
		margin-right: 0
}

#lightbox > div.content > div.body > article.commercial > div.info > figure
{
		padding-right: 0
}

#lightbox > div.content > div.body > article.commercial > div.info > figure > svg
{
		margin-bottom: 24px
}

#lightbox > div.content > div.body > form > ul.fields > li.checkbox
{
		-webkit-order: 0;
		    -ms-flex-order: 0;
		        order: 0
}

html > body > main > section.commercial > div.filter
{
		-webkit-align-items: baseline;
		    -ms-flex-align: baseline;
		        align-items: baseline;
		
		padding-top: 0;
		
		border: none
}

html > body > main > section.commercial > div.plan
{
		width: 100%;
		height: 500px
}

html > body > main > section.commercial > div.apartments
{
		overflow-x: auto;
		
		width: 100%
}

html > body > main > section.environment > div.slideshow, html > body > main > section.environment > div.illustration
{
		padding-top: 67%;
		margin-top: 40px;
		
		background: url( 'images/pattern.svg' ) #1b3c57;

		border-top: none
}

html > body > main > section.environment > div.slideshow::before, html > body > main > section.environment > div.illustration::before
	{
			display: none
	}

html > body > main > section.component > div.info:not(:first-child)
	{
			-webkit-order: -1;
			    -ms-flex-order: -1;
			        order: -1;
			
			width: 100%;
			margin-bottom: 40px
	}

html > body > main > section.component > div.info:first-child
	{
			width: 100%;
			margin-right: 0
	}

html > body > main > section.component > div.info > ul.transport
{
		margin-left: 0
}

html > body > main > section.component > div.slideshow
{
		-webkit-order: 1;
		    -ms-flex-order: 1;
		        order: 1;
		float: none;

		width: 100vw;
		height: 350px;
		margin: 40px -5vw 0 -5vw
}

html > body > main > section.component > figure img
{
		position: static;

		width: 100%;
		height: auto
}

html > body > main > section.component > figure
{
		width: calc(100% + 10vw);
		height: auto;
		padding-top: 0;
		margin-left: -5vw
}

html > body > main > section.apartments > ul > li
{
		width: 50%
}

html > body > main > section.apartments > ul > li:not(:nth-child( 2n - 1 ))
	{
			border-left: none
	}

html > body > main > section.commercial > div.filter > div.view-change
{
		width: 240px
}

html > body > main > section.commercial > div.plan > div.buttons
{
		top: 20px;
		right: auto;
		left: 5vw;

		-webkit-transform: none;

		        transform: none
}

html > body > main > section.commercial > div.plan > div.tooltip
{
		top: auto !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;

		max-width: none;

		border-radius: 8px 8px 0 0;

		-webkit-transform: none !important;

		        transform: none !important
}

html > body > main > section.commercial > div.plan > div.tooltip.building, html > body > main > section.commercial > div.plan > div.tooltip.room
	{
			pointer-events: auto
	}

html > body > main > section.commercial > div.plan > div.tooltip.building::after, html > body > main > section.commercial > div.plan > div.tooltip.room::after
		{
				content: 'Смотреть'
		}

html > body > main > section.commercial > div.apartments > table
{
		min-width: 700px
}

html > body > main > section.advantages > ul > li
{
		width: calc(50% - 12px)
}

html > body > main > section.advantages > ul > li:not(:last-child)
	{
			margin: 0 0 24px
	}

html > body > main > section.advantages > ul > li:first-child
	{
			margin-right: 24px
	}

html > body > main > section.environment > div.slideshow:not(.ready) > div.controls, html > body > main > section.environment > div.illustration:not(.ready) > div.controls
{
		display: none
}

html > body > main > section.environment > div.slideshow:not(.ready) > div.sections, html > body > main > section.environment > div.illustration:not(.ready) > div.sections
{
		display: none
}

html > body > main > section.environment > div.slideshow > div.sections, html > body > main > section.environment > div.illustration > div.sections
{
		position: relative;

		padding-bottom: 80px
}

html > body > main > section.environment > div.slideshow > div.controls, html > body > main > section.environment > div.illustration > div.controls
{
		bottom: 20px;
		left: 50%;

		-webkit-transform: translateX( -50% );

		        transform: translateX( -50% )
}

html > body > main > section.environment > div.slideshow > ul.slides, html > body > main > section.environment > div.illustration > ul.slides
{
		position: absolute;
		top: 0;
		right: 0;
		
		width: 100vw;
		height: 67vw;
		margin: 0 0 40px
}

html > body > main > section.component > div.slideshow:not(.ready) > div.controls
{
		display: none
}

html > body > main > section.component > div.slideshow:not(.ready) > div.sections
{
		display: none
}

html > body > main > section.component > div.slideshow > ul.slides
{
		position: absolute;
		top: 0;
		right: 0;
		
		width: 100vw;
		margin: 0 0 40px
}

html > body > main > section.component > div.slideshow > div.controls
{
		left: 5vw
}

html > body > main > section.component > ul > li
{
		text-align: left
}

html > body > main > section.your-house > div.image
{
		width: calc(100% + 10vw);
		margin-left: -5vw
}

html > body > main > section.your-house > div.image > h2
{
		bottom: 5vw;
		left: 5vw
}

html > body > main > section.commercial > div.apartments > table tr > td.image, html > body > main > section.commercial > div.apartments > table tr > th.image
	{
			padding-left: 5vw
	}

html > body > main > section.commercial > div.apartments > table tr > td.room-type, html > body > main > section.commercial > div.apartments > table tr > th.room-type
	{
			width: 18%
	}

html > body > main > section.commercial > div.apartments > table tr > td.square-total, html > body > main > section.commercial > div.apartments > table tr > th.square-total
	{
			width: 7%
	}

html > body > main > section.environment > div.slideshow > div.sections > section, html > body > main > section.environment > div.illustration > div.sections > section
{
		top: 20px;
		right: auto;
		left: 0;
		
		padding-top: 0;
		padding-right: 5vw;
		padding-bottom: 30px;
		padding-left: 5vw
}

html > body > main > section.component > div.slideshow > ul.slides > li
{
		padding: 30px 5vw
}

html > body > main > section.promo-form > form > ul.fields > li.checkbox
{
		-webkit-order: 0;
		    -ms-flex-order: 0;
		        order: 0
}

html > body > main > section.promo-form > form > ul.fields > li:not(.controls):not(.checkbox):not(.text)
	{
			width: 100%
	}

html > body > main > section.subscribe > form > ul.fields > li.checkbox
{
		-webkit-order: 0;
		    -ms-flex-order: 0;
		        order: 0
}

html > body > main > section.subscribe > form > ul.fields > li:not(.controls):not(.checkbox)
{
		width: 100%
}

html > body > main > section.commercial > div.apartments > table > tbody > tr:hover
	{
			box-shadow: none
	}

html > body > main > section.commercial > div.apartments > table > thead > tr.fixed
{
		display: none
}

html > body > main > section.commercial > div.apartments > table > tbody > tr:hover > td > div.tooltip
{
		display: none
}
	}

@media (max-width: 1099px) and (max-aspect-ratio: 5/3)
	{

html > body > header
{
		min-height: calc(75vw - 94px)
}
	}

@media (max-width: 1099px) and (max-aspect-ratio: 1/1)
	{

html > body > header
{
		min-height: calc(133vw - 94px)
}
	}

@media (max-width: 1099px) and (max-aspect-ratio: 11/16)
	{

html > body > header
{
		min-height: calc(178vw - 94px)
}
	}

@media (max-width: 1099px) and (max-aspect-ratio: 2/1)
	{

html > body > header
{
		min-height: calc(56vw - 94px)
}
	}

@media (max-width: 699px)
	{
#lightbox > div.content > div.body > p, html > body > main > section > p, html > body > main > section.environment > div.slideshow > div.sections > section > p, html > body > main > section.environment > div.illustration > div.sections > section > p
{
		font-size: 18px;
		line-height: 1.4
}

html > body > main > section.commercial > h2, html > body > main > section.features > h2, html > body > main > section.component > div.info > h2, html > body > main > section.your-house > div.info > h2
{
		margin-bottom: 20px;

		font-size: 30px;
		line-height: 1.09
}
html > body > main > section.promo-form > form > ul.fields > li > input:not([type="checkbox"]):not([type="radio"]), html > body > main > section.subscribe > form > ul.fields > li > input:not([type="checkbox"]):not([type="radio"])
{
		background-color: #1b3c57
}
html > body > main > section.commercial > div.filter
{
		padding-right: 5vw;
		padding-left: 5vw
}

html > body.video-lightbox > aside#lightbox > div.content > header
			{
					top: 5vw;
					right: 5vw
			}

html > body > div.popup
{
		bottom: 0;
		left: 0;

		width: 100vw;

		border-radius: 4px 4px 0 0
}

html > body > footer
{
		-webkit-flex-wrap: wrap;
		    -ms-flex-wrap: wrap;
		        flex-wrap: wrap
}

html > body > footer > div.contacts > a.tel
	{
			margin-bottom: 8px
	}

html > body > footer > div.contacts > p.opening-hours
	{
			margin: 0 0 8px
	}

html > body > footer > div.contacts > p.copyright
	{
			position: absolute;
			bottom: 28px
	}

html > body > footer > div.contacts
{
		-webkit-flex: auto;
		    -ms-flex: auto;
		        flex: auto
}

html > body > footer > div.info
{
		padding-top: 0;
		margin-bottom: 40px
}

html > body > footer > div.info > p.address
		{
				margin-bottom: 32px
		}

html > body > footer > div.info
{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: nowrap;
		    -ms-flex-wrap: nowrap;
		        flex-wrap: nowrap;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;
		
		min-width: 250px;
		margin-right: 0
}

html > body > header#commercial
	{
			min-height: 300px;
			padding-top: 80px;
			padding-bottom: 50px
	}

html > body > header
{
		positive: relative;

		padding-bottom: 120px
}

html > body > header > h1 > a
	{
			margin-bottom: 8px
	}

html > body > header > h1
{
		margin-bottom: 16px;
		
		font-size: 42px;
		line-height: 38px
}

html > body > footer > div.links
{
		-webkit-align-items: flex-start;
		    -ms-flex-align: start;
		        align-items: flex-start;
		
		width: 100%;
		max-width: 100%
}

html > body > footer > div.links > a.domrf
{
		margin: 8px 0 0 -16px
}

html > body > footer > div.links > div.office
{
		-webkit-flex: auto;
		    -ms-flex: auto;
		        flex: auto;
		min-width: 150px;
		margin-top: 10px;
		margin-right: 5%
}
		
		html > body > footer > div.links > div.office > a
		{
			width: 110px;
		}

html > body > footer > div.links > p.creator
{
		-webkit-flex: auto;
		    -ms-flex: auto;
		        flex: auto;
		min-width: 250px
}

html > body > header > div.subtitle > p
{
		font-size: 14px
}

html > body > header > div.tel
{
		position: static;
		
		margin: 20px 0 0
}

html > body > header > div.tel > dl
{
		display: none
}

html > body > header > div.tel > p.slogan
{
		display: none
}

html > body > header > div.video-container
{
		top: auto;
		right: 5vw;
		bottom: 12px;

		-webkit-flex-direction: column;

		    -ms-flex-direction: column;

		        flex-direction: column
}

html > body > main > section > p.goto
{
		text-align: center
}

#lightbox > div.content > div.body > article.commercial > div.layout
{
		display: block;

		margin-bottom: 20px
}

html > body > header > div.slideshow > div.controls
{
		right: 0;
		left: 5vw
}

html > body > header > div.tel > p.main
{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-direction: row-reverse;
		    -ms-flex-direction: row-reverse;
		        flex-direction: row-reverse;

		margin-bottom: 0
}

html > body > header > div.tel > p.main > a.online-office
{
		display: none
}

html > body > header > div.tel > p.main > a.tel
{
		margin-right: 40px;
		margin-left: 0;
		
		font-size: 21px
}
		
		html > body > header > div.tel > p.main > a.tel::before
		{
			content: none;
		}

html > body > header > div.video-container > div.video-info > p
{
		font-size: 16px;
		line-height: 1.75;
		text-align: right
}

html > body > header > div.video-container > div.video-wrapper
{
		margin: 0 0 12px
}

html > body > main > section.component:first-child > div.info > p:first-of-type
			{
					font-size: 20px;
					line-height: 1.4
			}

html > body > main > section.component.with-svg > figure img
			{
					position: relative;
					left: 50%;
					
					width: 700px;
					height: auto;

					-webkit-transform: translateX( -50% );

					        transform: translateX( -50% )
			}

html > body > main > section.features > figure
{
		position: relative;
		top: 0;

		width: calc(100% + 10vw);
		margin-bottom: 25px
}

html > body > main > section.features > h2, html > body > main > section.features > p, html > body > main > section.features > h3, html > body > main > section.features > ul, html > body > main > section.features > div.markup
{
		max-width: 100%;
		padding-left: 0
}

html > body > main > section.features > h3
{
		display: none
}

html > body > main > section.features > p
{
		margin-bottom: 25px
}

html > body > main > section.promo-form
{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;

		padding: 40px 5vw
}

html > body > main > section.promo-form > div.timer
{
		margin-bottom: 20px
}

html > body > main > section.subscribe > h2
{
		font-size: 30px;
		line-height: 1.09
}

html > body > main > section.subscribe > p
{
		font-size: 20px;
		line-height: 1.4
}

#lightbox > div.content > div.body > article.commercial > div.layout > figure
{
		height: auto;

		border-bottom: 1px solid #e6e6e6
}

#lightbox > div.content > div.body > article.commercial > div.layout > figure.layout
	{
			max-width: none;
			height: 300px;
			padding: 0 0 20px;
			margin: 0 0 20px;

			border-right: none
	}

#lightbox > div.content > div.body > article.commercial > div.layout > figure > img:not(.zoom)
	{
			display: block;
			
			margin: 0 auto
	}

#lightbox > div.content > div.body > article.commercial > div.layout > figure > img.zoom
	{
			display: none
	}

html > body > main > section.commercial > div.filter
{
		padding-top: 0;
		padding-right: 5vw
}

html > body > main > section.commercial > div.plan[data-building] > svg
		{
				width: 1000%
		}

html > body > main > section.component > div.info > p:not(:first-of-type)
	{
			font-size: 18px;
			line-height: 1.4
	}

html > body > main > section.component > div.info > p:first-of-type
	{
			font-size: 20px;
			line-height: 1.4
	}

html > body > main > section.component > div.info > ul.transport > li
	{
			width: 50%
	}

html > body > main > section.component > div.info > ul.transport > li:not(:nth-child( -n + 3 ))
		{
				margin-top: 20px
		}

html > body > main > section.component > div.info > ul.transport > li:first-child, html > body > main > section.component > div.info > ul.transport > li:nth-child( 4 )
		{
				-webkit-order: -1;
				    -ms-flex-order: -1;
				        order: -1;

				margin-top: 0
		}

html > body > main > section.component > div.info > ul.transport > li:nth-child( 2 ), html > body > main > section.component > div.info > ul.transport > li:nth-child( 3 )
		{
				margin-top: 100px
		}

html > body > main > section.component > div.info > ul.transport > li:nth-child( 3 )::before
			{
					content: none
			}

html > body > main > section.component > div.slideshow
{
		height: 520px;
		max-height: none
}

html > body > main > section.component > ul
{
		-webkit-column-gap: 24px;
		   -moz-column-gap: 24px;
		        column-gap: 24px
}

html > body > main > section.promo-form > form
{
		-webkit-order: 1;
		    -ms-flex-order: 1;
		        order: 1;
		float: none;

		width: 100%;
		margin-left: 0
}

html > body > main > section.apartments > ul > li
{
		width: 100%
}

html > body > main > section.apartments > ul > li:not(:nth-child( 4n - 3 ))
	{
			border-left: 1px solid #e6e6e6
	}

html > body > main > section.apartments > ul > li:not(:nth-child( 2n - 1 ))
	{
			border-left: 1px solid #e6e6e6
	}

html > body > main > section.commercial > div.filter > div.view-change
{
		width: 100%
}

html > body > main > section.commercial > div.apartments > table
{
		min-width: 0
}

html > body > main > section.advantages > ul > li
{
		width: 100%
}

html > body > main > section.advantages > ul > li:first-child
	{
			margin-right: 0
	}

html > body > main > section.component > div.slideshow > div.controls
{
		right: auto;
		bottom: 20px;
		left: 50%;

		-webkit-transform: translateX( -50% );

		        transform: translateX( -50% )
}

html > body > main > section.component > ul > li > strong
{
		font-size: 30px;
		line-height: 1.09
}

html > body > main > section.your-house > div.image > figure.mobile
	{
			display: block
	}

html > body > main > section.your-house > div.image > figure.desktop
	{
			display: none
	}

html > body > main > section.commercial > div.apartments > table tr
{
		display: block;

		padding: 20px
}

html > body > main > section.commercial > div.apartments > table tr > td, html > body > main > section.commercial > div.apartments > table tr > th
{
		display: block;

		border-top: none
}

html > body > main > section.commercial > div.apartments > table tr > td:not(.image):not(:last-child), html > body > main > section.commercial > div.apartments > table tr > th:not(.image):not(:last-child)
		{
				margin-bottom: 16px
		}

html > body > main > section.commercial > div.apartments > table tr > td:not(.image), html > body > main > section.commercial > div.apartments > table tr > th:not(.image)
	{
			margin-left: 60px
	}

html > body > main > section.commercial > div.apartments > table tr > td.image, html > body > main > section.commercial > div.apartments > table tr > th.image
	{
			float: left;

			width: 60px;
			padding: 0
	}

html > body > main > section.component > div.info > ul:not(.transport) > li
{
		width: calc(50% - 8px);

		font-size: 4.32vw
}

html > body > main > section.component > div.info > ul:not(.transport) > li:not(:last-child)
	{
			margin: 0 0 32px
	}

html > body > main > section.component > div.info > ul:not(.transport) > li:not(:nth-child( 2n ))
	{
			margin-right: 16px
	}

html > body > main > section.component > div.info > ul:not(.transport) > li > strong
{
		font-size: 9.55vw
}

html > body > main > section.component > div.slideshow > ul.slides > li
{
		text-align: center
}

html > body > main > section.component > div.slideshow > ul.slides > li > img
{
		float: none;
		
		max-width: 100%;
		height: 260px;
		max-height: none;
		margin-bottom: 20px
}

html > body > main > section.your-house > div.info > p:not(:first-of-type):not(.goto)
	{
			font-size: 18px;
			line-height: 1.4
	}

html > body > main > section.your-house > div.info > p:first-of-type:not(.goto)
	{
			font-size: 20px;
			line-height: 1.4
	}

html > body > main > section.commercial > div.filter > form > ul.fields > li > div.range > ul.inputs
	{
			padding: 0 calc(5vw - 8px)
	}

html > body > main > section.commercial > div.filter > form > ul.fields > li > div.range > div.controls
	{
			right: 5vw;
			left: 5vw
	}

html > body > main > section.commercial > div.apartments > table > tbody > tr
{
		height: 200px
}

html > body > main > section.commercial > div.apartments > table > thead > tr
{
		display: none
}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td.image > img
	{
			width: 80px
	}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td > span.main
		{
				margin-bottom: -4px;
				
				font-size: 22px
		}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td > span.additional
		{
				margin-top: 4px
		}

html > body > main > section.commercial > div.apartments > table > tbody > tr > td.other::after
	{
			position: absolute;
			right: 20px;
			bottom: 20px
	}
	}

@media (max-height: 649px) and (min-width: 1100px)
			{

html > body > input#header_menu:not(:checked) + nav.main > a.online-office
		{
				top: 325px
		}
			}

@media screen and (min-width: 700px) and (max-width: 1099px)
	{

html > body > footer > div.contacts
{
		-webkit-flex: none;
		    -ms-flex: none;
		        flex: none;
		min-width: 0;
		width: 210px;
		margin-right: 4%
}
		html > body > footer > div.links > ul.social > li:last-of-type
		{
			margin-right: 0;
		}
	}