html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;
}
main, article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
* {
	outline: none;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:before, :after {
	box-sizing: border-box;
}
body {
	position: relative;
	background: #eff2f6;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	color: #3d3d3d;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
.viewport-wrapper {
	margin: 0 auto;
	width: 100%;
	min-width: 320px;
	max-width: 1920px;
	padding: 24px;
	overflow: hidden;
	position: relative;
	z-index: 2;
}
/* .viewport-wrapper::before {
	content: '';
	display: block;
	background: url(../img/1441.jpg);
	width: 1440px;
	height: 900px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	z-index: -2;
}
.viewport-wrapper > * {
	opacity: 0.6;
} */
ul, ul li {
	list-style: none;
}
.bt {
	position: relative;
	cursor: pointer;
	transition: all 200ms ease;
	background: #3d3d3d;
	padding: 0 24px;
	height: 48px;
	border-radius: 8px;
	font-size: 18px;
	color: #fff;
	text-align: center;
	text-decoration: none;
}
a.bt {
	display: inline-flex;
	justify-content: center;
	-ms-align-items: center;
	align-items: center;
	justify-content: center;
}
.bt-dark {
	background: #3d3d3d;
}
.bt-red {
	background: #e5252b;
}
img {
	border: none;
	vertical-align: top;
	max-width: 100%;
}


.header {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-ms-align-items: center;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.header-aside {
	width: 435px;
	min-width: 435px;
}
.header-content {
	width: calc(100% - 435px);
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-ms-align-items: center;
	align-items: center;
	justify-content: space-between;
}
.header-logo {
	display: inline-block;
	border-radius: 6px;
	padding: 11px 24px 12px 24px;
	background: #e5252b;
}
.header-caption {
	font-weight: 600;
	font-size: 18px;
	line-height: 133%;
	letter-spacing: -0.01em;
	color: #3d3d3d;
}
.header-buttons {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
}
.header-buttons .bt:not(:first-child) {
	margin-left: 8px;
}


.body {
	margin-top: 24px;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	background: #fff;
	border-radius: 24px;
	overflow: hidden;
}
.body-aside {
	padding: 24px;
	width: 435px;
	min-width: 435px;
	p {
		margin: 0;
		line-height: 150%;
		letter-spacing: -0.01em;
		color: rgba(61, 61, 61, 0.6);
	}
}
.body-content {
	width: calc(100% - 435px);
}
#tabs {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	flex-wrap: wrap;
	padding-top: 14px;
	li {
		border-radius: 6px;
		padding: 7px 8px 9px 8px;
		background: #eff2f6;
		font-weight: 500;
		line-height: 100%;
		margin-top: 2px;
		cursor: pointer;
	}
	li:not(:last-child) {
		margin-right: 2px;
	}
	li.active {
		background: #e5252b;
		color: #fff;
	}
}
.list {
	margin: 32px -16px 0 0;
	padding-right: 24px;
	overflow: auto;
	height: calc(100vh - 289px);
	button {
		position: relative;
		display: block;
		width: 100%;
		border: 0;
		padding: 20px 16px 20px 24px;
		background: #fff;
		display: block;
		text-align: left;
		color: rgba(61, 61, 61, 0.6);
		cursor: pointer;
		font-size: 16px;
		.title {
			display: inline-block;
			border: 1px solid #eaeaf4;
			line-height: 100%;
			border-radius: 6px;
			padding: 7px 8px 9px 8px;
			font-weight: 500;
			letter-spacing: 1px;
		}
		.adds {
			display: block;
			max-width: 280px;
			margin-top: 12px;
			font-weight: 600;
			font-size: 18px;
		}
		.phone {
			display: block;
			margin-top: 12px;
			font-weight: 500;
			line-height: 22px;
		}
	}
	button:not(:first-child) {
		border-top: 1px solid #eaebed;
	}
	button::before {
		content: '';
		display: block;
		position: absolute;
		background: url('data:image/svg+xml,<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.386676 13.1733L5.56001 8.00001L0.386676 2.82667C0.263233 2.70323 0.165314 2.55668 0.0985069 2.3954C0.0317003 2.23411 -0.00268555 2.06125 -0.00268555 1.88667C-0.00268555 1.7121 0.0317003 1.53923 0.0985069 1.37795C0.165314 1.21666 0.263233 1.07012 0.386676 0.946673C0.510118 0.823231 0.656666 0.72531 0.817951 0.658504C0.979237 0.591697 1.1521 0.557312 1.32668 0.557312C1.50125 0.557312 1.67411 0.591697 1.8354 0.658504C1.99669 0.72531 2.14323 0.823231 2.26668 0.946673L8.38668 7.06667C8.90668 7.58667 8.90668 8.42667 8.38668 8.94667L2.26668 15.0667C2.14332 15.1903 1.99681 15.2883 1.83551 15.3552C1.67421 15.4222 1.5013 15.4566 1.32668 15.4566C1.15205 15.4566 0.979141 15.4222 0.817843 15.3552C0.656545 15.2883 0.510027 15.1903 0.386676 15.0667C-0.119991 14.5467 -0.133324 13.6933 0.386676 13.1733Z" fill="%233D3D3D" /></svg>');
		background-position: center;
		background-repeat: no-repeat;
		width: 32px;
		height: 32px;
		position: absolute;
		top: 20px;
		right: 16px;
		opacity: 0.6;
	}
	button:hover {
		color: #3d3d3d;
	}
	button:hover::before {
		opacity: 1;
	}
	button.active {
		background: #eff2f6;
		border-bottom-color: transparent;
		border-radius: 8px;
		color: #3d3d3d;
		.title {
			border-color: #fff;
			background: #fff;
		}
	}
	button.active + button {
		border-color: transparent;
	}
	button.hide {
		display: none;
	}
}
.list::-webkit-scrollbar {
  width: 3px;
}
.list::-webkit-scrollbar-track {
  background: #f5f7f7;
	border-radius: 4px;
	width: 3px;
}
.list::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #eaeaf4;
}



#nav {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	font-size: 20px;
	margin-bottom: 20px;
	li {
		margin-right: 20px;
		cursor: pointer;
	}
	li.active {
		text-decoration: underline;
	}
}
.map-content {
	border: 4px solid #fff;
	border-radius: 24px;
	overflow: hidden;
}
#map {
  width: 100%;
  height: calc(100vh - 144px);
}
.mobile-head {
	display: none;
}

