html > body > main > section.layouts > div.slideshow > ul.slides > li > a:not(.lazy-image)
{

	position: relative;
	z-index: 1;
	
	display: inline-block;
	overflow: hidden;
	
	box-sizing: border-box;
	height: 56px;
	padding: 0 32px;
	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: #1b8b80;
	
	border: none;
	border-radius: 28px;
	box-shadow: 16px 0 20px rgba( 86, 63, 0, 0.08 );
}

	html > body > main > section.layouts > div.slideshow > ul.slides > li > a:not(.lazy-image):not([disabled])
	{
		cursor: pointer;
	}

	html > body > main > section.layouts > div.slideshow > ul.slides > li > a:not(.lazy-image):not([disabled]):focus::before, html > body > main > section.layouts > div.slideshow > ul.slides > li > a:not(.lazy-image):not([disabled]):hover::before
			{
				-webkit-transform: translateY( 0 );
				        transform: translateY( 0 );
			}

	html > body > main > section.layouts > div.slideshow > ul.slides > li > a:not(.lazy-image)::before
	{
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -1;

		width: 100%;
		height: 100%;

		content: '';

		background: #072b31;

		border-radius: 28px;

		-webkit-transform: translateY( 100% );

		        transform: translateY( 100% );

		transition: -webkit-transform 0.25s;

		transition: transform 0.25s;

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

/**
 * Сбросить всё оформление со стандартной кнопки
 */
html > body > main > section > section > h3, html > body > main > section.layouts > 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;
}
html > body > main > section > section > p
{
	margin: 0 0 24px;
	
	line-height: 1.5;
}
html > body > main
{
	position: relative;
	z-index: 1;
	
	overflow: hidden;
	
	box-sizing: border-box;
	height: auto;
	min-height: 100vh;
	padding: 0 0 0 70px;
}
/**
 * Сбросить оформление с details и скрыть контент
 */
%button_stroke:not([disabled]):hover, %button_stroke:not([disabled]):focus
	{
		color: #072b31;
	}
html > body > main > section.layouts > div.slideshow > ul.slides > li > h3
{
	font-size: 21px;
	font-weight: 700;
	line-height: 1.5;
}
html > body > main > section > section > h3
{
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
}
@supports (display: grid)
	{
	}

@supports (display: grid)
	{
		
		@media (max-width: 1099px)
		{
		}
	}

