:root{
	--container-width-max:1392px;
	--container-text-max:670px;
	
	--body-padding-top:95px;

	--radius-none:0;
	--radius-xs:4px;
	--radius-s:8px;
	--radius-m:12px;
	--radius-l:16px;
	--radius-xl:24px;
	--radius-block:32px;
	--radius-rounded:50%
}
*{
	box-sizing:border-box;
	scroll-margin-top:72px
}
body{
	vertical-align:baseline;
	background:#fff;
	margin:0;
	padding:0;
	border:0;
	outline:0 none;
	overflow-x:hidden;
	color:var(--text-body-01);
	font:var(--body-m-regular);
	letter-spacing:var(--letter-spacing-m);
	padding-top:var(--body-padding-top)
}
::-webkit-scrollbar{
	width:var(--spacing-1);
	height:var(--spacing-2)
}
body::-webkit-scrollbar{
	width:var(--spacing-2);
	height:var(--spacing-2)
}
::-webkit-scrollbar-track{
	background:var(--surface-02);
	border-radius:var(--radius-xs);
}
::-webkit-scrollbar-thumb{
	background:var(--surface-03);
	border-radius:var(--radius-xs);
	cursor:grab
}
a{
	color:var(--primary-default);
	text-decoration:none;
	/* font-weight:450 */
}
a:hover{
	color:var(--primary-hover)
}
a:active{
	color:var(--primary-active)
}
strong,
th{
	font-weight:inherit;
	text-align:inherit
}
address,
var{
	font-size:inherit;
	font-weight:inherit;
	font-style:inherit;
	display:inline
}
button{
	appearance:none;
	border:0;
	cursor:pointer;
	font-family:'Lato',system-ui,Arial,Helvetica;
}
iframe{
	max-width:100%;
	border:0
}
img,
video{
	width:100%;
	max-width:100%;
	height:auto
}
.center{
	text-align:center
}
.hide{
	clip:rect(1px,1px,1px,1px);
	height:1px;
	overflow:hidden;
	position:absolute;
	white-space:nowrap;
	width:1px!important;
	z-index:-1000;
	-webkit-user-select:none
}
.line-clamp{
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	box-orient:vertical;
	line-clamp:2;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2
}
textarea{
	resize:none;
	width:100%;
	font:var(--body-l-regular);
	letter-spacing:var(--letter-spacing-l);
	min-height:5rem;
	border-radius:var(--radius-m);
	border:2px solid var(--border-light);
	background:var(--surface-white);
	padding:var(--spacing-3)
}
select{
	font:inherit;
	letter-spacing:inherit;
	word-spacing:inherit;
	cursor:pointer
}

