html > body > main > section.apartments > a.all, 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: url( 'images/bg-lines-btn.svg' ) center center no-repeat #171a39;
	
	border: none;
	border-radius: 28px;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
	
	transition: background-color 0.3s;
}
	
	html > body > main > section.apartments > a.all:not([disabled]), html > body > main > section.layouts > div.slideshow > ul.slides > li > a:not(.lazy-image):not([disabled])
	{
		cursor: pointer;
	}
	
	html > body > main > section.apartments > a.all:not([disabled]):focus, html > body > main > section.apartments > a.all:not([disabled]):hover, 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
		{
			color: #0e112c;
			background-color: #d8b327;
		}

/**
 * Сбросить всё оформление со стандартной кнопки
 */
/**
 * Сбросить оформление с details и скрыть контент
 */
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;
}
%button_stroke:not([disabled]):hover, %button_stroke:not([disabled]):focus
	{
		color: white;
		background-color: #171a39;
	}
html > body > main > section.layouts > div.slideshow > ul.slides > li > a:not(.lazy-image)
{

	color: #0e112c;
	background-color: white;

	transition:
		color 0.3s,
		background 0.3s;
}
html > body > main > section.layouts > div.slideshow > ul.slides > li > a:not(.lazy-image):hover
	{
		color: white;
	}
%button_white_stroke:not([disabled]):focus, %button_white_stroke:not([disabled]):hover
		{
			text-shadow: none;
			
			color: #0e112c;
			background-color: white;
		}
html > body > main > section > 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: 700;
	line-height: 1.5;
}

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

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

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

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

	color: rgb(135, 136, 150);
}

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

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;

		border-bottom: 1px solid rgb(195, 196, 202);
	}

aside:not(#lightbox) > a:hover
		{
			color: rgb(135, 136, 150);
			
			border-bottom: none;
		}

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

		font-weight: 700;

		color: #0e112c;
	}

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: #d8b327;
	opacity: 0;
	background: #171a39;

	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: #d8b327;

		border-radius: 50%;
	}

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

		-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 > section.apartments
{

}

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

	display: block;

	width: 292px;
	margin: 40px auto;

	text-decoration: none;
}

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 > div.video-container
{
	position: relative;
	
	width: 88%;
	max-width: 1336px;
	margin: 0 auto;
}

html > body > main > section.comfort > div.video-container.playing > figure
		{
			opacity: 0;
		}

html > body > main > section.comfort > div.video-container.playing > iframe
		{
			opacity: 1;
		}

html > body > main > section.comfort > div.video-container > figure, html > body > main > section.comfort > div.video-container > iframe
	{
		transition: opacity 0.3s ease-in-out;
	}

html > body > main > section.comfort > div.video-container > figure
	{
		position: relative;

		height: 0;
		padding-top: 57.186%;
		margin: 0;

		cursor: pointer;
	}

html > body > main > section.comfort > 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.comfort > 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.comfort > div.video-container > figure > img
		{
			position: absolute;
			top: 0;
			left: 0;

			width: 100%;
			height: 100%;

			object-fit: cover;
		}

html > body > main > section.comfort > div.video-container > figure > figcaption
		{
			position: absolute;
			bottom: 56px;
			left: 56px;

			font-size: 30px;
			font-weight: 700;
			line-height: 1.2;

			color: white;
		}

html > body > main > section.comfort > div.video-container > iframe
	{
		position: absolute;
		top: 0;
		left: 0;

		width: 100%;
		height: 100%;

		opacity: 0;
	}

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

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

html > body > main > section.comfort > p
{
	margin-bottom: 42px;
}

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

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

		content: '';
	}

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

html > body > main > section.layouts > h2
{
	max-width: 405px;
	padding-right: 70px;
	padding-left: 660px;
}

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

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

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

html > body > main > section.location > figure
{
	position: absolute;
	top: 0;
	left: calc(9.38vw - 7px);

	width: calc(43.75vw - 31px);
	margin: 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.features
{
	max-width: 440px;
	padding-left: 820px;
	margin-right: auto;
	margin-left: auto;
}

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

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

	font-size: 18px;
}

html > body > main > section.location > ul.features
{
	list-style: none;
}

html > body > main > section.location > ul.features > li
	{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-align-items: center;
		    -ms-flex-align: center;
		        align-items: center;
		
		margin-left: -8px;
	}

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

html > body > main > section.location > ul.features > li > svg
		{
			width: 46px;
			height: auto;
			margin-right: 5px;
		}

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

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

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

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

html > body > main > section.triptych > ul.features
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	
	max-width: 1135px;
	padding: 0;
	margin: 70px auto 0;

	list-style: none;

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

	color: rgba(14, 17, 44, 0.7);
}

html > body > main > section.triptych > ul.features > li
	{
		width: 250px;
	}

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

html > body > main > section.triptych > ul.features > li > img
		{
			width: 170px;

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

			        transform: translateX( -30px );
		}

html > body > main > section.triptych > ul.features > li > h3
		{
			margin-bottom: 8px;
			
			font-size: 18px;
			
			color: #0e112c;
		}

