@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap');

* {margin: 0px; padding: 0px; box-sizing: border-box; outline: none}
html, body {width: 100%}
body {font-family: 'Rubik', sans-serif; line-height: 1.7; font-size: 17px; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; overflow-x: hidden}
body.home-page {background: #233a30; color: #fff}
body.lock {overflow: hidden}
a {color: inherit; text-decoration: none; outline: none; cursor: pointer}
h1, h2, h3, .h2-like {width: 100%; font-weight: 500}
h1 {font-size: 32px; text-transform: uppercase}
h3 {font-size: 17px}
b, strong, th {font-weight: 500; color: #ff6900}
img, svg {height: auto; max-height: 100%; max-width: 100%; vertical-align: top}
iframe {width: 100%; border: none; min-height: 250px}
table {width: 100%; border-collapse: collapse}
ol li {list-style-type: none; position: relative; padding-left: 20px}
ol {counter-reset: list1}
ol li:before {counter-increment: list1; content: counter(list1) ". "; position: absolute; left: 0px; font-weight: 500; color: #233a30}
ol ol {counter-reset: list2}
ol ol li {padding-left: 40px}
ol ol li:before {counter-increment: list2; content: counter(list1) "." counter(list2) ". "; position: absolute; left: 0px}
input, select, textarea, button {-webkit-appearance: none; -moz-appearance: none; transition: border-color 200ms; font-family: inherit; font-size: inherit; color: inherit}
input[type=text], input[type=tel], input[type=email], input[type=password] {display: block; width: 100%; font-size: 15px; border: none; border-bottom:1px solid #ddddde; padding: 0px; background: transparent; border-radius: 0px; line-height: 44px; height: 45px}
textarea {display: block; width: 100%; border:1px solid #eeeeef; padding: 10px; resize: none; height: 80px; font-size: 15px; border-radius: 0px}
input[type=text]:focus, input[type=tel]:focus, input[type=email]:focus, textarea:focus, input[type=password]:focus {border-color: #333334}
input[type=checkbox] {display: inline-block; vertical-align: middle; width: 13px !important; height: 13px; margin-right: 10px !important; position: relative; border-radius: 1px; margin-left: 4px; border:1px solid #fff; border-radius: 50%; transition: 200ms}
input[type=checkbox]:before {border:1px solid #333334; border-radius: 50%; content: ''; display: block; width: 15px; height: 15px; position: absolute; top:-3px; left: -3px}
input[type=radio] {display: inline-block; vertical-align: middle; width: 13px !important; height: 13px; margin-right: 10px !important; position: relative; border-radius: 50%; margin-left: 4px; border:none; transition: 200ms}
input[type=radio]:before {border:1px solid #333334; content: ''; display: block; width: 17px; height: 17px; position: absolute; top:-3px; left: -3px; border-radius: 50%} 
input[type=checkbox]:hover, input[type=radio]:hover {background: #ddddde}
input[type=radio]:checked, input[type=checkbox]:checked {background: #ffdd00}
input.check:invalid {background-image: url(../images/ui-svg/invalid.svg); background-position: right, 10px 50%; background-size: 16px; background-repeat: no-repeat}
svg {fill: currentColor}
svg * {transition: fill 300ms}
/* GLOBAL */
.top-line .whatsapp{width: 20px;height: 20px;}
.flex-center.gap{gap: 10px;}

/* BASIC */
.lazy {visibility: hidden}
.ds {-webkit-user-select: none; -moz-user-select: none; -webkit-user-drag: 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}
.max {padding: 0px 20px; max-width: 1150px; margin: 0px auto}
.max.flex-center {height: 100%}
.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}
.contain-100 {background-position: 100% 50%; background-repeat: no-repeat; background-size: contain}
.button {background-color: transparent; transition: 250ms; line-height: 60px; height: 60px; padding: 0px 15px; border: none; display: inline-block; cursor: pointer; vertical-align: top; text-align: center; white-space: nowrap; font-size: 14px; font-weight: 500; color: #fff; width: 250px; text-transform: uppercase; position: relative; z-index: 1}
.button:after {border: 2px solid #fff; z-index: -1; transition: 250ms; position: absolute; left: 0px; width: 100%; height: 100%; top: 0px; content: ''; transform: skewX(10deg)}
.button:hover:after, .button.active:after {background-color: #fff}
.button:hover, .button.active {color: #16222A}
.button:before {border: 1px solid #fff; z-index: -1; transition: 250ms; opacity: 0.2; position: absolute; left: 10px; width: 100%; height: 100%; top: 10px; content: ''; transform: skewX(10deg)}
.button.active:hover:after {background-color: #ff6900; border-color: #ff6900}
.button.active:hover {color: #fff}

.buttons {text-align: center; font-size: 0px}
.buttons .button + .button {margin-left: 15px}
.link {text-decoration: underline}
.mobile-show {display: none !important}
.tablet-show {display: none !important}
.admin {position: fixed; height: 50px; width: 50px; border-radius: 50%; background: #233a30; left: 50px; bottom: 50px}
.post-edit-link {position: fixed; bottom: 50px; left: 50px; width: 50px; z-index: 1000; height: 50px; border-radius: 50%; font-size: 0px; background: #ff6900 url(images/icon-edit.svg) no-repeat 50% 50%; background-size: 20px}
/* BASIC */


/* MAIN */
main {min-height: calc(100vh - 100px - 100px); padding-bottom: 60px}
body.home-page main {padding-bottom: 0}
.by-3 {display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 40px}
.by-4 {display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 40px}
.by-5 {display: grid; grid-template-columns: repeat(5,1fr); grid-gap: 40px}
/* MAIN */


/* BREAD-CRUMBS */
.breadcrumbs {margin-top: 20px; display: block; font-size: 14px}
.breadcrumbs a, .breadcrumbs .breadcrumb_last, .breadcrumbs .separator {opacity: 0.5}
.breadcrumbs a:hover {opacity: 1}
/* BREAD-CRUMBS */


/* CHANGE-SITE */
.change-site a {padding: 0px 15px; font-weight: 500; line-height: 32px; height: 32px; display: inline-block}
.change-site a.active {background: #fff; color: #233a30}
/* CHANGE-SITE */

/* CONTENT */
.content h2, .content .h2-like, footer .h2-like {font-size: 32px; margin-top: 60px; position: relative; margin-bottom: 20px; text-transform: uppercase}
.content h2 span, .content .h2-like span, footer .h2-like span {color: #fff; padding: 2px 12px 2px 12px; display: inline-block; position: relative; z-index: 10; margin-right: 5px}
.content h2 span:before, .content .h2-like span:before, footer .h2-like span:before {background: #ff6900; left: 0px; top: 0px; right: 0px; bottom: 0px; transform: skewX(10deg); position: absolute; content: ''; z-index: -1}

.content ul + p, .content p + ul, .content p + p, .content ol + p, .content p + ol {margin-top: 15px}
.content ul li {display: block; position: relative; padding-left: 15px}
.content ul li:before {content: ''; width: 5px; height: 5px; background: #ff6900; left: 0px; top: 11px; position: absolute}
.content a {color: #ff6900; text-decoration: underline}
/* CONTENT */

.works-item {margin-top: 60px; padding: 10px}
.works-item .grid {display: grid; grid-template-columns: repeat(6,1fr); gap: 10px}
.works-item .item {display: block; height: calc(100vw/4*3/4); position: relative}
.works-item .item .inner {position: absolute; z-index: 1; left: 0px; top: 0px; width: 100%; height: 100%; background: #233a30aa; color: #fff; display: flex; justify-content: center; align-items: center; text-align: center; flex-wrap: wrap; flex-direction: column; opacity: 0; transition: 250ms; padding: 20px}
.works-item .item h3 {color: #fff}
.works-item .item .inner .date {color: #fff; margin-top: 10px; position: relative; padding: 0px 15px; font-size: 14px; z-index: 10; height: 30px; line-height: 30px}
.works-item .item .inner .date:before {background: #ff6900; height: 30px; transform: skewX(10deg); position: absolute; left: -15px; right: -15px; top: 0px; content: ''; z-index: -1}
.works-item .item:hover .inner {opacity: 1}


/* HEADER */
header {transition: 300ms; font-size: 16px; text-transform: uppercase; font-weight: 500; position: relative; position: sticky; position: -webkit-sticky; top: 0px; height: 90px; z-index: 1000; background: transparent; color: #fff; border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2)}
header .menu {width: 100%}
header .logo a {width: 132px; font-size: 22px; text-align: left; margin: 0px auto; font-weight: 500}

.logo {position: relative; white-space: nowrap}
.logo svg {width: 40px; vertical-align: middle; height: 40px; margin-right: 10px}
.logo .left-part {width: 80px; padding: 0px 5px; color: #fff; letter-spacing: 2px; text-align: center; height: 42px}
.logo .right-part {width: 42px; height: 42px; position: relative; text-align: center; line-height: 42px; letter-spacing: 2px}
.logo .right-part:before {border: 2px solid #fff; width: 42px; height: 42px; transform: skewX(10deg); position: absolute; content: ''; display: block; left: 0px; top: 0px; box-sizing: border-box}


header.fixed {box-shadow: 0px 0px 20px rgba(0,0,0,0.2); background: #233a30}
/* header.fixed {background: #ff6900; color: #233a30} */

.menu-catalog-button {position: relative; line-height: 20px; height: 20px; padding-left: 42px; text-transform: uppercase; font-weight: 500}
.menu-catalog-button span {position: absolute; left: 0px; background: #fff; height: 2px; width: 32px; transition: bottom 250ms ease 250ms, top 250ms ease 250ms, transform 250ms ease 0ms}
.menu-catalog-button span:nth-of-type(1) {top: 0px}
.menu-catalog-button span:nth-of-type(2) {top: 50%; margin-top: -1px}
.menu-catalog-button span:nth-of-type(3) {bottom: 0px}

.menu-catalog-button.active span {background: #fff; transition: bottom 250ms ease 0ms, top 250ms ease 0ms, transform 250ms ease 250ms}
.menu-catalog-button.active span:nth-of-type(1) {top: 50%; margin-top: -1px; transform: rotateZ(-45deg)}
.menu-catalog-button.active span:nth-of-type(2) {opacity: 0}
.menu-catalog-button.active span:nth-of-type(3) {bottom: 50%; margin-bottom: -1px; transform: rotateZ(45deg)}


.menu {display: flex; align-items: center; justify-content: space-between}
.menu li {display: block; width: 180px; text-align: center}
.menu li a {position: relative}
.menu li:not(:nth-of-type(1)) a {display: block; height: 88px; line-height: 88px}
.menu li:nth-of-type(1) {order: 3; width: 360px}
.menu li:nth-of-type(2) {order: 1}
.menu li:nth-of-type(3) {order: 2}
.menu li:nth-of-type(4) {order: 4}
.menu li:nth-of-type(5) {order: 5}
.menu li:hover {color: #ff6900}
.top-line {height: 55px; background: transparent; color: #fff; position: relative; z-index: 2000; font-size: 14px; line-height: 53px; border-bottom: 1px solid transparent}
.top-line.fixed {background: #233a30; color: #fff}
.top-line.fixed .menu-catalog-button span {background: #fff}

.top-line.active {color: #fff; border-color: #fff; background: #233a30}
.top-line .phone {font-weight: 500; font-size: 16px}
/* HEADER */

.modal-services {position: fixed; color: #fff; transition: 400ms; top: -500px; left: 0px; width: 100%; height: 500px; background: #233a30; z-index: 1500; padding-top: 55px; font-size: 20px}
.modal-services .inner {padding-top: 40px}
.modal-services.show {top: 0px; box-shadow: 0px 0px 20px rgba(0,0,0,0.2)}
.modal-services li {display: block; margin-top: 20px}
.modal-services .h2-like span {color: #ff6900}
.modal-services .h2-like span:before {background: #fff}

/* HOME */
.home-page .menu li:not(:nth-of-type(1)) a:before {position: absolute; left: 0px; width: 100%; bottom: 0px; background: #fff; height: 2px; content: ''; opacity: 0; transition: 250ms}
.home-page .menu li:not(:nth-of-type(1)) a:hover:before {opacity: 1}
.home-page header:not(.fixed) .menu li:not(:nth-of-type(1)) a:hover {color: #fff}

.home-perfect {text-align: center; background: #fff; color: #233a30; padding: 60px 0; margin-bottom: 60px}
.home-perfect .grid {grid-template-columns: repeat(6,1fr); gap: 20px; display: grid; margin-bottom: 40px}
.home-perfect .item {line-height: 1.1}
.home-perfect .item svg {width: 30px; height: 30px; display: block; margin: 0 auto 10px auto; color: #233a30bb}
.home-perfect h2 {color: #ff6900}

.home-back {text-align: center; margin-top: -145px}
.home-back .inner {height: 645px; background: linear-gradient(#233a30, #233a30bb); padding-top: 145px; display: flex; flex-direction: column; justify-content: center; color: #fff; position: relative}
.home-back .inner h1 {margin-bottom: 20px; color: #fff; max-width: 800px}
.home-back .inner h2 {margin-bottom: 40px; color: #fff; max-width: 800px}

.home-cars .flex {justify-content: center; gap: 20px}
.home-cars .flex .item {width: 60px; height: 40px; display: flex; align-items: center}

.home-promo {padding: 60px 0px}
.home-promo .inner {position: relative; padding: 40px 60px; color: #fff}
.home-promo .inner h2 {color: #fff}
.home-promo .inner:before {background: #233a30; z-index: -1; position: absolute; left: 0px; width: 100%; height: 100%; top: 0px; content: ''; transform: skewX(10deg)}
.home-promo .inner:after {border: 1px solid #333; z-index: -1; position: absolute; left: 60px; width: 100%; height: 100%; top: 40px; z-index: -2; content: ''; transform: skewX(10deg)}
.home-promo .promo-swiper-pagination {position: absolute; bottom: -30px; width: 100%; text-align: center; left: 0px}
.home-promo .promo-swiper-pagination span {margin: 0px 3px; background: #233a30bb}
.home-about {padding: 60px 0}

.home-services .item {display: block; margin-top: 20px}
.home-services .item .img {height: 300px; position: relative; justify-content: center}
.home-services .item .img img {position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100px; max-width: unset}
.home-services .item .img:before {border: 1px solid #fff; opacity: 0.2; content: ''; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; transform: skewX(10deg); z-index: -1; transition: 250ms}
.home-services .item .text:before {background: #ff6900; content: ''; height: 100%; top: 0px; position: absolute; left: 0px; width: 100%; transform: skewX(10deg); z-index: -1}
.home-services .item:hover .img:before {opacity: 1}
.home-services .item .text {position: relative; height: 60px; font-size: 18px; color: #233a30; z-index: 10; line-height: 60px; padding: 0px 20px; margin-top: -30px; color: #fff}
/* HOME */

.spoiler + .spoiler {margin-top: 10px}
.spoiler-title h3 {color: unset}
.spoiler-title {background: #233a30; position: relative; padding: 10px 20px; margin: 0px; cursor: pointer; color: #fff}
.spoiler:hover .spoiler-title, .spoiler.active .spoiler-title {background: #233a30; color: #fff}
.spoiler td {padding: 5px 20px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd}
.spoiler .text {padding: 20px 0px}
.spoiler table {margin-bottom: 40px}
.spoiler table .nazvanie {width: 75%}
.spoiler table .stoimost {width: 25%; text-align: center}
.spoiler .close {width: 16px; height: 16px; position: absolute; right: 20px; top: 50%; margin-top: -8px; cursor: pointer}
.spoiler .close span {position: absolute; width: 16px; height: 2px; background: #fff; top: 7px; left: 0px; transition: transform 250ms}
.spoiler .close span:nth-of-type(2) {transform: rotateZ(90deg)}
.spoiler.active .close span:nth-of-type(2) {transform: rotateZ(0deg)}
.spoiler.active h3:hover + .close span:nth-of-type(1) {transform: rotateZ(45deg)}
.spoiler.active h3:hover + .close span:nth-of-type(2) {transform: rotateZ(-45deg)}

/* STATIC */
.static-back {margin-bottom: 60px; margin-top: -145px}
.static-back h1 {color: #fff}
.static-back hr {background: #ff6900; height: 3px; width: 50px; border: none; margin: 5px auto}
.static-back h2 {color: #fff; max-width: 800px; font-size: 20px}
.static-back .inner {height: 545px; background: linear-gradient(#233a30, #233a30bb); padding-top: 145px; color: #fff; display: flex; flex-direction: column; justify-content: center; text-align: center}

.static-triggers {background: #233a30; color: #fff; padding: 20px 0px; margin: 60px 0px; font-size: 14px}
.static-triggers .item {max-width: 180px; text-align: center}
.static-triggers .item .img {width: 40px; height: 40px; margin: 0px auto 10px auto}
.static-triggers .item b {display: block; color: #fff}

.static-contacts .item {width: calc(50% - 20px); margin-top: 20px}
/* STATIC */


/* FOOTER */
footer {background: #233a30; color: #fff; font-size: 14px; position: relative}
footer .belka {display: block; width: 90px; height: 23px; filter: contrast(0); transition: 300ms}
footer .belka:hover {filter: contrast(1)}
footer .copyright {opacity: 0.5; font-size: 12px}
footer .copyright a {text-decoration: underline}

footer .right-part {width: calc(50% - 20px); position: relative}
footer .right-part iframe {height: 100% !important; width: 50vw}
/* footer .right-part ymaps {height: 100% !important} */

footer .left-part .grid {display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 20px}
footer .left-part {padding: 40px 0px; width: calc(50% - 20px)}
footer .left-part .max {position: relative}
footer .left-part .h2-like {color: #fff; margin-top: 0px; margin-bottom: 40px}
footer .left-part .item b {color: #fff; margin-top: 0px}
footer .left-part .phone {font-size: 18px}
footer .left-part .item p {opacity: 0.7}
footer .left-part hr {margin: 20px 0px; opacity: 0.3; background: #fff; border: none; height: 1px}

footer .left-part a {color: #fff; text-decoration: none}
footer .left-part .social {margin: 20px 0px}
footer .left-part .social a {width: 25px; height: 25px; margin-top: 10px; display: inline-block; margin-right: 15px}
/* FOOTER */

.overlay {background: #233a30aa; display: none; z-index: 8000; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%}
.modal {background: #fff; color: #233a30; width: 600px; padding: 40px; z-index: 9000; position: fixed; right: -600px; transition: 400ms; top: 0px; height: 100%}
.modal.show {right: 0px; box-shadow: 0px 0px 20px rgba(0,0,0,0.2)}
.modal .button {margin-top: 60px}
.modal .button:hover {color: #fff}
.modal .button:after {background: #ff6900; border-color: #ff6900}
.modal .button:before {border-color: rgba(0,0,0,0.1); opacity: 1}
.modal .button:hover:before {border-color: #ff6900}
.wpcf7-form-control-wrap {display: block}
.modal label {position: relative}
.wpcf7-not-valid-tip {font-size: 14px; position: absolute; white-space: nowrap; bottom: 10px; right: 0px}

@media screen and (max-width:1023px) {
.tablet-show {display: block}
.tablet-hide {display: none !important}
body {font-size: 15px}
h1 {font-size: 22px}
.content h2, .static-back h2, .content .h2-like, footer .h2-like {font-size: 20px; font-weight: 400}
h3 {font-size: inherit}
.spoiler-title {padding: 5px 36px 5px 10px}
.spoiler .close {right: 10px}
}

@media screen and (max-width:767px) {
body {font-size: 14px}
.top-line .phone {font-size: 0px; width: 20px; height: 20px; padding: 5px; border: 1px solid #fff; border-radius: 50%}
.menu-catalog-button {height: 16px; line-height: 16px; padding-left: 25px; margin-right: 10px}
.menu-catalog-button span {width: 20px}
.mobile-show {display: block !important}
.mobile-hide, ymaps {display: none !important}
.buttons .button + .button {margin-left: 0px; margin-top: 20px}
.works-item {margin-top: 40px}
.works-item .grid {display: grid; grid-template-columns: repeat(2,1fr)}
.works-item .item {display: block; height: calc(50vw/4*3)}

.logo .left-part {width: 60px; height: 32px}
.cube {width: 60px; height: 32px; line-height: 32px; transform-origin: 0 16px}
.cube > div:before {border-width: 1px}
.cube > div {padding-left: 5px}
.logo .right-part {width: 32px; height: 32px; line-height: 32px; margin-left: 5px}
.logo .right-part:before {width: 32px; height: 32px}
.logo {font-size: 18px}
.modal {width: 100%; right: -100%; padding: 15px}
.home-about {padding-top: 0}
.home-about .left-part {width: 100%}
footer .left-part {height: unset; width: 100%; padding: 40px 0px 20px 0}
footer .left-part .max {padding: 0px}
footer .left-part .inner {position: static; width: 100%; padding: 40px 20px; height: unset}
footer .phone {display: block; text-align: center}
footer .left-part .grid {grid-template-columns: 100%}
footer .left-part .social {text-align: center}
footer .right-part {width: 100%}
footer .right-part iframe {width: calc(100% + 40px); margin: 0 -20px}
.top-line {position: fixed; top: 0px; left: 0px; width: 100%}
.button {height: 40px; line-height: 36px}
.static-triggers .item {max-width: 75px; font-size: 11px}
.static-triggers .item .img {width: 30px; height: 30px}
.spoiler td {padding: 5px 0px}
.spoiler table .stoimost {text-align: right; white-space: nowrap}
.static-triggers {margin: 40px 0px}

.by-4 {grid-template-columns: repeat(2,1fr); grid-gap: 30px}
.home-services .item .img {height: 120px}
.home-services .item .text {height: 40px; line-height: 40px; font-size: 13px; margin-top: -20px; padding: 0px 10px}
.home-services .item .img img {width: 60px}
.home-promo .inner {padding: 20px}
.home-promo .inner:after {top: 10px; left: 10px}

.static-contacts .item {width: 100%}
iframe {height: 200px !important}
.change-site {margin-top: 40px}
.home-perfect .grid {grid-template-columns: repeat(2,1fr)}
.home-perfect .item svg {width: 20px; height: 20px}
.home-back {margin-top: 0}
.home-back .inner {height: unset; padding: 120px 0 60px 0}
}