aside:not(#lightbox)
{
	position: absolute;

	width: 210px;
	padding-left: 80px;

	font-size: 15px;
	line-height: 1.47;

	color: rgb(89, 113, 117);
}

aside:not(#lightbox).eugenia
	{
		padding-top: 8px;
	}

aside:not(#lightbox).eugenia::before
		{
			background-image: url( '/images/index/people/eugenia.png' );
			background-size: cover;
		}

aside:not(#lightbox).mall::before
		{
			background-image: url( 'images/note/mall.svg' );
		}

aside:not(#lightbox)::before
	{
		position: absolute;
		top: 0;
		left: 0;

		width: 60px;
		height: 60px;

		content: '';

		background-position: center center;
		background-repeat: no-repeat;
		background-color: white;
		
		border-radius: 50%;
		box-shadow: 0 2px 10px 0 rgba( 0, 0, 0, 0.15 );
	}

aside:not(#lightbox) > a
	{
		text-decoration: none;
		
		color: #1b8b80;

		border-bottom: 1px solid #1b8b80;
	}

aside:not(#lightbox) > a:hover
		{
			border-bottom: none;
		}

aside:not(#lightbox) > span
	{
		display: block;

		font-weight: 700;

		color: #072b31;
	}

html > body.loaded > nav.main:not(.open)
	{
		left: 0;
	}

html > body.loaded > header::before
		{
			bottom: 100%;
		}

html > body.loaded > header > h1, html > body.loaded > header > div.subtitle
		{
			opacity: 1;
		}

html > body.loaded > header > h1::before, html > body.loaded > header > div.subtitle::before
			{
				left: 100%;
			}

html > body.loaded > header > video, html > body.loaded > header > div.button, html > body.loaded > header > button.close-video, html > body.loaded > header > figure, html > body.loaded > header > div.video-container
		{
			opacity: 1;
		}

html > body.loaded > header > div.seven-suns, html > body.loaded > header > div.tel
		{
			-webkit-transform: translateY( 0 );
			        transform: translateY( 0 );
		}

html > body.loaded > header > svg
		{
			opacity: 0;
		}

html > body.loaded > header > div.copyright
		{
			-webkit-transform: translateX( 0 );
			        transform: translateX( 0 );
		}

html > body
{
	
}

html > body > a.online-office
{
	position: fixed;
	bottom: 24px;
	left: 94px;
	z-index: 2;

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

	text-decoration: none;

	pointer-events: none;

	color: #e8af32;
	opacity: 0;
	background: #072b31;

	border-radius: 4px;
	outline: none;

	-webkit-transform: translateY( 200px );

	        transform: translateY( 200px );

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

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

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

html > body > a.online-office.before-footer
	{
		position: absolute;
		bottom: auto;

		-webkit-transform: translateY( calc(-100% - 24px) );

		        transform: translateY( calc(-100% - 24px) );
	}

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

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

		background: url( 'images/arrow-small.svg' ) center center no-repeat #1b8b80;
		background-size: 18px;

		border-radius: 50%;
	}

html > body > a.online-office > svg
	{
		margin-bottom: 12px;
		
		fill: white;
	}

html > body > a.online-office > p
	{
		margin: 0;
		
		font-size: 14px;
		line-height: 18px;

		color: white;
	}

html > body > a.online-office > button[type="button"]
	{
		position: absolute;
		top: 0;
		right: -40px;

		width: 40px;
		height: 40px;
		padding: 0;

		cursor: pointer;

		background: none;

		border: none;
		outline: none;
	}

html > body > a.online-office > button[type="button"]::before, html > body > a.online-office > button[type="button"]::after
		{
			position: absolute;
			top: 26px;
			left: 8px;

			width: 12px;
			height: 2px;

			content: '';

			background: #d4d7d9;
		}

html > body > a.online-office > button[type="button"]::before
		{
			-webkit-transform: rotate( 45deg );
			        transform: rotate( 45deg );
		}

html > body > a.online-office > button[type="button"]::after
		{
			-webkit-transform: rotate( -45deg );
			        transform: rotate( -45deg );
		}

html > body > header::before, html > body > header > h1::before, html > body > header > div.subtitle::before
	{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		
		/* content: ''; */

		background: #072b31;
	}

html > body > header::before
	{
		z-index: 1;
		
		transition: bottom 1s 0.5s;
	}

html > body > header > h1, html > body > header > div.subtitle
	{
		opacity: 0;

		transition: opacity 0.75s 0.75s;
	}

html > body > header > h1::before, html > body > header > div.subtitle::before
		{
			transition: left 0.75s 0.75s;
		}

html > body > header > div.seven-suns, html > body > header > div.tel
	{
		z-index: 2;

		-webkit-transform: translateY( -160px );

		        transform: translateY( -160px );

		transition: -webkit-transform 0.25s 0.25s;

		transition: transform 0.25s 0.25s;

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

html > body > header > svg
	{
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 1;

		width: 244px;

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

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

		transition: opacity 0.25s;
	}

html > body > header > svg > path
		{
			opacity: 0.1;

			fill: #1b8b80;
		}

html > body > header > svg > path:first-child
			{
				-webkit-animation: color-blink 1s infinite;
				        animation: color-blink 1s infinite;
			}

html > body > header > svg > path:nth-child( 2 )
			{
				-webkit-animation: color-blink 1s 0.25s infinite;
				        animation: color-blink 1s 0.25s infinite;
			}

html > body > header > svg > path:nth-child( 3 )
			{
				-webkit-animation: color-blink 1s 0.5s infinite;
				        animation: color-blink 1s 0.5s infinite;
			}

html > body > header > svg > path:last-child
			{
				-webkit-animation: color-blink 1s 0.75s infinite;
				        animation: color-blink 1s 0.75s infinite;
			}

html > body > header > div.subtitle
	{
		position: relative;
	}

html > body > header > figure
	{
		z-index: 0;

		opacity: 0;
	}

html > body > header > div.copyright
	{
		-webkit-transform: translateY( 80px );
		        transform: translateY( 80px );

		transition: -webkit-transform 0.5s 1s;

		transition: transform 0.5s 1s;

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

html > body > nav.main:not(.open)
	{
		left: -70px;

		transition:
			left 0.25s 0.25s,
			background 0.2s 0.2s,
			-webkit-transform 0.2s 0.2s;

		transition:
			left 0.25s 0.25s,
			background 0.2s 0.2s,
			transform 0.2s 0.2s;

		transition:
			left 0.25s 0.25s,
			background 0.2s 0.2s,
			transform 0.2s 0.2s,
			-webkit-transform 0.2s 0.2s;
	}

html > body > main > section.advantages.scrolled-to > ul > li
		{
			-webkit-transform: translateY( 0 );
			        transform: translateY( 0 );
		}

html > body > main > section.advantages > ul > li
	{
		-webkit-transform: translateY( 60px );
		        transform: translateY( 60px );
	}

html > body > main > section.advantages > ul > li:nth-child( -n + 4 )
		{
			transition: -webkit-transform 1s;
			transition: transform 1s;
			transition: transform 1s, -webkit-transform 1s;
		}

html > body > main > section.advantages > ul > li:nth-last-child( -n + 4 )
		{
			transition: -webkit-transform 1s 0.5s;
			transition: transform 1s 0.5s;
			transition: transform 1s 0.5s, -webkit-transform 1s 0.5s;
		}

html > body > main > section.your-house.scrolled-to > h2, html > body > main > section.your-house.scrolled-to > p
		{
			opacity: 1;
		}

html > body > main > section.your-house.scrolled-to > h2::before
		{
			left: 100%;
		}

html > body > main > section.your-house.scrolled-to > p
		{
			-webkit-transform: translateY( 0 );
			        transform: translateY( 0 );
		}

html > body > main > section.your-house > h2, html > body > main > section.your-house > p
	{
		opacity: 0;

		transition: opacity 1s;
	}

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

html > body > main > section.your-house > h2::before
		{
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;

			content: '';

			background: #fbfbfb;

			transition: left 1.5s;
		}

html > body > main > section.your-house > p
	{
		-webkit-transform: translateY( 60px );
		        transform: translateY( 60px );

		transition: -webkit-transform 1s;

		transition: transform 1s;

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

html > body > main > section.architecture
{
	margin-bottom: 100px;
}

html > body > main > section.architecture > figure
{
	max-width: 1360px;
	margin: 50px auto 0;
}

html > body > main > section.architecture > figure > img
	{
		display: block;
		
		width: 100%;
	}

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

html > body > main > section.comfort
{
	position: relative;
	
	min-height: 355px;
	padding-top: 260px;
}

html > body > main > section.comfort > figure
{
	position: absolute;
	top: 119px;
	left: calc(50vw - 960px);

	margin: 0;
}

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

		width: 200px;

		content: '';

		background: linear-gradient( to right, white, transparent );
	}

html > body > main > section.comfort > figure picture
	{
		display: block;

		font-size: 0;
	}

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

		font-size: 15px;
	}

html > body > main > section.comfort > h2, html > body > main > section.comfort > p
{
	max-width: 575px;
	padding-left: 675px;
	margin-right: auto;
	margin-left: auto;
}

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

html > body > main > section.layouts.scrolled-to > h2
		{
			opacity: 1;
		}

html > body > main > section.layouts.scrolled-to > h2::before
			{
				left: 100%;
			}

html > body > main > section.layouts.scrolled-to > p
		{
			-webkit-transform: translateY( 0 );
			        transform: translateY( 0 );
		}

html > body > main > section.layouts::after
	{
		display: table;
		clear: both;

		content: '';
	}

html > body > main > section.layouts > h2, html > body > main > section.layouts > p
{
	max-width: 475px;
	padding-left: 660px;
	margin-right: auto;
	margin-left: auto;
}

html > body > main > section.layouts > h2
{
	position: relative;

	opacity: 0;
	background-position-x: 660px;

	transition: opacity 1s;
}

html > body > main > section.layouts > h2::before
	{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		content: '';

		background: white;

		transition: left 1.5s;
	}

html > body > main > section.layouts > p
{
	-webkit-transform: translateY( 60px );
	        transform: translateY( 60px );

	transition: -webkit-transform 1s;

	transition: transform 1s;

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

html > body > main > section.location
{
	position: relative;
	
	min-height: 550px;
	margin: 120px auto 0;
}

html > body > main > section.location.scrolled-to > h2::before
		{
			left: 100%;
		}

html > body > main > section.location.scrolled-to > p, html > body > main > section.location.scrolled-to > div.image-container
		{
			-webkit-transform: translateY( 0 );
			        transform: translateY( 0 );
		}

html > body > main > section.location > h2, html > body > main > section.location > p, html > body > main > section.location > h3, html > body > main > section.location > ul.subway
{
	max-width: 800px;
	padding-right: 350px;
	margin-right: auto;
	margin-left: auto;
}

html > body > main > section.location > h2
{
	position: relative;
}

html > body > main > section.location > h2::before
	{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		content: '';

		background: white;

		transition: left 1.5s;
	}

html > body > main > section.location > p
{
	-webkit-transform: translateY( 60px );
	        transform: translateY( 60px );

	transition: -webkit-transform 1s;

	transition: transform 1s;

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

html > body > main > section.technology
{
	position: relative;
	
	min-height: 550px;
	margin: 195px auto 0;
}

html > body > main > section.technology.scrolled-to > h2, html > body > main > section.technology.scrolled-to > p
		{
			opacity: 1;
		}

html > body > main > section.technology.scrolled-to > h2::before
		{
			left: 100%;
		}

html > body > main > section.technology.scrolled-to > p
		{
			-webkit-transform: translateY( 0 );
			        transform: translateY( 0 );
		}

html > body > main > section.technology > figure
{
	position: absolute;
	top: -35px;
	right: 0;

	width: calc(43.75vw - 31px);
	margin: 0;

	font-size: 0;
}

html > body > main > section.technology > figure::before, html > body > main > section.technology > figure::after
	{
		position: absolute;
		z-index: -1;

		content: '';
	}

html > body > main > section.technology > figure::before
	{
		top: -67px;
		left: -76px;

		width: 148px;
		height: 244px;

		background: url( 'images/technology-2.svg' );
	}

html > body > main > section.technology > figure::after
	{
		right: 0;
		bottom: -127px;

		width: 466px;
		height: 196px;

		background: url( 'images/technology.svg' );
	}

html > body > main > section.technology > figure img
	{
		font-size: 15px;
	}

html > body > main > section.technology > h2, html > body > main > section.technology > p, html > body > main > section.technology > h3, html > body > main > section.technology > ul.subway
{
	max-width: 500px;
	padding-right: 650px;
	margin-right: auto;
	margin-left: auto;
}

html > body > main > section.technology > h2
{
	position: relative;
	
	opacity: 0;

	transition: opacity 1s;
}

html > body > main > section.technology > h2::before
	{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		content: '';

		background: white;

		transition: left 1.5s;
	}

html > body > main > section.technology > h3
{
	margin: 35px auto 25px;

	font-size: 18px;
}

html > body > main > section.technology > p
{
	opacity: 0;

	-webkit-transform: translateY( 60px );

	        transform: translateY( 60px );

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

	transition:
		opacity 1s,
		transform 1s;

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

html > body > main > section.technology > ul.subway
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	
	max-width: 585px;
	padding-right: 565px;
	padding-left: 0;
	
	list-style: none;
}

html > body > main > section.technology > ul.subway > li
	{
		position: relative;

		box-sizing: border-box;
		width: 50%;
		padding-left: 35px;

		line-height: 1.3;
	}

html > body > main > section.technology > ul.subway > li:not(:last-child)
		{
			margin-bottom: 3px;
		}

html > body > main > section.technology > ul.subway > li > span
		{
			position: absolute;
			top: 1px;
			left: 3px;

			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: 22px;
			height: 22px;

			background: white;

			border-radius: 50%;
			box-shadow: 1px 2px 10px 2px #e6e6e6;
		}

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

html > body > main > section.triptych.finishing > figure
		{
			width: 100%;

			text-align: center;
		}

html > body > main > section.triptych.finishing > figure > img
			{
				max-width: 100%;
			}

html > body > main > section.triptych.finishing > aside
		{
			width: 220px;
		}

html > body > main > section.triptych.infrastructure
	{
		padding-top: 100px;
	}

html > body > main > section.triptych.infrastructure > aside
		{
			top: 193px;
		}

html > body > main > section.triptych.investment > div.scroll-block > figure
			{
				width: 1297px;
				margin-top: 70px;
			}

html > body > main > section.triptych > aside
{
	top: 255px;
	left: 71%;
}

html > body > main > section.triptych > figure
{
	margin: 40px auto 0;
}

html > body > main > section.triptych > h2, html > body > main > section.triptych > p
{
	max-width: 730px;
	padding-right: 350px;
	margin-right: auto;
	margin-left: auto;
}

html > body > main > section > section > h3
{
	
	margin-bottom: 0.5em;
}

html > body > main > section > section > p
{
	
	margin-bottom: 1em;
}

html > body > main > section.infrastructure > div.map
{
	position: relative;
	
	margin-top: 50px;
}

html > body > main > section.infrastructure > div.map > div.container
{
	height: 600px;
}

html > body > main > section.infrastructure > div.map > div.container .gm-style-iw-c
	{
		font-family: "Circe",sans-serif;
		font-weight: 400;
	}

html > body > main > section.infrastructure > div.map > div.container .gm-style-iw-c h3
		{
			margin: 0 0 10px;
		}

html > body > main > section.infrastructure > div.map > div.tooltip
{
	position: absolute;

	display: none;

	width: 200px;
	padding: 16px 16px 0;

	font-size: 15px;
	font-weight: 400;
	line-height: 1.47;
	text-align: left;

	background: white;

	box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.2);

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

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

html > body > main > section.infrastructure > div.map > div.tooltip.shown
	{
		display: block;
	}

html > body > main > section.infrastructure > div.map > div.tooltip.logo
	{
		-webkit-transform: translate( calc(-50% + 24px), calc(-100% - 8px) );
		        transform: translate( calc(-50% + 24px), calc(-100% - 8px) );
	}

html > body > main > section.infrastructure > div.map > div.tooltip::before
	{
		position: absolute;
		bottom: -24px;
		left: calc(50% - 13px);

		display: block;

		width: 0;
		height: 0;

		content: '';

		border: 15px solid transparent;
		border-top: 10px solid white;
	}

html > body > main > section.infrastructure > div.map > div.tooltip > h3, html > body > main > section.infrastructure > div.map > div.tooltip > p
	{
		pointer-events: none;
	}

html > body > main > section.infrastructure > div.map > div.tooltip > h3
	{
		margin: 0 0 16px;
	}

html > body > main > section.infrastructure > div.map > div.tooltip > p
	{
		margin: 0 0 16px;
	}

html > body > main > section.infrastructure > div.map > div.tooltip > p:empty
		{
			display: none;
		}

html > body > main > section.infrastructure > div.map > div.tooltip > p::before
		{
			content: 'Адрес: ';
		}

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

html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#transport ~ ul.legend > li > label[for="transport"] > svg .color
			{
				fill: #FFBC05;
			}

html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#polyclinic ~ ul.legend > li > label[for="polyclinic"] > svg .color
			{
				fill: #E21822;
			}

html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#park ~ ul.legend > li > label[for="park"] > svg .color
			{
				fill: #1CA753;
			}

html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#gym ~ ul.legend > li > label[for="gym"] > svg .color
			{
				fill: #EE731D;
			}

html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#kindergarten ~ ul.legend > li > label[for="kindergarten"] > svg .color
			{
				fill: #21A9E1;
			}

html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#school ~ ul.legend > li > label[for="school"] > svg .color
			{
				fill: #63D9FF;
			}

html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#mall ~ ul.legend > li > label[for="mall"] > svg .color
			{
				fill: #006EB9;
			}

html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#cinema ~ ul.legend > li > label[for="cinema"] > svg .color
			{
				fill: #C51786;
			}

html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#attractions ~ ul.legend > li > label[for="attractions"] > svg .color
			{
				fill: #D12008;
			}

html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#bank ~ ul.legend > li > label[for="bank"] > svg .color
			{
				fill: #2781ce;
			}

html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#petrolstation ~ ul.legend > li > label[for="petrolstation"] > svg .color
			{
				fill: #fbb906;
			}

html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#pharmacy ~ ul.legend > li > label[for="pharmacy"] > svg .color
			{
				fill: #24731d;
			}

html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#cafe ~ ul.legend > li > label[for="cafe"] > svg .color
			{
				fill: #ee9e1d;
			}

html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#spa ~ ul.legend > li > label[for="spa"] > svg .color
			{
				fill: #D8ABB8;
			}

html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#post ~ ul.legend > li > label[for="post"] > svg .color
			{
				fill: #854774;
			}

html > body > main > section.infrastructure > div.map > ul.legend
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	
	padding: 0;
	margin: 30px 40px 0;
	
	list-style: none;
}

html > body > main > section.infrastructure > div.map > ul.legend > li
	{
		min-width: 250px;
		margin: 0 0 20px;
	}

html > body > main > section.infrastructure > div.map > ul.legend > li > label
		{
			cursor: pointer;
		}

html > body > main > section.infrastructure > div.map > ul.legend > li > label > svg
			{
				margin: 0 15px 0 0;
				
				vertical-align: middle;
			}

html > body > main > section.infrastructure > div.map > ul.legend > li > label > svg .color
				{
					fill: #d4d7d9;
				}

html > body > main > section.infrastructure > div.map > ul.legend > li:last-of-type
		{
			margin-right: 0;
		}

html > body > main > section.layouts > div.slideshow
{
	position: relative;
	
	float: left;

	width: calc(43.75vw - 31px);
	height: calc(25vw - 18px);
	margin: 0 0 0 calc(6.25vw - 4px);
}

html > body > main > section.layouts > div.slideshow::before
	{
		position: absolute;
		top: -46px;
		right: 50px;

		width: 471px;
		height: 472px;

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

html > body > main > section.location > div.container
{
	position: relative;
	
	width: 100%;
	padding-top: 56.25%;
	margin-top: 32px;
}

html > body > main > section.location > div.container > iframe
{
	position: absolute;
	top: 0;
	right: 0;

	width: 100%;
	height: 100%;

	border: none;
}

html > body > main > section.location > div.image-container
{
	position: relative;
	
	margin-top: 32px;
	
	-webkit-transform: translateY( 60px );
	
	        transform: translateY( 60px );

	transition: -webkit-transform 1s;

	transition: transform 1s;

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

html > body > main > section.location > div.image-container > figure
{
	position: relative;
	
	width: 100%;
	max-width: 1850px;

	margin: 0 auto;
	
	font-size: 0;
}

html > body > main > section.location > div.image-container > figure > img
	{
		width: 100%;
		
		font-size: 17px;
	}

html > body > main > section.location > div.image-container > figure > img:first-child
		{
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}

html > body > main > section.triptych > div.scroll-block > figure
{
	width: 1275px;
	margin: 40px auto 0;
}

html > body > main > section.triptych > div.scroll-block > ul.features
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	
	width: 1080px;
	padding: 0;
	margin: 0 auto;

	font-size: 15px;
	line-height: 1.47;
	
	list-style: none;

	color: rgb(89, 113, 117);
}

html > body > main > section.triptych > div.scroll-block > ul.features > li
	{
		box-sizing: border-box;
		padding-right: 60px;
	}

html > body > main > section.triptych > div.scroll-block > ul.features > li:not(:last-child)
		{
			-webkit-flex-shrink: 0;
			    -ms-flex-negative: 0;
			        flex-shrink: 0;
		}

html > body > main > section.triptych > div.scroll-block > ul.features > li:first-child
		{
			width: 380px;
		}

html > body > main > section.triptych > div.scroll-block > ul.features > li:nth-child(2)
		{
			width: 390px;
		}

html > body > main > section.triptych > div.scroll-block > ul.features > li > strong
		{
			display: block;

			width: 75%;
			margin-bottom: 16px;

			font-size: 18px;
			line-height: 1.44;

			color: rgba(7, 43, 49, 0.8);
		}

html > body > main > section.triptych > div.scroll-block > ul.features > li > strong > small
			{
				font-size: inherit;
			}

html > body > main > section.layouts > 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.layouts > 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.layouts > div.slideshow > div.controls
{
	position: absolute;
	bottom: 40px;
	left: 35px;
	z-index: 1;

	white-space: nowrap;
}

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

html > body > main > section.layouts > 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: 44px;
	height: 44px;
	
	vertical-align: middle;

	cursor: pointer;
	
	color: #f5f5f5;
	background: #1b8b80;
	
	border-radius: 50%;
}

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

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

		-webkit-transform: rotate( 180deg );

		        transform: rotate( 180deg );
	}

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

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

		content: '';

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

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

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

		background: #072b31;

		border-radius: 50%;

		transition:
			width 0.25s,
			height 0.25s;
	}

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

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

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

	color: #1b8b80;
}

html > body > main > section.location > div.image-container > div.hint
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-justify-content: center;
	    -ms-flex-pack: center;
	        justify-content: center;

	padding: 5vw;

	text-align: center;

	pointer-events: none;

	color: white;
	background: rgba(7, 43, 49, 0.75);
}

html > body > main > section.location > div.image-container > div.hint:not(.hide) ~ *
		{
			-webkit-filter: blur( 4px );
			        filter: blur( 4px );
		}

html > body > main > section.location > div.image-container > div.hint.hide
	{
		opacity: 0;
	}

html > body > main > section.location > div.image-container > div.hint > h3
{
	margin: 0 0 32px;
	
	font-size: 36px;
	font-weight: 400;
}

html > body > main > section.location > div.image-container > div.hint > p
{
	margin: 0;
}

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

html > body > main > section.layouts > div.slideshow > ul.slides > li
{
	position: absolute;
	top: 0;
	left: 0;
	
	display: none;
	
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 30px 35px 40px;

	pointer-events: auto;

	background: #f5f5f5;

	transition: opacity 1s;
}

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

html > body > main > section.layouts > 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.layouts > div.slideshow > ul.slides > li::after
	{
		display: table;
		clear: both;

		content: '';
	}

html > body > main > section.layouts > div.slideshow > ul.slides > li > a:not(.lazy-image)
{

	text-decoration: none;
}

html > body > main > section.layouts > div.slideshow > ul.slides > li > a:not(.lazy-image)::after
	{
		display: inline-block;
		
		margin-left: 12px;

		vertical-align: sub;
		
		content: url( 'images/arrow-small.svg' );
	}

html > body > main > section.layouts > div.slideshow > ul.slides > li > h3
{

	margin-bottom: 2px;

	font-size: 30px;
}

html > body > main > section.layouts > div.slideshow > ul.slides > li > img
{
	float: right;
	
	max-width: 50%;
	max-height: 95%;
	margin-top: 25px;

	object-fit: contain;
	object-position: center top;
}

html > body > main > section.layouts > div.slideshow > ul.slides > li > p
{
	margin: 0 0 35px;

	opacity: 0.7;
}

@media (min-width: 700px) and (max-width: 1099px)
	{
	}

@media (min-width: 1100px) and (max-width: 1399px)
	{
html > body > main > section > section > p
{
		font-size: 14px
}
	}

@media (max-width: 1920px)
	{

html > body > main > section.comfort > figure
{
		left: 0
}

html > body > main > section.comfort > figure::before
	{
			content: none
	}
	}

@media (max-width: 1399px)
	{html > body > main > section.layouts > div.slideshow > ul.slides > li > a:not(.lazy-image)
{
		padding: 0 27px
}
html > body > main > section > section > h3, html > body > main > section.layouts > div.slideshow > ul.slides > li > h3
{
		font-size: 36px
}
html > body > main > section.layouts > div.slideshow > ul.slides > li > h3
{
		font-size: 18px
}
html > body > main > section > section > h3
{
		font-size: 24px
}

aside:not(#lightbox)
{
		font-size: 13px;
		line-height: 1.2
}

html > body > main > section.comfort
{
		padding-top: 120px
}

html > body > main > section.comfort > figure
{
		top: 0;

		width: calc(50% + 75px)
}

html > body > main > section.comfort > h2, html > body > main > section.comfort > p
{
		max-width: 450px;
		padding-left: 450px
}

html > body > main > section.layouts > h2, html > body > main > section.layouts > p
{
		max-width: 340px;
		padding-left: 560px
}

html > body > main > section.layouts > h2
{
		background-position-x: 560px
}

html > body > main > section.location
{
		margin-right: auto;
		margin-left: auto
}

html > body > main > section.location > h2, html > body > main > section.location > p, html > body > main > section.location > h3, html > body > main > section.location > ul.subway
{
		max-width: 45%;
		padding-right: 45%;
		padding-left: 0
}

html > body > main > section.technology
{
		margin-right: auto;
		margin-left: auto
}

html > body > main > section.technology > figure
{
		top: -85px;

		width: 568px
}

html > body > main > section.technology > h2, html > body > main > section.technology > p, html > body > main > section.technology > h3, html > body > main > section.technology > ul.subway
{
		max-width: 35%;
		padding-right: 0;
		margin-left: 5%
}

html > body > main > section.triptych.finishing > figure
		{
				overflow-y: hidden;
				-webkit-overflow-scrolling: touch
		}

html > body > main > section.triptych.finishing > figure > img
			{
					max-width: none
			}

html > body > main > section.triptych.investment > div.scroll-block > figure
			{
					width: auto
			}

html > body > main > section.triptych.investment > div.scroll-block > ul.features
			{
					padding-left: 109px
			}

html > body > main > section.triptych > aside
{
		top: 279px;
		left: 65%
}

html > body > main > section.triptych > h2, html > body > main > section.triptych > p
{
		box-sizing: border-box;
		max-width: 740px;
		padding-right: 35.34%;
		padding-left: 4.175%
}

html > body > main > section.triptych > h2
{
		background-position-x: 6.5%
}

html > body > main > section.layouts > div.slideshow
{
		width: calc(46.88vw - 33px);
		margin-left: calc(6.25vw - 4px)
}

html > body > main > section.triptych > div.scroll-block
{
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch
}

html > body > main > section.triptych > div.scroll-block > figure
{
		width: auto
}

html > body > main > section.triptych > div.scroll-block > ul.features
{
		padding-left: 98px;
		
		font-size: 13px
}

html > body > main > section.triptych > div.scroll-block > ul.features > li > strong
		{
				font-size: 16px
		}

html > body > main > section.layouts > div.slideshow > div.controls
{
		bottom: 30px;
		left: 25px
}

html > body > main > section.layouts > div.slideshow > ul.slides > li
{
		padding: 20px 25px 30px
}

html > body > main > section.layouts > div.slideshow > ul.slides > li > a:not(.lazy-image)::after
	{
			content: none
	}

html > body > main > section.layouts > div.slideshow > ul.slides > li > h3
{
		font-weight: 700
}

html > body > main > section.layouts > div.slideshow > ul.slides > li > img
{
		max-width: 45%;
		margin: 0
}
	}

@media (max-width: 1099px)
	{
html > body > main
{
		min-height: 0;
		padding-left: 0
}

aside:not(#lightbox)
{
		position: relative;

		margin-left: 5vw
}

html > body > a.online-office
{
		bottom: -60px;
		left: 50%;

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

		        transform: translate( -50%, 200px )
}

html > body > a.online-office.visible
	{
			pointer-events: auto;

			opacity: 1;
			
			-webkit-transform: translate( -50%, 0 );
			
			        transform: translate( -50%, 0 )
	}

html > body > a.up
{
		right: 17px;
		bottom: 208px;

		width: 64px;
		height: 64px
}

html > body > header::before
	{
			bottom: 100%
	}

html > body > header > h1, html > body > header > div.subtitle
	{
			opacity: 1
	}

html > body > header > h1::before, html > body > header > div.subtitle::before
		{
				left: 100%
		}

html > body > header > div.seven-suns, html > body > header > div.tel
	{
			-webkit-transform: translateY( 0 );
			        transform: translateY( 0 )
	}

html > body > header > svg
	{
			opacity: 0
	}

html > body > header > div.copyright
	{
			-webkit-transform: translateY( 0 );
			        transform: translateY( 0 )
	}

html > body > nav.main:not(.open)
	{
			left: 0
	}

html > body > main > section.advantages > ul > li
	{
			-webkit-transform: translateY( 0 );
			        transform: translateY( 0 )
	}

html > body > main > section.architecture
{
		margin-bottom: 60px
}

html > body > main > section.architecture > h2, html > body > main > section.architecture > p
{
		max-width: 540px;
		margin-right: 5vw;
		margin-left: 5vw;
		
		text-align: left
}

html > body > main > section.comfort
{
		max-width: 100%;
		padding-top: 40px;
		margin-right: auto;
		margin-left: auto
}

html > body > main > section.comfort > figure
{
		position: static;

		width: 100%
}

html > body > main > section.comfort > h2, html > body > main > section.comfort > p
{
		max-width: 540px;
		padding-left: 0;
		margin-right: 5vw;
		margin-left: 5vw;
		
		text-align: left
}

html > body > main > section.layouts
{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;
		
		padding-top: 40px
}

html > body > main > section.layouts > h2, html > body > main > section.layouts > p
{
		max-width: 540px;
		padding-left: 0;
		margin-right: 5vw;
		margin-left: 5vw
}

html > body > main > section.layouts > h2
{
		background-position-x: left
}

html > body > main > section.location
{
		max-width: 100%;
		margin-top: 80px;
		margin-right: 5vw;
		margin-left: 5vw
}

html > body > main > section.location > h2, html > body > main > section.location > p, html > body > main > section.location > h3, html > body > main > section.location > ul.subway
{
		max-width: 540px;
		padding-right: 0;
		margin-left: 0
}

html > body > main > section.technology
{
		max-width: 100%;
		margin-top: 40px;
		margin-right: 5vw;
		margin-left: 5vw
}

html > body > main > section.technology > figure
{
		position: relative;
		top: 0;

		width: 100vw;
		margin-top: 40px;
		margin-left: -5vw;

		-webkit-transform: none;

		        transform: none
}

html > body > main > section.technology > h2, html > body > main > section.technology > p, html > body > main > section.technology > h3, html > body > main > section.technology > ul.subway
{
		max-width: 540px;
		padding-right: 0;
		margin-left: 0
}

html > body > main > section.triptych
{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;
		
		padding-top: 70px
}

html > body > main > section.triptych.finishing > figure
		{
				-webkit-order: 1;
				    -ms-flex-order: 1;
				        order: 1
		}

html > body > main > section.triptych.infrastructure
	{
			padding-top: 40px
	}

html > body > main > section.triptych.infrastructure > div.map
		{
				-webkit-order: 1;
				    -ms-flex-order: 1;
				        order: 1
		}

html > body > main > section.triptych.infrastructure > aside
		{
				top: 20px
		}

html > body > main > section.triptych.investment > div.scroll-block > figure
			{
					-webkit-order: 1;
					    -ms-flex-order: 1;
					        order: 1
			}

html > body > main > section.triptych > aside
{
		top: 0;
		left: 0;

		margin: 0 5vw 0 auto
}

html > body > main > section.triptych > h2, html > body > main > section.triptych > p
{
		max-width: 540px;
		padding-right: 0;
		padding-left: 0;
		margin-right: 5vw;
		margin-left: 5vw
}

html > body > main > section.triptych > h2
{
		background-position-x: left
}

html > body > main > section.infrastructure > div.map > div.container
{
		height: 440px
}

html > body > main > section.infrastructure > div.map > ul.legend
{
		-webkit-justify-content: flex-start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
		
		margin-right: 5vw;
		margin-left: 5vw
}

html > body > main > section.layouts > div.slideshow
{
		-webkit-order: 1;
		    -ms-flex-order: 1;
		        order: 1;
		float: none;

		width: 100vw;
		height: 350px;
		margin: 40px 0 0
}

html > body > main > section.location > div.container
{
		width: calc(100% + 10vw);
		padding-top: calc(90vh - 44px);
		margin-left: -5vw
}

html > body > main > section.location > div.image-container
{
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		
		width: calc(100% + 10vw);
		margin-left: -5vw
}

html > body > main > section.location > div.image-container > figure
{
		width: auto
}

html > body > main > section.location > div.image-container > figure > img
	{
			width: auto;
			height: 700px
	}

html > body > main > section.triptych > div.scroll-block
{
		-webkit-order: 1;
		    -ms-flex-order: 1;
		        order: 1
}

html > body > main > section.layouts > div.slideshow:not(.ready) > div.controls
{
		display: none
}

html > body > main > section.layouts > div.slideshow:not(.ready) > div.sections
{
		display: none
}

html > body > main > section.layouts > div.slideshow > ul.slides
{
		position: absolute;
		top: 0;
		right: 0;
		
		width: 100vw;
		margin: 0 0 40px
}

html > body > main > section.layouts > div.slideshow > div.controls
{
		right: 5vw;
		bottom: 20px;
		left: auto
}

html > body > main > section.layouts > div.slideshow > ul.slides > li > a:not(.lazy-image)::after
	{
			content: url( 'images/arrow-small.svg' )
	}

html > body > main > section.layouts > div.slideshow > ul.slides > li > img
{
		max-height: 80%
}
	}

@media (max-width: 699px)
	{

html > body > main > section.comfort
{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column
}

html > body > main > section.layouts
{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column
}

html > body > main > section.layouts > h2, html > body > main > section.layouts > p
{
		max-width: 100%;
		padding-right: 0
}

html > body > main > section.location
{
		margin-top: 40px
}

html > body > main > section.location > h2, html > body > main > section.location > p, html > body > main > section.location > h3, html > body > main > section.location > ul.subway
{
		max-width: 100%
}

html > body > main > section.technology > figure::before
	{
			content: none
	}

html > body > main > section.technology > figure img
	{
			width: 100%;
			max-width: 568px
	}

html > body > main > section.technology > h2, html > body > main > section.technology > p, html > body > main > section.technology > h3, html > body > main > section.technology > ul.subway
{
		max-width: 100%
}

html > body > main > section.technology > h3
{
		display: none
}

html > body > main > section.technology > ul.subway
{
		display: none
}

html > body > main > section.technology > ul.subway > li
	{
			width: 100%
	}

html > body > main > section.technology > ul.subway > li:not(:last-child)
		{
				margin-bottom: 15px
		}

html > body > main > section.triptych.investment > div.scroll-block > ul.features
			{
					padding-left: 5vw
			}

html > body > main > section.triptych > aside
{
		width: auto;
		margin-right: 5vw;
		margin-left: 5vw
}

html > body > main > section.triptych > h2, html > body > main > section.triptych > p
{
		max-width: 100%
}

html > body > main > section.infrastructure > div.map
{
		margin-top: 0
}

html > body > main > section.infrastructure > div.map > ul.legend
{
		margin-top: 0
}
		
		html > body > main > section.infrastructure > div.map > ul.legend > li
		{
			width: 50%;
			min-width: 240px;
		}

html > body > main > section.layouts > div.slideshow
{
		height: 550px
}

html > body > main > section.location > div.image-container > figure > img
	{
			height: 500px
	}

html > body > main > section.triptych > div.scroll-block > ul.features
{
		padding-left: 5vw
}

html > body > main > section.triptych > div.scroll-block > ul.features > li:not(:last-child)
		{
				padding-right: 10vw
		}

html > body > main > section.triptych > div.scroll-block > ul.features > li:first-child
		{
				width: 100vw
		}

html > body > main > section.triptych > div.scroll-block > ul.features > li:nth-child(2)
		{
				width: 100vw
		}

html > body > main > section.triptych > div.scroll-block > ul.features > li:last-child
		{
				width: 100vw
		}

html > body > main > section.layouts > div.slideshow > div.controls
{
		right: auto;
		bottom: 20px;
		left: 50%;

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

		        transform: translateX( -50% )
}

html > body > main > section.layouts > div.slideshow > ul.slides > li
{
		text-align: center
}

html > body > main > section.layouts > div.slideshow > ul.slides > li > img
{
		float: none;
		
		max-width: 100%;
		height: 260px;
		max-height: none;
		margin-bottom: 20px
}
	}