html > body > main > section.triptych > ul.features > li > p
		{
			max-width: 250px;
			margin: 0;
		}

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

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

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.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: -40px;
		left: -40px;

		width: 543px;
		height: 498px;

		content: '';

		background: url( 'images/bg-lines-transparent.svg' ) center center no-repeat;
		background: contain;
	}

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

html > body > main > section.infrastructure > div.map > div.container
{
	position: relative;
	left: calc(50% - 50vw + 35px);

	width: calc(100vw - 70px);
	height: 600px;
}

html > body > main > section.infrastructure > div.map > div.container div[title], html > body > main > section.infrastructure > div.map > div.container img[src*="infrastructure"]
	{
		display: none;
	}

html > body > main > section.infrastructure > div.map > div.container div[title="Офис продаж на объекте"]
	{
		display: block;

		pointer-events: none;
	}

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.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.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: #0e112c;
	background: #d8b327;
	
	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;
		
		stroke: #0e112c;
	}

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

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

			-webkit-transform: rotate( 90deg );

			        transform: rotate( 90deg );
		}

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

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

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

			        transform: rotate( -90deg );
		}

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

	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;
	
	width: calc(100% - 300px);
	height: 100%;

	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.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;
	}

@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: 1399px)
	{
html > body > main > section > section > h3, html > body > main > section.layouts > div.slideshow > ul.slides > li > h3
{
		font-size: 36px
}
html > body > main > section > section > h3
{
		font-size: 24px
}
html > body > main > section.layouts > div.slideshow > ul.slides > li > h3
{
		font-size: 18px
}

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

aside:not(#lightbox)::before
	{
			top: -6px
	}

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

html > body > main > section.comfort > div.video-container
{
		left: 50%;
		
		width: 85vw;

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

		        transform: translateX( -50% )
}

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

html > body > main > section.layouts > h2
{
		padding-right: 0
}

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

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

html > body > main > section.location > figure
{
		right: 40%;
		left: auto;

		-webkit-transform: translateX( 100% );

		        transform: translateX( 100% )
}

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

html > body > main > section.location > h2::before
	{
			left: 0
	}

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

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

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

html > body > main > section.triptych > h2::before
	{
			left: 0
	}

html > body > main > section.triptych > p
{
		max-width: 75%;
		padding-right: 15%
}

html > body > main > section.triptych > ul.features
{
		position: relative;
		left: calc(50% - 450px);
		
		width: 900px
}

html > body > main > section.triptych > ul.features
{
		max-width: none
}

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

html > body > main > section.layouts > div.slideshow::before
	{
			width: 400px;
			height: 250px
	}

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

html > body > main > section.apartments > ul > li > a
{
		padding: 24px
}

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
{
		width: calc(100% - 250px)
}
	}

@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: 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
}

html > body > main > section.comfort > div.video-container
{
		width: 100vw
}

html > body > main > section.comfort > div.video-container > figure > figcaption
		{
				bottom: 5vw;
				left: 5vw
		}

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

html > body > main > section.comfort > h2
{
		background-position-x: 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: 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.location
{
		max-width: 100%;
		margin-top: 70px;
		margin-right: 5vw;
		margin-left: 5vw
}

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

		width: 100%;
		margin-top: 40px;

		-webkit-transform: none;

		        transform: none
}

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

html > body > main > section.triptych
{
		max-width: 100%;
		padding-top: 70px;
		padding-bottom: $section-inset-bottom-tablet;
		margin-right: 5vw;
		margin-left: 5vw
}

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

		margin: 20px 0 0 0
}

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

html > body > main > section.triptych > ul.features
{
		position: static;
		
		-webkit-flex-wrap: wrap;
		
		    -ms-flex-wrap: wrap;
		
		        flex-wrap: wrap;
		-webkit-justify-content: space-between;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		
		max-width: 90%
}

html > body > main > section.triptych > ul.features > li
	{
			width: calc(50% - 60px)
	}

html > body > main > section.triptych > ul.features > li:not(:last-child)
		{
				margin: 0 0 40px 0
		}

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.layouts > div.slideshow::before
	{
			display: none
	}

html > body > main > section.infrastructure > div.map > div.container
{
		left: calc(50% - 50vw);
		
		width: 100vw;
		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: 0;
		margin-left: 0
}

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.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.layouts > div.slideshow > ul.slides > li > img
{
		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;

		min-height: 0;
		padding-top: 40px
}

html > body > main > section.comfort > div.video-container > figure > figcaption
		{
				bottom: 8px
		}

html > body > main > section.comfort > p
{
		margin-bottom: 28px
}

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 > h2, html > body > main > section.location > p, html > body > main > section.location > h3, html > body > main > section.location > ul.features
{
		max-width: 100%
}

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

html > body > main > section.location > ul.features
{
		display: none
}

html > body > main > section.triptych > aside
{
		width: auto;
		max-width: 220px
}

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

html > body > main > section.triptych > ul.features > li
	{
			width: 100%
	}

html > body > main > section.triptych > ul.features > li > img
		{
				-webkit-transform: none;
				        transform: none
		}

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

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

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