@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; background: #fff; color: #333; font-size: 17px; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; overflow-x: hidden}
body.lock {overflow: hidden}
a {color: inherit; text-decoration: none; outline: none; cursor: pointer}
h1, h2, h3, .h2-like {width: 100%; font-weight: 500; color: #000}
h1 {font-size: 32px; text-transform: uppercase}
h3 {font-size: 17px}
b, strong, th {font-weight: 500; color: #000}
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: #000}
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], input[type=search] {display: block; width: 100%; font-size: 15px; border:1px solid #ddddde; padding: 0px 15px; background: #fafafa; border-radius: 0px; line-height: 58px; height: 60px}
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, input[type=search]:focus {border-color: #333334; box-shadow: inset 0 0 0 2px #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 */
.cities .whatsapp{width: 20px;height: 20px;}
.cta {background: #ffc600; padding: 40px; margin-bottom: 40px}
.cta input[type=text], .cta input[type=tel], .cta textarea {border: 1px solid #000; background: transparent}
.cta-grid {grid-template-columns: repeat(4,1fr); gap: 20px; display: grid; margin-top: 20px}
.cta .button {background: #000; color: #ffc600}
.cta .wpcf7-spinner {position: absolute}
.cta .wpcf7-form-control-wrap {margin: 0}
/* 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 15px; 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, button, input[type="submit"] {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: 15px; font-weight: 500; color: #fff; width: 250px; position: relative; z-index: 1}
.button:after {border: 2px solid #ffc600; 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: #ffc600}
.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)}

select {display: block; width: 100%; font-size: 15px; border:1px solid #ddddde; padding: 0px 45px 0 15px; line-height: 58px; height: 60px; background: #fafafa url("data:image/svg+xml,<svg viewBox='11.4 7.1' width='11.4' height='7.1' xmlns='http://www.w3.org/2000/svg'><path d='M5,6.4l-5-5L1.4,0l4.3,4.3L10,0l1.4,1.4l-5,5L5.7,7.1L5,6.4z'/></svg>") no-repeat; background-position: right 15px center; box-shadow: none !important; cursor: pointer; transition: 250ms}
select:hover {border-color: #333334; box-shadow: inset 0 0 0 2px #333334}

.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: #000; 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: #ffc600 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:not(.home) main {padding-top: 60px}
.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: #333}
/* CHANGE-SITE */

/* CONTENT */
.content h2, .content .h2-like, footer .bottom-part .h2-like {font-size: 32px; margin-top: 40px; position: relative; margin-bottom: 20px; text-transform: uppercase}
.content h2 span, .content .h2-like span, footer .bottom-part .h2-like span {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 .bottom-part .h2-like span:before {background: #ffc600; 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: ''; background: #ffc600; width: 6px; height: 6px; position: absolute; top: 12px; left: 0; border-radius: 0 50%}
.content a {color: #ffc600; text-decoration: underline}
/* CONTENT */

.works-item {margin-top: 60px}
.works-item .grid {display: grid; grid-template-columns: repeat(4,1fr)}
.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: #333aa; 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: #ffc600; 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; color: #16222A; background: #fff}
header .menu {width: 100%}
header .logo a {width: 260px; font-size: 22px; text-align: left; margin: 0px auto; font-weight: 500}

header.yellow .cube > div:before {background: #333}
header.yellow .cube > div {color: #ffc600}
header.yellow .logo .right-part:before {border-color: #333}

body.home header {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.yellow {background: #ffc600 !important; color: unset !important; border-bottom-color: transparent !important}

.home .top-line {background: transparent}
.top-line.yellow {background: #fff; color: #333}
.top-line.yellow .menu-catalog-button span {background: #000}

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

.top-line {height: 55px; background: #333; color: #fff; position: relative; z-index: 2000; font-size: 14px; line-height: 53px; border-bottom: 1px solid transparent}
.top-line.active {border-color: #333; background: #ffc600}
.top-line .phone {font-weight: 500; font-size: 16px}
.top-line .cities {gap: 40px; line-height: 1;}
.flex.align-center{align-items: center;gap: 10px;}
.cities-icon .whatsapp{width: 16px;height: 16px;display: inline-block;}
.top-line .cities b {color: inherit; margin-right: 10px; opacity: 0.5; display: block; margin-bottom: 5px; font-size: 11px}
.top-line .city:hover {color: #ffc600}
.top-line.active .city {color: #333} 
.top-line.active .promo, .top-line.yellow .promo {color: #333; border-color: #333}

.logo .wrap {perspective: 400px; perspective-origin: 100% 50%; margin-top: 0px}
.logo .cube {position: relative; height: 42px; line-height: 42px; width: 100%; transform-style: preserve-3d; transform-origin: 0 21px; animation: rotate 6s infinite linear}
.logo .cube > div {position: absolute; box-sizing: border-box; height: 100%; width: 100%; color: #333; backface-visibility: hidden}
.logo .cube > div:before {content: ''; position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; background: #fff; transform: skewX(10deg); z-index: -1}
.logo .front {transform: translateZ(2px)}
.logo .back {transform: translateZ(-2px) rotateX(180deg)}
.logo .top {transform: rotateX(-270deg) translateY(-21px); transform-origin: top center}
.logo .bottom {transform: rotateX(270deg) translateY(21px); transform-origin: bottom center}

@keyframes rotate {
	from {transform: rotateX(0deg)}
	to {transform: rotateX(360deg)}
}



.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 {color: #333}
.menu-catalog-button.active span {background: #333; 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: flex; height: 88px; align-items: center; justify-content: center}
.menu li:nth-of-type(1) {order: 3; width: 280px}
.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: #ffc600} */
header.yellow .menu li:hover {color: #333}

/* HEADER */

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


/* BREAD-CRUMBS */
.bread-crumbs {margin-bottom: 40px; font-weight: 400; display: block; font-size: 13px; text-transform: lowercase; color: #6F7F89}
.bread-crumbs a:hover, .bread-crumbs .breadcrumb_last {opacity: 1; color: #000}
/* BREAD-CRUMBS */


/* SEARCH */
.search-block ul {display: flex; gap: 20px; flex-wrap: wrap}
.search-block ul li:first-of-type {flex-grow: 1}

.search-block {margin-top: 20px; position: relative; margin-bottom: 20px}
.search-block input[type=text] {padding-left: 50px}
.search-block svg {position: absolute; padding: 15px; width: 50px; height: 58px; left: 1px; top: 1px; color: #000; background: transparent; border: none; cursor: pointer}
.search-block input[type=submit] {background: #333; color: #fff}
/* SEARCH */


/* WORKS */
.works .grid {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 40px}
.works .item .img {display: block; border-radius: 3px; height: 0; padding-bottom: 60%; position: relative; margin-bottom: 10px}
.works .item .img:after {position: absolute; border-radius: 3px; z-index: 1; content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.03); left: 0; top: 0; pointer-events: none}
.works .item h3 {font-size: 14px; color: #1068b4}
.works .item:hover h3 {color: #e61628}
/* WORKS */

/* CATALOG */
.catalog .grid {grid-template-columns: repeat(4, 1fr); display: grid; grid-gap: 40px}
.catalog-item .top-part {position: relative; height: 0; padding-bottom: 100%; background: #fff}
.catalog-item .top-part:after {position: absolute; z-index: 1; content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.03); left: 0; top: 0; pointer-events: none; border-radius: 3px 3px 0px 0px}
.catalog-item .img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%}
.catalog-item img {width: 100%; height: 100%; object-fit: cover; display: block}
.catalog-item .title {display: block; color: #0f0f0f; font-size: 18px; line-height: 1.3; margin: 5px 0}
.catalog-item .price {font-weight: 500; line-height: 1; color: #000}
.catalog-item .price-with {font-size: 14px; opacity: 0.7; margin-top: 5px}
.catalog-item:hover .title {color: #ffc600}
.catalog-item:hover .top-part:after {background: rgba(0, 0, 0, 0.1)}
.catalog-item .stickers {position: absolute; text-transform: lowercase; transform-origin: left top; left: 0; top: 20px; z-index: 2; display: flex; transform: rotateZ(-90deg) translateX(-100%); pointer-events: none}
.catalog-item .stickers span {position: relative; color: #fff; padding: 0px 10px; font-size: 12px; font-weight: 500}
.catalog-item .stickers span + span {margin-left: 10px}
.catalog-item .stickers span.new {background: #1068b4}
.catalog-item .stickers span.hit {background: #e61628}
.by-4-slider .swiper-button-prev, .by-4-slider .swiper-button-next {top: 13px; width: 17px; height: 17px; margin: 0px; color: #0f0f0f}
.by-4-slider .swiper-button-prev {transform: rotateZ(-180deg); left: unset; right: 37px}
.by-4-slider .swiper-button-next.swiper-button-disabled, .by-4-slider .swiper-button-prev.swiper-button-disabled {opacity: 0.1}
/* CATALOG */

.desc {margin-top: 60px}
.promo {font-weight: 500; font-size: 14px; line-height: 1; padding: 10px 20px; border: 1px dashed #fff; color: #fff; margin-left: 30px}


/* SINGLE CATALOG */
.single-catalog .left-part {width: 500px; position: relative}
.single-catalog .left-part .swiper-slide {height: 0; padding-bottom: 100%; position: relative}
.single-catalog .left-part .swiper-slide img {object-fit: contain; object-position: 50% 50%; position: absolute; z-index: 1; top: 0px; left: 0px; width: 100%; height: 100%; background: #fff}
.single-catalog .left-part .swiper-slide:after {position: absolute; content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.03); left: 0; top: 0; z-index: 2; pointer-events: none}
.single-catalog .right-part {width: calc(100% - 540px)}
.single-catalog .right-part h1 {line-height: 1.2}
.single-catalog .stickers {position: absolute; left: 20px; top: 20px; z-index: 10} 
.single-catalog .stickers span {position: relative; margin-right: 5px; color: #fff; padding: 2px 10px; font-size: 12px; font-weight: 500}
.single-catalog .available {color: #32CD32; display: block; font-size: 14px; font-weight: 500; position: relative; padding-left: 12px}
.single-catalog .available:before {background: #32CD32; content: ''; width: 4px; height: 4px; border-radius: 50%; top: 8px; left: 0; position: absolute}
.single-catalog .stickers span.new {background: #0f0f0f}
.single-catalog .stickers span.hit {background: #ffc600}
.single-catalog .right-part .price {font-size: 26px; line-height: 1; color: #000; margin-top: 20px}
.single-catalog .right-part .price-with {margin-top: 10px; opacity: 0.7}
.single-catalog .right-part .tab {font-size: 14px}
.single-catalog .line .name {color: #6F7F89; white-space: nowrap; margin-right: 5px}
.single-catalog .line .value {text-align: right; margin-left: 5px; color: #6F7F89}
.single-catalog .line .separator {background: linear-gradient(90deg,#7f7f7f 0,#7f7f7f 25%,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,0)); flex-grow: 1; background-position: 0 bottom; background-size: 4px 1px; background-repeat: repeat-x}
.single-catalog .line a.name {text-decoration: underline; color: #e61628}
.single-catalog .left-part .swiper-pagination-bullet-active {background: #333}
.single-catalog .left-part .swiper-button-prev, .single-catalog .left-part .swiper-button-next {top: unset; bottom: 14px; width: 17px; height: 17px; margin: 0px; color: #333}
.single-catalog .left-part .swiper-button-prev {transform: rotateZ(-180deg); left: unset; right: 50px}
.single-catalog .left-part .swiper-button-next {right: 20px}
.single-catalog .left-part .swiper-button-prev:hover, .single-catalog .left-part .swiper-button-next:hover {color: #0f0f0f}
.single-catalog .swiper-button-next.swiper-button-disabled, .single-catalog .swiper-button-prev.swiper-button-disabled {opacity: 0.1}
.single-catalog .buttons .TINKOFF_BTN_YELLOW {background: #ffc600; font-size: 15px; height: 50px; padding: 0 15px; margin-left: 20px; color: #0f0f0f; line-height: 50px; border: none; width: 250px; margin-top: 40px; border-radius: 0}
.single-catalog .buttons .addToCart {background: #333; height: 50px; padding: 0 15px; color: #fff; line-height: 50px; width: 250px; margin-top: 40px; font-size: 15px; cursor: pointer}
.related {width: 100%}
.related .grid {grid-template-columns: repeat(4, 1fr); display: grid; grid-gap: 40px}
/* SINGLE CATALOG*/


/* SINGLE WORK*/
.single-work .back:before {position: absolute; z-index: 1; width: 100%; height: 100%; background: rgba(0, 95, 168, 0.3); top: 0; left: 0; content: ''}
.single-work .left-part {width: 500px}
.single-work .left-part .swiper-container {padding-bottom: 30px}
.single-work .left-part .swiper-slide {height: 0; padding-bottom: 100%; position: relative}
.single-work .left-part .swiper-slide img {position: absolute; z-index: 1; top: 0px; left: 0px; width: 100%; height: 100%; background: #fff; object-fit: cover}
.single-work .left-part .swiper-slide:after {position: absolute; content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.03); left: 0; top: 0; z-index: 2; pointer-events: none}
.single-work .right-part {width: calc(100% - 540px)}
.single-work .right-part .price-section {font-size: 11px; line-height: 1; color: #6F7F89}
.single-work .right-part .price-section b {font-size: 22px; color: #0f0f0f; display: block; margin-top: 5px}
.single-work .left-part .swiper-pagination {bottom: 2px; line-height: 1}
.single-work .left-part .swiper-pagination-bullet-active {background: #ffc600}
.single-work .left-part .swiper-button-prev, .single-work .left-part .swiper-button-next {top: unset; bottom: 0px; width: 17px; height: 17px; margin: 0px; color: #e61628}
.single-work .left-part .swiper-button-prev {transform: rotateZ(-180deg); left: unset; right: 30px}
.single-work .left-part .swiper-button-next {right: 0px}
.single-work .left-part .swiper-button-prev:hover, .single-work .left-part .swiper-button-next:hover {color: #0f0f0f}
.single-work .right-part .catalog-section, .static .catalog-section {margin-top: 40px}
.single-work .right-part .catalog-section .grid {grid-template-columns: repeat(3, 1fr); grid-gap: 40px; display: grid}
.static .catalog-section .grid {grid-template-columns: repeat(4, 1fr); grid-gap: 40px; display: grid}
/* SINGLE WORK*/


/* TABS */
.tab:not(.active) {display: none}
.tab-links {border-bottom: 1px solid #eaeef2; font-size: 15px; margin-bottom: 40px; margin-top: 40px}
.tab-links .tab-link {cursor: pointer; position: relative; display: inline-block; line-height: 40px; height: 40px}
.tab-links .tab-link + .tab-link {margin-left: 20px}
.tab-links .tab-link.active, .tab-links .tab-link:hover {color: #000}
.tab-links .tab-link:before {content: ''; left: 0px; bottom: -1px; background: transparent; height: 2px; width: 100%; position: absolute}
.tab-links .tab-link.active:before {background: #000}
/* TABS */


/* TAGS */
.tags {margin: 40px 0px; font-size: 13px}
.tags a {padding: 0px 15px; margin: 5px 5px 5px 0; border: 1px; position: relative; line-height: 30px; height: 30px; background: #eaeef2}
.tags a.active {background: #000; color: #fff}
/* TAGS */


/* PAGINATION */
.pagination {text-align: center; display: block; margin-top: 40px; width: 100%; grid-column: span 4}
.pagination .screen-reader-text, .pagination .prev, .pagination .next {display: none}
.pagination a, .pagination span {margin: 0px 5px; width: 40px; font-size: 14px; text-align: center; color: #000; line-height: 30px; height: 30px; background: transparent; display: inline-block; border-radius: 2px}
.pagination span.current {background: #ffc600}
.pagination a:hover {text-decoration: underline}
/* PAGINATION */


/* HOME */



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

header.yellow .menu li:not(:nth-of-type(1)) a:before, header.yellow .menu li.current-menu-item a:before {height: 4px; background: #333}


.home-back {text-align: center; margin-top: -145px}
.home-back .inner {height: 645px; background: #333333bb; padding-top: 145px; display: flex; flex-direction: column; justify-content: center; color: #fff; position: relative}
.home-back .inner h1 {margin-bottom: 80px; color: #fff; max-width: 800px}

.home-cars .grid-1 {display: flex; gap: 20px; margin-bottom: 20px}
.home-cars .grid-1 .img {width: 64px; height: 64px}
.home-cars .grid-2 {display: grid; gap: 10px; grid-template-columns: repeat(8, 1fr)}
.home-cars .grid-2 .item {background: #fff; color: #000; border: 1px solid #dadada; padding: 10px; text-decoration: none}
.home-cars .grid-2 .item:hover {background: #ffc600; border-color: #ffc600}

.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: #333; z-index: -1; position: absolute; left: 0px; width: 100%; height: 100%; top: 0px; content: ''; transform: skewX(10deg)}
.home-promo .inner:after {border: 1px solid #dadada; 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: #333333bb}
.home-about {padding-top: 60px}

.home-services {margin: 20px 0px 80px 0}
.home-services .item {display: block; margin-top: 40px}
.home-services .item .img {height: 200px; position: relative; justify-content: center}
.home-services .item .img img {position: absolute; left: -35px; object-fit: contain; right: 0; bottom: 10px; margin: auto; width: 100%; max-width: unset; height: 300px; max-height: unset; object-position: 50% 100%}
.home-services .item .img:before {border: 1px solid #dadada; content: ''; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; transform: skewX(10deg); z-index: -1}
.home-services .item .text:before {background: #ffc600; content: ''; height: 100%; top: 0px; position: absolute; left: 0px; width: 100%; transform: skewX(10deg); z-index: -1}
.home-services .item .text {position: relative; height: 60px; font-size: 18px; z-index: 10; line-height: 60px; padding: 0px 20px; margin-top: -30px}
.home-services .item:hover {color: #fff}
.home-services .item:hover .img:before {border-color: #000; background: #ffc600}
.home-services .item:hover .text:before {background: #000}
.home-desc {margin: 80px 0px}
.home-catalog {margin: 80px 0px}

.home-brands .grid {display: flex; flex-wrap: wrap; gap: 20px}
.home-brands .item {background: #fff; color: #000; border: 1px solid #dadada; padding: 10px; text-decoration: none}
.home-brands .item:hover {background: #ffc600; border-color: #ffc600}
/* HOME */

.spoiler + .spoiler {margin-top: 10px}
.spoiler-title h3 {color: unset}
.spoiler-title {background: #eeeeee; position: relative; padding: 10px 20px; margin: 0px; cursor: pointer; color: #000}
.spoiler:hover .spoiler-title, .spoiler.active .spoiler-title {background: #333aa; color: #fff}
.spoiler td {padding: 5px 20px; border-top: 1px solid #dadada; border-bottom: 1px solid #dadada}
.spoiler .text {padding: 20px 0px}
.spoiler table {margin-bottom: 40px}
.spoiler table .nazvanie {width: 75%}
.spoiler table .stoimost {width: 25%; text-align: center}
.spoiler-body {display: none}
.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: #000; 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)}
.spoiler.active .close span, .spoiler:hover .close span {background: #fff}

/* STATIC */
.static-back {margin-bottom: 60px}
.static-back h1 {color: #fff}
.static-back hr {background: #ffc600; height: 3px; width: 50px; border: none; margin: 5px auto}
.static-back h2 {color: #fff; max-width: 800px; font-size: 20px}
.static-back .inner {height: 400px; background: #333aa; color: #fff; display: flex; flex-direction: column; justify-content: center; text-align: center}

.static-triggers {background: #333; 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 .top-part {background: #ffc600; color: #000; padding: 20px 0}
footer .top-part a {margin-left: 20px; font-weight: 500; border-bottom: 1px solid #000; padding-bottom: 2px}
footer .bottom-part {background: #333; color: #fff; font-size: 14px; position: relative; padding: 60px 0}
footer .bottom-part .belka {display: block; width: 30px; height: 14px; filter: contrast(0); transition: 300ms}
footer .bottom-part .belka:hover {filter: contrast(1)}
footer .bottom-part .copyright {opacity: 0.5; font-size: 12px}
footer .bottom-part .copyright a {text-decoration: underline}

footer .bottom-part .h2-like {color: #fff; margin-top: 0px; margin-bottom: 40px}
footer .bottom-part .h2-like span {color: #333}

footer .bottom-part .grid {grid-template-columns: repeat(5,auto); gap: 60px; display: grid; margin-bottom: 40px}
footer .bottom-part a {color: #fff; text-decoration: none}
footer .bottom-part .social a {width: 22px; height: 22px; margin-top: 10px; display: inline-block; margin-right: 15px}
footer .bottom-part .title {display: block; font-size: 18px; color: #ffc600; margin-bottom: 20px; font-weight: 400}
footer .bottom-part b {color: inherit; margin-top: 10px; display: block}
footer .bottom-part ul li {display: block; padding-left: 15px; position: relative}
footer .bottom-part ul li:before {content: ''; background: #ffc600; width: 6px; height: 6px; position: absolute; top: 8px; left: 0; border-radius: 0 50%}
/* FOOTER */

.overlay {background: #333aa; display: none; z-index: 8000; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%}
.modal {background: #fff; 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)}
.wpcf7-form-control-wrap {display: block; margin-top: 20px}
.modal .button {margin-top: 60px; background: #ffc600; color: #333}
.modal .button:hover {color: #fff; background: #333}
.modal .button:after {background: #ffc600; border-color: #ffc600}
.modal .button:before {border-color: rgba(0,0,0,0.1); opacity: 1}
.modal .button:hover:before {border-color: #ffc600}
.wpcf7-form-control-wrap {display: block}
.modal label {position: relative}
.modal ul li + li {margin-top: 10px}
.modal ul li a {color: inherit}
.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}
footer .bottom-part .title {font-size: 16px}
.catalog .grid {grid-template-columns: repeat(3,1fr); gap: 30px}
.tablet-hide {display: none !important}
body {font-size: 15px}
h1 {font-size: 22px}
.content h2, .static-back h2, .content .h2-like, footer .bottom-part .h2-like {font-size: 20px; font-weight: 400}
h3 {font-size: inherit}
.spoiler-title {padding: 5px 36px 5px 10px}
.spoiler .close {right: 10px}
.home-cars .grid-2 {grid-template-columns: repeat(6, 1fr)}
.menu li {width: 120px}
header {font-size: 14px}
.modal-services {font-size: inherit}
}

@media screen and (max-width:767px) {
body {font-size: 14px}
.top-line.yellow, .top-line.active {background: #ffc600; color: #333}
.top-line .cities {position: absolute; display: none; top: 60px; left: 0; width: 100%; z-index: 1000}
.home-cars .grid-2 {grid-template-columns: repeat(3,1fr)}
.home-cars .grid-2 .item {padding: 5px 10px}
.catalog .grid {grid-template-columns: repeat(2,1fr); column-gap: 15px; row-gap: 30px}
.top-line .phone {font-size: 14px}
.menu-catalog-button {height: 16px; line-height: 16px; padding-left: 25px}
.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 {display: grid; grid-template-columns: repeat(2,1fr); margin-top: 40px}
.works-item .item {display: block; height: calc(50vw/4*3)}

.logo .left-part {width: 90px; 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: 90px; height: 32px; line-height: 32px}
.logo .right-part:before {width: 90px; height: 32px}
.yellow .logo .cube > div:before, .top-line.active .logo .cube > div:before {background: #333}
.yellow .logo .cube > div, .top-line.active .logo .cube > div {color: #ffc600}
.yellow .logo .right-part:before, .top-line.active .logo .right-part:before {border-color: #333}
.logo .cube {height: 32px; line-height: 32px; transform-origin: 0 16px}

.modal {width: 100%; right: -100%; padding: 15px}
.home-about {padding-top: 40px}
.home-about .left-part {width: 100%}
footer .bottom-part .left-part {height: unset; width: 100%}
footer .bottom-part .left-part .max {padding: 0px}
footer .bottom-part .left-part .inner {position: static; width: 100%; padding: 40px 20px; height: unset}
footer .bottom-part .phone {display: block; text-align: center}
footer .bottom-part .left-part .grid {grid-template-columns: 100%}
footer .bottom-part .left-part .social {text-align: center}
footer .bottom-part .right-part {width: 100%}
footer .bottom-part .right-part iframe {width: 100%}
.top-line {position: fixed; top: 0px; left: 0px; width: 100%}
.button, button, input[type="submit"] {height: 50px; line-height: 48px; width: 100%}
.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: 30px; line-height: 30px; font-size: 12px; margin-top: -15px; padding: 0px 5px}
.home-services .item .img img {height: 200px; left: -30px}
.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}
.single-catalog .left-part {width: 100%}
.single-catalog .right-part {width: 100%}
footer .bottom-part .grid {grid-template-columns: 100%}
.cities-icon {height: 16px}
.cities-icon svg {display: inline-block; width: 16px}
.home-cars .grid-1 {flex-wrap: wrap}
.home-cars .grid-1 .img {height: 40px; width: 40px}
.city {margin-top: 20px}
.modal-services .inner {padding-top: 0}
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=search] {height: 50px; font-size: 14px; line-height: 48px}
.search-block svg {height: 48px; width: 40px; padding: 12px}
.search-block input[type=text] {padding-left: 40px}
body:not(.home) main {padding-top: 80px}
.catalog-item .title {font-size: inherit}
.single-catalog .buttons .addToCart {width: 100%}
.single-catalog .buttons .TINKOFF_BTN_YELLOW {width: 100%; margin: 15px 0 30px 0}
.search-block ul li {width: 100%}
select {height: 50px; line-height: 48px}
.cta-grid {grid-template-columns: 100%}

}