html > body > main > section.layouts > div.slideshow > ul.slides > li > a:not(.lazy-image)
{
	
	display: inline-block;
	
	box-sizing: border-box;
	height: 56px;
	padding: 0 47px;
	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: #fcba04;
	
	border: none;
	border-radius: 28px;
	box-shadow: 16px 0 20px rgba( 86, 63, 0, 0.08 );
	
	transition: background 0.3s;
}
	
	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, html > body > main > section.layouts > div.slideshow > ul.slides > li > a:not(.lazy-image):not([disabled]):hover
		{
			background: #2c1f3d;
		}

/**
 * Сбросить всё оформление со стандартной кнопки
 */
/**
 * Сбросить оформление с details и скрыть контент
 */
html > body > main > section > section > h3, html > body > main > section.environment > div.slideshow > div.sections > 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: 300;
	line-height: 1.09;
}
html > body > main > section > section > p, html > body > main > section.environment > div.slideshow > div.sections > 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;
}
%button_stroke:not([disabled]):hover, %button_stroke:not([disabled]):focus
	{
		color: #513870;
		background: white;
	}
html > body > main > section > section > h3, html > body > main > section.environment > div.slideshow > div.sections > section > h3
{
	font-size: 30px;
	line-height: 1.2;
}
html > body > main > section.layouts > div.slideshow > ul.slides > li > h3
{
	font-size: 21px;
	font-weight: 400;
	line-height: 1.5;
}
@supports (display: grid)
	{
	}

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

aside
{
	position: absolute;

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

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

	color: rgb(114, 105, 125);
}

aside.eugenia
	{
		padding-top: 8px;
	}

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

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

aside::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 > a
	{
		text-decoration: none;
		
		color: #9bcbf2;

		border-bottom: 1px solid #9bcbf2;
	}

aside > a:hover
		{
			border-bottom: none;
		}

aside > span
	{
		display: block;

		font-weight: 700;

		color: #2c1f3d;
	}

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: #fcba04;
	opacity: 0;
	background: #513870;

	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: white;

		border-radius: 50%;
	}

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

		-webkit-transform: rotate( 45deg );

		        transform: rotate( 45deg );
	}

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 > main
{

	background: url( 'images/index/bg-butterflies.svg' ) top left no-repeat;
	background-size: 100% auto;
}

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: 150px;
}

html > body > main > section.comfort > aside
{
	position: relative;
	left: 0;

	width: 470px;
	padding-right: 530px;
	margin-top: 20px;
}

html > body > main > section.comfort > figure
{
	position: absolute;
	top: 180px;
	left: 48%;

	max-width: 46vw;
	margin: 0;
}

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

html > body > main > section.comfort > h2, html > body > main > section.comfort > p, html > body > main > section.comfort > aside
{
	margin-right: auto;
	margin-left: auto;
}

html > body > main > section.comfort > h2
{
	max-width: 540px;
	padding-right: 540px;
}

html > body > main > section.comfort > p
{
	max-width: 470px;
	padding-right: 610px;
}

html > body > main > section.comfort > ul.features
{
	display: none;

	padding: 0;
	margin: 40px 0 0 0;

	list-style: none;

	color: rgb(114, 105, 125);
}

html > body > main > section.comfort > ul.features > li
	{
		position: relative;
		
		padding-left: 30px;
	}

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

html > body > main > section.comfort > ul.features > li::before
		{
			position: absolute;
			top: -2px;
			left: 0;

			width: 8px;
			height: 8px;
			
			content: '';

			background: #fcba04;

			border: 7px solid white;
			border-radius: 50%;
			box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
		}

html > body > main > section.environment.negative::before
	{
		right: calc(50% - 460px);
		left: auto;

		background: url('/images/index/pattern-blue.svg');
	}

html > body > main > section.environment.negative > div.slideshow::before
		{
			right: auto;
			left: calc(50% - 50vw);
			
			background: #513870;
		}

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

			background: url('/images/index/pattern-blue.svg');
		}

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

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

html > body > main > section.environment.negative > div.slideshow > div.sections > section > h3
				{
					color: #2c1f3d;
				}

html > body > main > section.environment.negative > div.slideshow > div.sections > section > p
				{
					color: rgb(171, 165, 177);
				}

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

html > body > main > section.environment.negative > div.slideshow > div.controls > button
			{
				color: #9bcbf2;
				background: transparent;

				border: 2px solid #9bcbf2;
			}