.container{
	width:100%;
	max-width:var(--container-width-max);
	margin:0 var(--spacing-container)
}
.container-text{
	width:100%;
	max-width:var(--container-text-max);
	margin:0 auto
}
.container-neg{
	width:auto;
	margin-left:var(--spacing-container-neg);
	margin-right:var(--spacing-container-neg)
}
.container-padding{
	padding-left:var(--spacing-container);
	padding-right:var(--spacing-container)
}
.block-container{
	padding:var(--spacing-9) 0;
	border-radius:var(--radius-block)
}
.block-container .inside{
	display:grid;
	gap:var(--spacing-5)
}
.text-gradient{
	background:linear-gradient(135deg, var(--text-primary-default) 0%, #ff6b81 100%);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent
}
#cookieMessage{
	display:flex;
	flex-direction:column;
	gap:var(--spacing-2);
	bottom:var(--spacing-4);
	left:var(--spacing-4);
	max-width:300px;
	position:fixed;
	z-index:10000;
	width:100%;
	padding:var(--spacing-2) var(--spacing-3);
	font:var(--body-xs-regular);
	letter-spacing:var(--letter-spacing-xs);
	color:var(--text-body-01);
	background:var(--surface-02);
	border-radius:var(--radius-m)
}
#header-top{
	display:grid;
	gap:var(--spacing-2)
}
#header-top .content{
	padding:var(--spacing-2) 0;
	display:flex;
	justify-content:flex-end;
	gap:var(--spacing-4);
	align-items:center
}
@media(min-width:480px) {
	#header-top .logo{
		display:none
	}
}
#header-top a,
#header-top button,
#header .items .contact .desktop .working-hours,
#footer .content .info .phone .working-hours,
#consultation .content .manager .description,
#showroom-info .content .description .phone .working-hours{
	font:var(--body-s-regular);
	letter-spacing:var(--letter-spacing-s)
}
#header .items .contact .desktop .working-hours{
	user-select:none
}
#header-top a{
	color:var(--text-body-03);
	transition:color .4s
}
#header-top a:hover{
	color:var(--primary-hover)
}
#header{
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    max-width: var(--container-width-max);
    background:rgba(255,255,255,.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius:var(--radius-l);
    padding:var(--spacing-3) var(--spacing-5);
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
    transition: all .4s cubic-bezier(.16, 1, .3, 1);
	z-index:3
}
#header .items{
	width:100%;
	max-width:var(--container-width-max);
	display:flex;
	justify-content:space-between;
	align-items:center
}
#header-top .logo{
	margin:0 auto
}
#header-top .logo a,
#header .items .logo a{
	min-width:230px;
	max-width:230px;
	display:flex
}
#header .items .contact{
	display:flex;
	gap:var(--spacing-2);
	align-items:center
}
#header .items .contact .buttons .menu,
#header .items .contact .buttons .phone,
#header .items .contact .buttons .home{
	display:none
}
#header .items .contact .desktop{
	display:flex;
	align-items:center;
	gap:var(--spacing-2)
}
#header .items .contact .desktop .info{
	display:flex;
	flex-direction:column
}
#header .items .contact .desktop a{
	color:var(--text-body-01);
	font:var(--body-m-semibold);
	letter-spacing:var(--letter-spacing-m);
	transition:color .4s
}
#header .items .contact .desktop a:hover{
	color:var(--primary-default)
}
#header .items .contact .buttons{
	display:flex;
	gap:var(--spacing-3);
	height:fit-content
}
#header .items .contact .buttons img{
	width:var(--spacing-5);
	height:var(--spacing-5);
	min-width:var(--spacing-5);
	min-height:var(--spacing-5)
}
#header .items .contact .buttons .favorites{
	position:relative
}
#header .items .contact .buttons .favorites .count{
	display:flex;
    align-items:center;
    justify-content:center;
	font:var(--body-xs-regular);
	letter-spacing:var(--letter-spacing-xs);
    width:var(--spacing-4);
    height:var(--spacing-4);
    position:absolute;
    top:var(--spacing-neg-2);
    right:var(--spacing-neg-2);
    background:var(--primary-default);
    color:var(--text-body-01-inverse);
    border-radius:var(--radius-rounded)
}

#footer{
	width:100%;
	display:flex;
	flex-direction:column;
	gap:var(--spacing-4);
	margin-top:var(--spacing-9);
	background:var(--surface-09);
	padding:var(--spacing-7) 0
}
#footer .content{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	padding-bottom:var(--spacing-6);
	gap:var(--spacing-5);
	border-bottom:1px solid var(--border-dark);
	color:var(--text-body-02-inverse)
}
#footer .content .info{
	display:flex;
	flex-direction:column;
	gap:var(--spacing-3);
	text-align:center;
	align-items:center
}
#footer .content .info .logo img{
	width:272px
}
#footer .content .info .phone{
	display:flex;
	flex-direction:column
}
#footer .content .info .payment{
	display:flex;
	align-items:center;
	gap:var(--spacing-2)
}
#footer .content .info .payment img{
	width:90px
}
#footer .about .copyright{
	color:var(--text-body-02);
	font:var(--body-xs-regular);
	letter-spacing:var(--letter-spacing-xs)
}

.buttons.social{
	display:flex;
	gap:var(--spacing-2)
}



#advantages{
	margin-top:var(--spacing-9);
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
	gap:var(--spacing-5) var(--spacing-4);
	font-weight:600;
	text-align:center
}

