* {margin: 0px; padding: 0px; box-sizing: border-box; outline: none; -webkit-locale: auto}
html, body {width: 100%}
body {font-family: 'Nunito Sans', sans-serif; color: #fff; line-height: 1; font-size: 16px; -webkit-text-size-adjust: none; font-weight: 300; background: #2A2B34; -webkit-font-smoothing: antialiased}
body:not(.home) {padding: 200px 0}
.max {margin: 0px auto; max-width: 1000px; padding: 0 20px}
body.home .back {position: absolute; top: 0; left: calc(100%/3); width: calc(100%*2/3); height: 100%; z-index: -1; background: url(images/back.jpg) 50% 0% no-repeat; background-size: cover}
body:not(.home) .back {position: absolute; top: 0; left: 0; width: 100%; z-index: -1; max-height: unset}

a {color: inherit; text-decoration: none; outline: none; cursor: pointer; transition: 250ms}
h1, h2, h3, .h1-like {line-height: 1.3; font-weight: 900}
h1, .h1-like {font-size: 48px; margin-bottom: 40px; color: #fff}
h2 {font-size: 48px}

b, strong, th {font-weight: 600; color: #fff}
i {font-style: normal}
ul {list-style-type: none}
img {object-fit: contain}
img, svg {height: auto; max-height: 100%; max-width: 100%; display: inline-block; vertical-align: middle}
iframe {width: 100%; border: none}
input, select, textarea, button {-webkit-appearance: none; -moz-appearance: none; font-family: inherit; font-size: inherit; color: inherit; border-radius: 0px}
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=search] {display: block; width: 100%; font-size: 15px; border: 1px solid #E2E4ED; padding: 0px 20px; background: transparent; line-height: 56px; height: 60px; border-radius: 0; font-weight: 500; transition: 250ms}
textarea {display: block; width: 100%; padding: 25px; resize: none; height: 100px; font-size: 15px; background: transparent; border: 1px solid #E2E4ED; border-radius: 0; font-weight: 500; transition: 250ms}
input[type=text]:focus, input[type=tel]:focus, input[type=email]:focus, textarea:focus, input[type=password]:focus, input[type=search]:focus {border-color: #fff; box-shadow: inset 0 0 0 1px #fff}

input[type=checkbox] {display: inline-block; vertical-align: middle; width: 16px !important; height: 16px; margin-right: 10px !important; position: relative; border:none; border: 1px solid #E2E4ED; background: transparent}
input[type=checkbox]:hover {border-color: #fff}
input[type=checkbox]:checked {background: url("data:image/svg+xml,<svg viewBox='0 0 356.7 297.3' xmlns='http://www.w3.org/2000/svg'><polygon fill='%23fff' points='42.4,153 0,195.4 101.9,297.3 356.7,42.4 314.3,0 101.9,212.4'/></svg>") 50% 50% no-repeat; background-size: 9px}

input[type=radio] {display: inline-block; vertical-align: middle; width: 16px !important; height: 16px; margin-right: 10px !important; position: relative; border-radius: 50%; margin-left: 4px; border:none; border: 1px solid #dadada; background: #fff}
input[type=radio]:hover {border-color: #D4101C}
input[type=radio]:checked {background: #fff; border: 4px solid #D4101C}

.button, button {height: 60px; line-height: 60px; background: #D4101C; border: none; width: 50%; text-align: center}

input[readonly], input[readonly]:focus {opacity: 0.5; border-color: #b3b3b3}

input.check:focus:invalid {border-bottom-color: #D4101C}
svg {fill: currentColor}
svg * {transition: fill 250ms}

.bread-crumbs {opacity: 0.5}

.grecaptcha-badge {display: none !important}
.wp-block-columns {margin: 0}
figure {margin: 0}
::placeholder {color:#BEC0C2}
.belka {display: block; width: 30px; height: 30px}

.hidden {display: none}
.lazy {visibility: hidden; opacity: 0; transition: 250ms}
.ds {-webkit-user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none}
.flex {display: flex; display:-webkit-flex; -webkit-justify-content:space-between; justify-content:space-between; flex-wrap: wrap; -webkit-flex-wrap: wrap}
.flex-nowrap {display: flex; display:-webkit-flex; -webkit-justify-content:space-between; justify-content:space-between; flex-wrap: nowrap; -webkit-flex-wrap: nowrap}
.flex-center {display: flex; display:-webkit-flex; -webkit-justify-content:space-between; justify-content:space-between; flex-wrap: wrap; -webkit-flex-wrap: wrap; align-items: center; -webkit-align-items:center}
.flex-inline {display: flex; display:-webkit-flex; -webkit-justify-content:flex-start; justify-content:flex-start; flex-wrap: wrap; -webkit-flex-wrap: wrap}
.cover {background-position: 50% 50%; background-repeat: no-repeat; background-size: cover}
.contain-0 {background-position: 0% 50%; background-repeat: no-repeat; background-size: contain}
.contain-50 {background-position: 50% 50%; background-repeat: no-repeat; background-size: contain}
.mobile-show {display: none}
.tablet-show {display: none}
/* BASIC */

.side-title span{
	display: block;
	color: rgba(255, 255, 255, 0.3);
	font-weight: 900;
	font-size: 90px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.side-title{
	position: absolute;
	top: 62%;
	text-align: center;
	right: 10%;
	transform: translateY(-50%);
}
.side-title.second{
	top: 230%;
	
	right: auto;
	left: 10%;
}
/* HEADER + FOOTER */
header {position: fixed; background: #2A2B34; top: 0; width: 100%; left: 0; right: 0; z-index: 1000; height: 100px; border-bottom: 1px solid rgba(255, 255, 255, 0.2)}
header p {text-align: center; margin-bottom: 100px; display: block}
header ul {display: flex; width: 100%; gap: 50px; justify-content: center; text-transform: uppercase}
header ul li:nth-of-type(1) {transition: 250ms}
header .contacts {text-align: right; padding-right: calc(100%/6 - 50px); font-weight: 600; display: flex}
header .contacts svg {height: 16px; width: 16px}
header .contacts a {display: flex; align-items: center; gap: 10px; margin-left: 40px}
header .contacts a:hover {color: #D4101C}
header h1, header .h1-like {font-size: 22px; text-align: center; width: calc(100%/3); margin: 0}
header .h1-like img {width: 60px; margin-right: 10px}
.menu-button svg {cursor: pointer; margin-top: 2px; -webkit-tap-highlight-color: transparent; transition: transform 400ms; width: 40px}
.menu-button.active svg {transform: rotate(45deg)}
.menu-button svg .line {fill:none; transition: stroke-dasharray 400ms, stroke-dashoffset 400ms; stroke: currentColor; stroke-width:4; stroke-linecap:round}
.menu-button svg .top {stroke-dasharray: 40 160}
.menu-button svg .middle {stroke-dasharray: 40 142; transform-origin: 50%; transition: transform 400ms}
.menu-button svg .bottom {stroke-dasharray: 40 85; transform-origin: 50%; transition: transform 400ms, stroke-dashoffset 400ms}
.menu-button.active svg .top {stroke-dashoffset: -64px}
.menu-button.active svg .middle {transform: rotate(90deg)}
.menu-button.active svg .bottom {stroke-dashoffset: -64px}
footer {position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; font-size: 24px}
footer .level-1 {display: flex}
footer .level-1 > li {width: calc(100%/3)}
footer .level-1 li a {height: 10vh; display: flex; justify-content: center; align-items: center; position: relative}
footer .level-1 > li:nth-of-type(1) > a {background: #D4101C}
footer .level-1 > li:nth-of-type(2) > a {background: #2A2B34}
footer .level-1 > li:nth-of-type(3) > a {background: rgba(116, 116, 116, 0.4); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px)}
footer .level-2 {position: fixed; left: 0; width: calc(100%/3); bottom: 10vh; overflow: hidden; transition: 250ms; transform: scaleY(0); visibility: hidden; transform-origin: 0 100%; background: #2A2B34}
footer .level-2 li + li {border-top: 1px solid #333}
footer .level-2 li a:hover, footer .level-2 li a:active {background: #D4101C}
footer .level-2 li.current-menu-item a:before {position: absolute; content: ''; left: 0; top: 0; width: 2px; height: 100%; background: #D4101C}
footer .level-1 > li.active .level-2 {visibility: visible; transform: scaleY(1)}
/* HEADER + FOOTER */






/* HOME */
.logo {width: 150px; margin-bottom: 10px}
h2 {font-size: 32px}
.home-first {height: 100vh}
.home-first .left-part {width: calc(100%/3); padding: 0 20px; backdrop-filter: blur(12.5px); -webkit-backdrop-filter: blur(12.5px); background: #2A2B34dd; height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; align-items: center}
.home-first .left-part .desc {margin: 30px 0; line-height: 1.3}
.home-first .cars {display: flex; justify-content: center; gap: 20px; max-width: 250px; flex-wrap: wrap}
/* HOME */


/* CONTENT */
.content {color: #E2E4ED; font-size: 18px; line-height: 1.7}
.content table {border-collapse: collapse; width: 100%; margin-top: 36px}
.content table td {padding: 10px; border: none}
.content table tr + tr td {border-top: 1px solid #E2E4ED}
.content a:hover {color: #D4101C}
.content p + p {margin-top: 18px}
.content img, .contacts iframe {margin: 36px 0}
.contacts .left-part {width: 50%; padding-right: 18px}
.contacts .right-part {width: 50%; padding-left: 18px}
.contacts .scheme {display: grid; grid-gap: 36px; grid-template-columns: 1fr 1fr; margin-top: 36px}
.contacts .scheme a {height: 0; padding-bottom: 60%}

.about {padding-left: 36px; border-left: 2px solid rgba(212, 16, 28, 1); margin-top: 72px}

.gallery {display: grid; grid-template-columns: repeat(3,1fr); gap: 36px; margin-top: 72px}
.gallery video {grid-column: span 3; width: 100%; border: 5px solid #ffffff11; transition: 250ms}
.gallery .img {height: 0; padding-bottom: 160%; border: 5px solid #ffffff11; transition: 250ms}
.gallery .img:hover, .gallery video:hover {border-color: #fff}

.wpcf7 label {position: relative}
.wpcf7 label {margin-bottom: 18px; display: block}
.wpcf7 .placeholder {position: absolute; left: 20px; background: #2A2B34; padding: 0 10px; top: -7px; font-size: 14px; z-index: 1}
.wpcf7 .wpcf7-list-item {margin: 0}
/* CONTENT */


/* INDEX */
.index .grid {display: grid; grid-template-columns: repeat(3,1fr); gap: 36px}
.index .item .img {height: 0; padding-bottom: 100%; margin-bottom: 18px; position: relative}
.index .item .img:after {position: absolute; border: 2px solid #fff; content: ''; top: -10px; left: -10px; width: calc(100% + 20px); height: calc(100% + 20px); box-sizing: border-box; opacity: 0; transition: 250ms}
.index .item {color: #E2E4ED; font-size: 18px}
.index .item:hover {color: #fff}
.index .item:hover .img:after {opacity: 1}
/* INDEX */

@media screen and (max-width:1919px) {
	header {height: 80px}
	.side-title {
		display: none;
	}
}


@media screen and (max-width:1039px) {
	header .contacts {padding-right: 20px}
	footer {font-size: 20px}
	header h1, header .h1-like {text-align: left; padding-left: 20px; font-size: 20px; width: unset}
	body:not(.home) {padding: 100px 0}
}

@media screen and (max-width:1023px) {
h2 {font-size: 26px}
header, footer .level-1 li a {height: 60px}
footer .level-2 {bottom: 60px; width: 100%} 
header .contacts {font-size: inherit}
.index .grid {grid-template-columns: repeat(2,1fr)}
}

@media screen and (max-width:767px) {
.content {font-size: 16px}
h1, .h1-like {font-size: 32px; margin-bottom: 16px}
.content table {margin-top: 16px}
.content img, .contacts iframe {margin: 16px 0}
h2 {font-size: 32px}
.content p + p {margin-top: 16px}
.mobile-hide {display: none}
.mobile-show {display: block}
header h1 {font-size: 16px}
footer {font-size: 16px}
.home-first {position: absolute; top: 80px; bottom: 80px; left: 20px; right: 20px; margin: auto; width: unset; height: unset}
.home-first .left-part {width: 100%}
.menu-button svg {width: 30px}
header .contacts {font-size: 0}
header .contacts a {height: 32px; width: 32px; padding: 7px; background: rgba(116, 116, 116, 0.14); justify-content: center; gap: 0; margin-left: 20px}
.contacts .left-part {width: 100%}
.belka {width: 30px; height: 30px}
.about {padding-top: 32px; border-left: 0; border-top: 2px solid rgba(212, 16, 28, 1); padding-left: 0; margin-top: 32px}
.back {left: 0; width: 100%}
.logo {width: 120px}
.index .grid {gap: 16px; grid-template-columns: 100%}
.index .item {font-size: inherit; display: flex; align-items: center; justify-content: space-between}
.index .item .img {margin-bottom: 0; width: 100px; height: 100px; padding: 0}
.index .item .title {width: calc(100% - 120px)}
.index .item .img:after {display: none}
.gallery {grid-template-columns: repeat(2,1fr); gap: 16px}
.gallery video {grid-column: span 2}
.contacts .scheme {gap: 16px}
}