@media(max-width: 1023px) {
	.viewport-wrapper {
	  padding: 0;
	}
	.header {
		padding: 16px;
	}
	.header-aside {
		width: auto;
		min-width: 0;
	}
	.header-content {
		width: auto;
		margin-left: 32px;
		margin-right: auto;
	}
	.header-logo {
		border-radius: 4px;
		padding: 11px 24px 12px 24px;
	}
	.header-logo img {
		width: 77px;
	}
	.header-buttons {
		position: fixed;
		z-index: 99;
		left: 0;
		bottom: 0;
		padding: 20px 16px 16px;
		width: 100%;
	}
	.header-buttons::before {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(360deg, #FFFFFF 72.86%, rgba(255, 255, 255, 0) 100%);
		z-index: -2;
	}
	.header-buttons .bt {
		flex-grow: 1;
	}
	.body {
    margin-top: 0;
    border-radius: 16px 16px 0 0;
	}
	.body-aside {
		min-width: 100%;
		width: 100%;
		padding: 24px 16px 0;
	}
	.list {
    margin: 24px 0 0;
    padding: 0 0 132px;
    overflow: visible;
    height: auto;
	}
	.body-content {
		width: 100%;
		padding: 0;
	}
	.map-content {
		width: 100%;
		height: 100vh;
		background: #eff2f6;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 10;
		border: 0;
    border-radius: 0;
		display: none;
		z-index: 200;
	}
	.modal-for-mobile {
		display: block;
	}
	.mobile-head {
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		height: 56px;
		-ms-align-items: center;
		align-items: center;
		justify-content: flex-end;
		padding: 0 16px;
	}
	.bt-close {
		display: -webkit-inline-flex;
		display: -ms-inline-flex;
		display: inline-flex;
		-ms-align-items: center;
		align-items: center;
		font-weight: 500;
		font-size: 14px;
		line-height: 114%;
		letter-spacing: -0.01em;
		color: #3d3d3d;
	}
	.bt-close::after {
		content: '';
		display: block;
		width: 24px;
		height: 24px;
		background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.9998 13.4L9.0998 16.3C8.91647 16.4833 8.68314 16.575 8.3998 16.575C8.11647 16.575 7.88314 16.4833 7.6998 16.3C7.51647 16.1167 7.4248 15.8833 7.4248 15.6C7.4248 15.3167 7.51647 15.0833 7.6998 14.9L10.5998 12L7.6998 9.125C7.51647 8.94167 7.4248 8.70833 7.4248 8.425C7.4248 8.14167 7.51647 7.90833 7.6998 7.725C7.88314 7.54167 8.11647 7.45 8.3998 7.45C8.68314 7.45 8.91647 7.54167 9.0998 7.725L11.9998 10.625L14.8748 7.725C15.0581 7.54167 15.2915 7.45 15.5748 7.45C15.8581 7.45 16.0915 7.54167 16.2748 7.725C16.4748 7.925 16.5748 8.16267 16.5748 8.438C16.5748 8.71333 16.4748 8.94233 16.2748 9.125L13.3748 12L16.2748 14.9C16.4581 15.0833 16.5498 15.3167 16.5498 15.6C16.5498 15.8833 16.4581 16.1167 16.2748 16.3C16.0748 16.5 15.8375 16.6 15.5628 16.6C15.2881 16.6 15.0588 16.5 14.8748 16.3L11.9998 13.4Z" fill="%233D3D3D" /></svg>');
		margin-left: 4px;
	}
	#map {
		border: 4px solid #fff;
    border-radius: 24px;
	}
	#map {
	   height: calc(100vh - 56px);
	}
}

@media(max-width: 660px) {
	.header-content {
		width: 170px;
	}
	.bt {
		height: 40px;
	}
	.header-buttons {
		flex-direction: column;
	}
	.header-buttons .bt {
		width: 100%;
		margin-top: 8px;
	}
	.header-buttons .bt:not(:first-child) {
	   margin: 8px 0 0;
	}
	.header-buttons .bt-red {
		order: -1;
	}
}