html > body > main > section.environment.negative > div.slideshow > div.controls > span.counter
			{
				color: #9bcbf2;
			}

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

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

		display: block;

		width: 201px;
		height: 202px;

		content: '';

		background: url('/images/index/pattern-red.svg');
	}

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::before
	{
		left: calc(50% - 61px);
	}

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

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: 440px;
	padding-left: 800px;
	margin-right: auto;
	margin-left: auto;
}

html > body > main > section.layouts > h2::before
	{
		left: 680px;
	}

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.environment > div.slideshow
{
	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::before
	{
		position: absolute;
		top: 0;
		right: calc(50% - 50vw);
		bottom: 0;

		display: block;

		width: calc(50vw + 350px);

		content: '';

		background: url( 'images/index/bg-wave.svg' ) center center no-repeat #513870;
		background-size: 100%;
	}

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 img[src*="infrastructure"]
	{
		display: none;
	}

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#transport ~ div.container div[title="Транспорт"], html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#transport ~ div.container img[src*="transport"]
			{
				display: block;
			}

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#polyclinic ~ div.container div[title="Поликлиника"], html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#polyclinic ~ div.container img[src*="polyclinic"]
			{
				display: block;
			}

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#park ~ div.container div[title="Парк"], html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#park ~ div.container img[src*="park"]
			{
				display: block;
			}

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#gym ~ div.container div[title="Спортзал"], html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#gym ~ div.container img[src*="gym"]
			{
				display: block;
			}

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#kindergarten ~ div.container div[title="Детский сад"], html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#kindergarten ~ div.container img[src*="kindergarten"]
			{
				display: block;
			}

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#school ~ div.container div[title="Школа"], html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#school ~ div.container img[src*="school"]
			{
				display: block;
			}

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#mall ~ div.container div[title="Торговый центр"], html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#mall ~ div.container img[src*="mall"]
			{
				display: block;
			}

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#cinema ~ div.container div[title="Кинотеатр"], html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#cinema ~ div.container img[src*="cinema"]
			{
				display: block;
			}

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#attractions ~ div.container div[title="Достопримечательность"], html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#attractions ~ div.container img[src*="attractions"]
			{
				display: block;
			}

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#bank ~ div.container div[title="Банк"], html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#bank ~ div.container img[src*="bank"]
			{
				display: block;
			}

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#petrolstation ~ div.container div[title="Автозаправка"], html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#petrolstation ~ div.container img[src*="petrolstation"]
			{
				display: block;
			}

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#pharmacy ~ div.container div[title="Аптека"], html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#pharmacy ~ div.container img[src*="pharmacy"]
			{
				display: block;
			}

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#cafe ~ div.container div[title="Кафе"], html > body > main > section.infrastructure > div.map > input[name="infrastructure"]:checked#cafe ~ div.container img[src*="cafe"]
			{
				display: block;
			}

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(12.5vw - 9px);
}

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(114, 105, 125);
}

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: rgb(171, 165, 177);
		}

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

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

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

html > body > main > section.environment > 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: #2c1f3d;
	background: white;
	
	border-radius: 50%;
}

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

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

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

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

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

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

	color: white;
}

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

html > body > main > section.environment > 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;
}

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

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: 40px;
	height: 40px;
	
	vertical-align: middle;

	cursor: pointer;
	
	color: #2c1f3d;
	background: white;
	
	border-radius: 50%;
}

html > body > main > section.layouts > div.slideshow > div.controls > button > svg
	{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		
		margin: auto;
		
		fill: #513870;
	}

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

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

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

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

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

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.environment > div.slideshow > div.sections > section.current
{
	visibility: visible;
	
	opacity: 1;
	
	transition: opacity 0.5s;
}

html > body > main > section.environment > div.slideshow > div.sections > section
{
	position: absolute;
	top: 80px;
	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
{
	
	margin-bottom: 16px;
}

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

	font-weight: 300;

	opacity: 1;
	color: white;
}

html > body > main > section.environment > div.slideshow > 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
{
	position: absolute;
	top: 0;
	left: 0;
	
	display: none;
	
	width: 100%;
	height: 100%;
	
	pointer-events: none;
	
	transition: opacity 1s;
}

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

html > body > main > section.environment > 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.environment > div.slideshow > ul.slides > li > img
{
	display: block;
	
	width: 100%;
	height: 100%;
	
	object-fit: cover;
}

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;

	border-radius: 19px;

	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)
{

	font-weight: 400;
	text-decoration: none;
}

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: 1;
}

html > body > main > section.environment > div.slideshow > ul.slides > li > div.video
{
	position: relative;
	
	pointer-events: auto;
	
	width: 100%;
	height: 100%;
	
	background: black;
}

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