#callback{
	position:fixed;
    left:0;
	align-items:center;
	justify-content:center;
    right:0;
    top:0;
    bottom:0;
    z-index:10000;
    overflow:auto;
    display:none;
	background:rgba(104,104,104,.7)
}
#callback.active{
    display:flex
}
#callback .content{
	background-color:var(--surface-09);
	color:var(--text-body-02-inverse);
	padding:var(--spacing-5);
	border-radius:var(--radius-m);
	min-height:430px;
	height:fit-content;
	max-width:900px;
	display:grid;
	gap:var(--spacing-6);
	grid-template-columns:minmax(300px, 375px) minmax(300px, 600px);
	position:relative;
	overflow:hidden
}
#callback .content form{
	display:flex;
	flex-direction:column;
	gap:var(--spacing-4)
}
#callback .content form .description{
	margin:0;
	display:flex;
	gap:var(--spacing-4)
}
#callback .content form .description img{
	display:none;
	border-radius:var(--radius-m);
	width:100px;
	height:100px
}
#callback .content .user-agreement{
	font:var(--body-xs-regular);
	letter-spacing:var(--letter-spacing-xs);
	color:var(--text-body-03);
}
#callback .content .rightside{
	background:var(--primary-default);
	position:relative;
	margin-top:var(--spacing-neg-5);
	margin-bottom:var(--spacing-neg-5);
	margin-right:var(--spacing-neg-5)
}
#callback .content .rightside img{
	/*position:absolute;
	min-width:110%;
	min-width:calc(100% + var(--spacing-6));
	top:50%;
	left:var(--spacing-neg-6);
	transform:translate(0,-50%)*/
	object-fit:cover;
    height:100%
}
#callback .content .rightside .expert{
	font:var(--body-l-medium);
	letter-spacing:var(--letter-spacing-l);
    position:absolute;
    bottom:0;
    display:flex;
    width:100%;
    justify-content:flex-end;
    align-items:center;
    padding:var(--spacing-6) var(--spacing-5) var(--spacing-5);
    color:var(--text-body-01-inverse);
    background:linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0,.5) 50%, rgba(255, 255, 255, 0) 100%);
}
#callback .content .hobana{
	position:absolute;
	right:0;
	top:0
}
#showroom{
	display:flex;
	flex-direction:column;
	gap:var(--spacing-5);
	overflow-x:hidden
}
#showroom .content{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:var(--spacing-5);
	font:var(--body-l-regular);
	letter-spacing:var(--letter-spacing-l)
}
#showroom .content .description,
#showroom .content .prefs{
	display:grid;
	grid-template-columns:1fr;
	gap:var(--spacing-5);
	height:fit-content
}
#showroom .content .prefs .item{
	display:flex;
	flex-direction:column;
	gap:var(--spacing-4);
	height:100%;
	padding:var(--spacing-5);
	background-color:var(--surface-01);
	border-radius:var(--radius-m)
}
#showroom .content .description p{
	margin:0
}
#showroom .content .prefs .item .title{
	font:var(--body-xl-bold);
	letter-spacing:var(--letter-spacing-xl)
}
#showroom .content .prefs .item .title span{
	color:var(--text-primary-default)
}
#showroom .inline-gallery-container{
	height:100%;
	overflow:hidden
}

#showroom-info{
	margin-top:var(--spacing-9);
	display:flex;
	flex-direction:column;
	gap:var(--spacing-5);
	background: var(--tertiary-default);
	padding: var(--spacing-7);
	border-radius: var(--radius-l);
	border: 1px solid var(--border-light)
}
#showroom-info img.main{
	object-fit:cover;
	object-position:50% 75%;
	border-radius:var(--radius-m);
	height:384px
}
#showroom-info .content{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:var(--spacing-5)
}
#showroom-info .content iframe{
	border-radius:var(--radius-m)
}
#showroom-info .content .description{
	font:var(--body-m-medium);
	letter-spacing:var(--letter-spacing-m);
	display:flex;
	flex-direction:column;
	gap:var(--spacing-4)
}
#showroom-info .content .description .phone{
	display:flex;
	flex-direction:column
}
#showroom-info .content .description .buttons{
	display:flex;
	gap:var(--spacing-2)
}

#consultation{
	display:grid;
	grid-template-columns:1fr 1fr;
	padding:var(--spacing-7);
	flex-direction:column;
	align-items:flex-start;
	gap:var(--spacing-5);
	align-self:stretch;
    max-width:var(--container-width-max);
	border:1px solid var(--border-light);
	border-radius:var(--radius-l);
	background:var(--tertiary-default);
	margin-top:var(--spacing-9)
}
#consultation .manager img{
	border-radius:var(--radius-m);
	margin-bottom:var(--spacing-1)
}
#consultation .manager .name{
	font:var(--body-l-bold);
	letter-spacing:var(--letter-spacing-l)
}