html > body > main > section.environment > div.slideshow > ul.slides > li > div.video > button.vimeo
{
	display: inline;
	
	box-sizing: content-box;
	padding: 0;
	margin: 0;
	
	-webkit-appearance: none;
	
	   -moz-appearance: none;
	
	        appearance: none;
	
	background: transparent;
	
	border: none;
	
	position: relative;
	
	display: block;
	
	width: 100%;
	height: 100%;
	
	cursor: pointer;
}

html > body > main > section.environment > div.slideshow > ul.slides > li > div.video > button.vimeo::after
	{
		position: absolute;
		top: 50%;
		left: 50%;
		
		content: "";
		
		border: 100px solid transparent;
		border-right-width: 0px;
		border-left: 170px solid rgba(243, 236, 221, 0.95);
		
		-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 > button.vimeo:hover::after
		{
			-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 > button.vimeo > img
	{
		display: block;
		
		width: 100%;
		height: 100%;
		
		object-fit: cover;
		pointer-events: none;
		
		opacity: 0.8;
	}

html > body > main > section.environment > div.slideshow > ul.slides > li > div.video > iframe
{
	display: block;
	
	width: 100%;
	height: 100%;
	
	border: none;
}

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

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

@media (max-width: 1399px)
	{
html > body > main > section > section > h3, html > body > main > section.environment > div.slideshow > div.sections > section > h3, html > body > main > section.layouts > div.slideshow > ul.slides > li > h3
{
		font-size: 36px
}
html > body > main > section > section > h3, html > body > main > section.environment > div.slideshow > div.sections > section > h3
{
		font-size: 24px
}
html > body > main > section.layouts > div.slideshow > ul.slides > li > h3
{
		font-size: 18px
}

aside
{
		font-size: 13px;
		line-height: 1.2
}

html > body > main > section.comfort
{
		max-width: 740px;
		margin-right: auto;
		margin-left: auto
}

html > body > main > section.comfort > aside
{
		padding-right: 34%
}

html > body > main > section.comfort > figure
{
		top: 200px;
		left: 50%;
		
		width: 44vw
}

html > body > main > section.comfort > h2, html > body > main > section.comfort > p, html > body > main > section.comfort > aside
{
		max-width: 45%;
		padding-right: 45%
}

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

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

html > body > main > section.layouts > h2::before
	{
			left: 560px
	}

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::before
	{
			left: 5.812%
	}

html > body > main > section.environment > div.slideshow
{
		margin-right: 0;
		margin-left: 0
}

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.environment > div.slideshow > div.sections > section
{
		top: 10px
}

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

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
{
		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: 64ox;
		height: 64px
}

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: 70px;
		margin-right: 5vw;
		margin-left: 5vw
}

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

		margin-top: 20px;
		margin-right: 5vw;
		margin-left: auto
}

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

		-webkit-order: 1;

		    -ms-flex-order: 1;

		        order: 1;

		width: calc(100% - 10vw);
		max-width: none;
		margin: 40px auto 0
}

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

html > body > main > section.environment.negative > div.slideshow
	{
			background: #513870
	}

html > body > main > section.environment.negative > div.slideshow > 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.environment.negative > div.slideshow > div.controls
		{
				right: 5vw;
				bottom: 20px;
				left: auto
		}

html > body > main > section.environment
{
		padding-top: 70px
}

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::before
	{
			left: 0
	}

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: 70px
}

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::before
	{
			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: 70px
	}

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::before
	{
			left: 0
	}

html > body > main > section.environment > div.slideshow
{
		padding-top: 67%;
		
		background: url( 'images/index/bg-wave.svg' ) center center no-repeat #513870;
		background-size: 100%;

		border-top: none
}

html > body > main > section.environment > div.slideshow::before
	{
			display: none
	}

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.triptych > div.scroll-block
{
		-webkit-order: 1;
		    -ms-flex-order: 1;
		        order: 1
}

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

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

html > body > main > section.environment > div.slideshow > div.sections
{
		position: relative;

		padding-bottom: 80px
}

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

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

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 > div.controls
{
		right: 5vw;
		bottom: 20px;
		left: auto
}

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.environment > div.slideshow > 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.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.comfort > aside
{
		width: auto;
		margin-right: 5vw;
		margin-left: 5vw
}

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

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

html > body > main > section.comfort > ul.features
{
		display: block
}

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.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 > ul.legend > li
		{
			width: 50%;
			min-width: 240px;
		}

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

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: 5vw
}

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