@media(max-width:767px){
	#consultation{
		grid-template-columns:1fr;
		padding:var(--spacing-5)
	}
}

#why-mtc{
	max-width:var(--container-text-max);
	display:grid;
    gap:var(--spacing-4);
	margin:var(--spacing-11) auto 0
}
#why-mtc .content{
	display:grid;
    width:100%;
    margin:0 auto;
    gap:var(--spacing-4);
	font:var(--body-m-medium);
	letter-spacing:var(--letter-spacing-m);
	height:0;
	overflow:hidden;
	transition:height .4s
}
#why-mtc .content.active{
	height:100%
}
#why-mtc .content p{
	margin:0;
	padding:0
}


@media(min-width:768px){
	#footer .content .info{
		order:1
	}
	#footer .content .menu.right{
		order:2;
		text-align:right
	}
}

@media(max-width:1392px){
	#header .items,
	.container{
		max-width:100%;
		max-width:-webkit-fill-available;
		max-width:-moz-fill-available;
		max-width:-moz-available;
		max-width:fill-available
	}
	
	#header .items .logo a{
		max-width:190px
	}
}

@media(max-width:1199px){
	#header .items .contact{
		margin-left:auto
	}
	#header .items .contact .buttons .menu{
		display:block
	}
}

@media(max-width:991px){
	#showroom .content{
		grid-template-columns:1fr
	}
	#showroom .content .prefs{
		grid-template-columns:1fr 1fr
	}
	#consultation .content{
		display:grid;
		grid-template-columns:1fr
	}
}

@media(max-width:768px){
	#why-mtc{
		margin:var(--spacing-9) var(--spacing-container) 0;
		max-width:fit-content
	}
}
@media(max-width:670px){
	#consultation{
		margin-left:0;
		margin-right:0
	}
}
@media(max-width:577px){
	#header .items .contact .desktop .info{
		display:none
	}
	#header .items .contact .buttons .phone{
		display:flex
	}
	
	#callback .content{
		max-width:400px;
		grid-template-columns:1fr
	}
	#callback .content form .description img{
		display:block
	}
	#callback .content .hobana svg{
		fill:var(--surface-white)
	}
	#callback .content .rightside{
		display:none
	}
	#showroom-info .content{
		grid-template-columns:1fr
	}
	#footer .content{
		grid-template-columns:1fr 1fr;
	}
	#footer .content .info{
		grid-column:span 2;
		text-align:center
	}
}

@media(max-width:575px){
	:root{
		--radius-block:32px
	}
	.block-container{
		padding:var(--spacing-6) 0
	}
	#showroom .content .prefs{
		grid-template-columns:1fr
	}
	#showroom-info{
		padding:var(--spacing-5)
	}
}
@media(max-width:480px){
	:root{
		--body-padding-top:var(--spacing-4)
	}
	#header{
		height:fit-content;
		width:auto;
		padding-top:var(--spacing-3);
		padding-bottom:var(--spacing-3);
		box-shadow:none;
		bottom:2px;
		top:unset
	}
	#header .items{
		flex-direction:column;
		gap:var(--spacing-4)
	}
	#header .items .logo{
		display:none
	}
	#header .items .contact{
		margin-right:auto
	}
	#header .items .contact .buttons .home{
		display:flex
	}
	#header-top a,
	#header-top button{
		font:var(--body-xs-regular);
		letter-spacing:var(--letter-spacing-xs)
	}
	#footer{
		grid-template-columns:1fr
	}
	#footer .social{
		grid-column:1;
		margin:0 auto
	}
	textarea,
	#header .items .contact .desktop a,
	#showroom .content{
		font:var(--body-m-regular);
		letter-spacing:var(--letter-spacing-m)
	}
	#showroom-info img.main{
		height:300px
	}

	#consultation{
		padding-left:var(--spacing-container);
		padding-right:var(--spacing-container)
	}
	
	#header.is-hidden{
		transform:translateY(110%)
	}
}