*, *::before,* ::after {margin: 0;padding: 0;box-sizing: border-box;}
 :where(ul, ol):where([class]) {padding-left: 0;}
 body, :where(blockquote, figure):where([class]) {margin: 0;}
 :where( h1,h2, h3, h4, h5, h6, p, ul, ol, dl):where([class]) {margin-block: 0;}
 :where(dd[class]) { margin-left: 0;}
 :where(fieldset[class]) { margin-left: 0; padding: 0;border: none;}
 :where(ul[class]) {list-style: none;}
 p {--paragraphMarginBottom: 24px; margin-block: 0;}
 p:where(:not([class]):not(:last-child)) {margin-bottom: var(--paragraphMarginBottom);}
 img {display: block;max-width: 100%;}
 input,textarea,select,button {font: inherit;}
 html {height: 100%;}
 html, :has(:target) {scroll-behavior: smooth;}
 body {min-height: 100%;line-height: 1.5;}
 svg *[fill] { fill: currentColor }
 svg *[stroke] { stroke: currentColor }
 svg * {transition-property: fill, stroke;}
 article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
html {height: 100%; overflow-x: hidden;}
body {font-size: 16px; font-family: "Inter", sans-serif;}
:root {
    --dark-side:#1C1F33;
	--txt-color: #1c1f33; 
	--red-color: #EF3124;
	--blue-color: #66c4f1;
	--white-color: #ffffff;
	--gray-color: #EEEFF4;
	--gray2-color:#babbc1;
}


a, .cart_name {transition: 0.5s;}
a {text-decoration: none; }
a:hover {color:var(--blue-color);}
ul li {list-style-type: none;}
p {margin-bottom: 1rem; line-height: 1.8;}
code {background: var(--gray-color); color: var(--txt-color); padding: 0.2em; border-radius: 2px;}
.nomobil {display: block;}
.nodesk {display: none;}
/*.left {text-align: left;}
.right {text-align: right;}
.center {text-align: center;}
.justify {text-align: justify;} */
main {min-height: 100vh; padding-top: 100px;}


.wr {width:96%; max-width:1480px; margin: 0 auto; box-sizing: border-box;}
.wrb {max-width:760px; overflow: hidden; margin: 0 auto; box-sizing: border-box;}
.two {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 15px;}
.three {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 15px;}
.four {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 15px;}
.five {display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 15px;}
.six  {display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 15px;}
.eight  {display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 15px;}
.nine {display: grid; grid-template-columns: repeat(9, 1fr); grid-gap: 15px;}
.ten {display: grid; grid-template-columns: repeat(10, 1fr); grid-gap: 15px;}
.twelve {display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 15px;}


/*Flex*/
.flex_line, .flex_col, .flex_center, .flex_normal  {display: flex; flex-wrap: nowrap;}
.flex_line {flex-direction: row; justify-content: space-between; align-items: center;}
.flex_col {flex-direction: column; justify-content: start; align-items: start;}
.flex_center {flex-direction: column; justify-content: center; align-items: center; height:100%;}
.flex_normal {flex-direction: row; justify-content: space-between; align-items: start;}
.left {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: start; align-items: start;}
.right {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: end; align-items: end;}
.center {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center;}

/*Scroll*/
.x-scroll {overflow-y: hidden; overflow-x: auto;  white-space: nowrap;}
.x-scroll::-webkit-scrollbar {width: 0;}

section {padding: 3rem 0;}
section h2 {text-align: center; font-size: 2rem; font-weight: 700; margin-bottom: 2rem;}
.gray {background: var(--gray-color);}
.micro {display: none;}
.btn {display: inline-flex; vertical-align: middle; text-decoration: none; white-space: nowrap; padding: 0.5rem 1.5rem; border:none; outline: none; cursor: pointer; border-radius: .3rem; transition: .5s; background: var(--blue-color); color:var(--white-color);text-align: center;white-space: nowrap; vertical-align: middle; user-select: none;}
.btn:hover {border:none; outline: none; background: var(--blue-color); color:var(--white-color); opacity: 0.85;}
.btn-block {display: block; width:100%;}
.btn:disabled, .disabled {pointer-events: none; cursor: default; background: var(--gray2-color); color: var(--txt-color);}

header {background:var(--white-color); position: fixed; top: 0;width: 100%;box-sizing: border-box;z-index: 100;border-bottom:1px solid var(--gray2-color);}
header .wr {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; padding: 1em 0;}
header .logo {font-size: 2em; font-weight: 700;}
header nav {display: flex;  align-items: center;}
header nav ul {display: flex; flex-direction: row; flex-wrap: nowrap;  align-items: center;}
header nav ul li {padding:  0 1em;}
header nav ul li a {display: block; color:var(--dark-side);}

table{border-collapse:collapse;border-spacing:0;width:100%;clear:both;margin:1.2em 0;padding:5px;overflow-x:auto;}
tbody{background:transparent;border:1px solid var(--gray2-color);}
table p {margin: 0; padding: 0;}
table ul li {margin-left: 12px;}
td,th{border:1px solid var(--gray2-color);padding:0.4em;text-align:left;word-wrap:break-word;}
th{border:1px solid var(--gray2-color); color:var(--txt-color); background: var(--gray-color); text-align: center;}


.breadcrumbs {display: block; clear: both; height: 1.2rem; margin: 1rem 0; color: var(--gray2-color); font-size: 0.9em; overflow:hidden;}
.breadcrumbs a {transition: .5s; text-decoration: none;}
.breadcrumbs ol {overflow-x: auto;white-space: nowrap; -webkit-overflow-scrolling: touch; }
.breadcrumbs ol li {float: left; list-style-type: none; }
.breadcrumbs ol li::after {display: inline-block; content: '\203A'; margin: 0 .5rem;}
.breadcrumbs ol li:last-child::after {display:none;}

.inner {position: absolute; top:0; left:0; right:0; bottom:0; display: flex; flex-direction: column; gap: 1rem; justify-content: center; align-items: center; z-index: 2;}

aside {flex-basis: 22%; background-color: var(--gray-color);padding: 80px 18px;top: 50px; box-sizing: border-box;}
aside ul li {list-style-type: none; border-bottom:1px solid var(--gray2-color);}
aside ul li ul {padding-left: 0.4em;}
aside ul li ul li:last-child {border-bottom: none;}
aside ul li a {text-decoration: none; color:var(--txt-color); padding:0.5em 0; display: block;}
aside ul li a:hover {color:var(--red-color);}

.container {position: relative; overflow:hidden; width:100%;} /*Переименовать*/
.carousel {position: relative; width: 400%; height: 600px; overflow: hidden;}
.carousel-inner {display: flex; transition: transform 0.5s ease;}
.carousel-slide {flex-basis: 100%;}
input[type="radio"] {display:none; }
.controls {position: absolute; left: 50%; bottom:50px; z-index: 10; height: 30px; display: flex; flex-direction: row; flex-wrap: nowrap; transform: translateX(-50%);}
.controls label {cursor: pointer; height:16px; width:16px; border-radius: 16px; background: #fff; opacity: 0.4;margin: 0 4px; z-index: 10; display: inline-block; transition: .5s;}
.controls label:hover {opacity: 1;}
#img1:checked ~ .controls label {background: #eee;} !!!!
#img1:checked ~ .carousel .carousel-inner { transform: translateX(0); transition: 0.5s;}
#img2:checked ~ .carousel .carousel-inner {transform: translateX(-25%); transition: 0.5s;}
#img3:checked ~ .carousel .carousel-inner {transform: translateX(-50%); transition: 0.5s;}
#img4:checked ~ .carousel .carousel-inner {transform: translateX(-75%); transition: 0.5s;}
.carousel-slide img {width: 100%;height: 100%;object-fit: cover; z-index: 1;}

/*Modal and Popup*/
.overlay {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, 0.7); visibility: hidden; opacity: 0; -webkit-transition: opacity .6s;transition: opacity .6s;}
.overlay:target {visibility: visible; opacity: 1;} 
.modal {margin: 100px auto;padding: 0.5rem;background: var(--white-color);border-radius: 5px;width: 30%;position: relative; opacity: 0; -webkit-transition: all ease .8s;transition: all ease .8s; overflow-y: auto;}
.overlay:target .modal {visibility: visible; opacity: 1;}
.modal .close {position: absolute; cursor: pointer; top: 16px;right:16px;font-size: 30px;font-weight: bold;text-decoration: none; color: var(--gray2-color); transition: 0.6s;}
.modal .close:hover {color: var(--txt-color);}
.modal .content {max-height: 30%;overflow: auto; padding: 2rem;}

/*Бесконечный горизонтальный скролл в div*/
.over {position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; gap:1rem; overflow-x: scroll; scroll-direction: horizontal;}
.over::-webkit-scrollbar {width:6px; height: 6px;}
.over::-webkit-scrollbar-track {background-color: var(--gray-color);}
.over::-webkit-scrollbar-thumb {background-color: var(--blue-color); border-radius:6px; border: none;}

/* Выпадающий блок Dropdown */
.drop-conteiner {position: relative;  }
.drop {position: relative; display: inline-block;}
.dropdown {display:none; position: absolute; overflow:hidden; z-index: 1; background: var(--white-color); border:1px solid var(--gray-color); color:var(--txt-color); padding: 1rem; left:0; top:2rem;  border-radius:0.5rem;}
.drop:hover .dropdown {display: block; }


/*Footer*/
footer {background-color: var(--dark-side); padding: 40px 0 0 0; bottom: 0; width: 100%; color:var(--gray2-color); font-size: 0.9em;}
footer ul li {list-style-type: none; line-height: 1.4em;} 
footer p {text-align: left; color: var(--gray2-color); line-height: 1.4em;}
footer .title {font-size: 1.2em; margin-bottom: 0.8em; color: var(--white-color); font-weight: 700;}
footer .title::after {display: block; content: ''; width:54px; height:2px; background: var(--red-color); margin-top: 0.1em;}
footer a {text-decoration: none; color: var(--gray2-color); border-bottom: 1px solid transparent;}
footer a:hover {color: var(--white-color); border-bottom: 1px solid var(--red-color);}
.copy {display: block; position: relative; clear: both; text-align: center; margin: 24px auto 0;}
.copy p {padding: 16px 0; text-align: center;}



.slider {position: relative;width: 100%;height: 600px; overflow: hidden; clear: both;}
.slider-inner {display: flex; transition: transform 0.5s ease; }
.slide {flex: 0 0 100%; align-items: center;justify-content: center;text-align: center; color: white; }
.slide img {width: 100%; height: auto;}
.slider-prev,.slider-next { position: absolute; top: 50%; transform: translateY(-50%); padding: 10px 20px;background-color: rgba(0, 0, 0, 0.5); color: white; cursor: pointer;border: none;}
.slider-prev:hover,
.slider-next:hover {background-color: rgba(0, 0, 0, 0.8); }
.slider-prev {left: 0;}
.slider-next { right: 0;} 

.news {background: var(--white-color); border:1px solid var(--gray-color); border-radius: 4px; position: relative; overflow: hidden;}
.news img {display: block; width: 100%; margin:0 auto 0.5em;}
.news p {font-size: 0.9em; color:var(--gray2-color); margin-bottom: 1em; padding: 0.5em 1em;}
.news .title {font-size: 1em; color: var(--txt-color); font-weight: 700; margin-bottom: 0.1em;}
.news a {position: absolute; top:0; left:0; right:0; bottom:0; text-decoration: none;}

.box {height:auto; border-radius: 5px;}


.tabs-wrapper {border:1px solid var(--gray2-color); border-radius: 5px; overflow: hidden; display: flex; flex-direction: row; flex-wrap: wrap;  justify-content: space-between; flex-grow: 0; gap: 0;}
.tabs-wrapper input[type="radio"] {display: none;}
.tabs-wrapper label { display: inline-block;transition:0.5s;cursor: pointer; flex-grow: 1;  border-right:1px solid var(--gray2-color); background: var(--white-color);color:var(--txt-color);text-align: center;line-height: 2.2em; padding: 0.5rem 0;}
.tabs-wrapper label:hover {background: var(--gray-color); color:var(--txt-color);}
#last-tab {border-right:none;}
#tab1, #tab2, #tab3, #tab4 { &:checked { + label {background: var(--gray-color); color:var(--txt-color);}}}
.tab-body { position: absolute; top: -9999px;
  // Set opacity to 1 if you won't use any animation which sets the opacity to 1
 opacity: 0;}
 .tab-body-wrapper {padding: 2rem; border-top:1px solid var(--gray2-color); flex-basis: 100%;}
#tab1:checked ~ .tab-body-wrapper #tab-body-1, #tab2:checked ~ .tab-body-wrapper #tab-body-2, #tab3:checked ~ .tab-body-wrapper #tab-body-3, #tab4:checked ~ .tab-body-wrapper #tab-body-4 { position: relative;top: 0px;}

.accord {border: 1px solid var(--gray2-color); border-bottom:none;  overflow: hidden;}
.accord:first-child {border-radius: 5px 5px 0 0;}
.accord:last-child {border-bottom:1px solid var(--gray2-color); border-radius: 0 0 5px 5px;}
.accordion input {display: none;} 
.accordion label {display: block; line-height: 2.2em; padding: 0.5rem 2rem;  transition:0.5s; cursor:pointer;}
.accordion label:before {content: '\276F'; float: right; }
.accordion label:hover{background: var(--gray-color);}
.accordion input:checked + label {background: var(--gray-color);}
.accordion input:checked + label:before {transition: transform .3s; transform: rotate(90deg); }
.accord_cont {display:none;  padding: 2rem; transition:0.5s;}
.accordion input:checked ~ .accord_cont {display:block; }

table{border-collapse:collapse;border-spacing:0; width:100%; clear:both; margin:1rem 0; padding:.5rem;}
tbody {background:var(--gray-color); border:1px solid var(--gray2-color);}
td,th{border:1px solid #BDBDBD; padding:.4rem;text-align:center;}
th{background:#DDE3E9; border:1px solid #BDBDBD;  font-weight:bold;}
td:first-child{text-align:left; }
tr:nth-child(odd){background:var(--white-color);}
tr:hover {background:var(--gray-color); border:1px solid var(--gray2-color);}

.noborder tbody {background:var(--white-color); border:none;}
.noborder td, .noborder th{border:none; padding:.4em 10px; text-align: left;}
.noborder th{border:none; background:var(--white-color);  font-weight:bold;}
.noborder tr:hover {background:var(--white-color); border:none;}

.gorizont tbody {background:var(--white-color); border:none;}
.gorizont td {padding:.4em 10px;text-align:left; border:none; vertical-align:middle;}
.gorizont th {padding:.4em 10px; text-align:left; vertical-align:middle; background:#DCDCDC;font-weight:bold; border:none; border-bottom:2px solid #A9A9A9;}
.gorizont td:last-child {text-align:center; font-weight:bold;}
.gorizont th:last-child {text-align:center;}
.gorizont tr {border-bottom:2px solid #A9A9A9;}
.gorizont tr:first-child {border:none;}
.gorizont tr:hover {background:#eee; border:none; border-bottom:2px solid #A9A9A9;}

@media screen and (max-width:1024px){
    .catalog {grid-template-columns: repeat(3, 1fr); grid-gap: 10px;}
	.slider {height: 300px;}
	.two {grid-template-columns: repeat(1, 1fr); grid-gap: 10px;}
	.three {grid-template-columns: repeat(2, 1fr); grid-gap: 10px;}
	.four {grid-template-columns: repeat(3, 1fr); grid-gap: 10px;}
	.five {grid-template-columns: repeat(3, 1fr); grid-gap: 10px;}
	.six  {grid-template-columns: repeat(3, 1fr); grid-gap: 10px;}
	.eight {grid-template-columns: repeat(4, 1fr); grid-gap: 10px;}
	.nine {grid-template-columns: repeat(5, 1fr); grid-gap: 10px;}
	.ten {grid-template-columns: repeat(5, 1fr); grid-gap: 10px;}
	.twelve {grid-template-columns: repeat(6, 1fr); grid-gap: 10px;}
	.popup{width: 70%;}
}

@media screen and (max-width:580px){
body {font-size: 14px;}
.wr, .wrb {max-width: calc(100% - 32px);}
.nodesk {display: block;}
.nomobil{display: none;}
.two {grid-template-columns: repeat(1, 1fr); grid-gap: 5px;}
.three {grid-template-columns: repeat(1, 1fr); grid-gap: 5px;}
.four {grid-template-columns: repeat(2, 1fr); grid-gap: 5px;}
.five{grid-template-columns: repeat(2, 1fr); grid-gap: 5px;}
.six  {grid-template-columns: repeat(2, 1fr); grid-gap: 5px;}
.eight {grid-template-columns: repeat(4, 1fr); grid-gap: 5px;}
.nine {grid-template-columns: repeat(3, 1fr); grid-gap: 5px;}
.ten {grid-template-columns: repeat(5, 1fr); grid-gap: 5px;}
.twelve {grid-template-columns: repeat(4, 1fr); grid-gap: 5px;}


footer .four  {grid-template-columns: repeat(1, 1fr); grid-gap: 5px;}
aside {display: none;}
.content {flex-basis:100%;}
.txt h1 {font-size: 1.8em;line-height: 1.2em; margin-bottom: 0.5em;}
.txt h2 {font-size: 1.5em; line-height: 1.2em; margin-bottom: 0.5em;}
.txt h3 {font-size: 1.2em; line-height: 1.2em; margin-bottom: 0.4em;}
.catalog {grid-template-columns: repeat(2, 1fr); grid-gap: 5px;}
.slide img {height: 200px;}
.tabs-wrapper {flex-direction: column;}
.tab-body-wrapper {border-top:none;}
.tabs-wrapper label {width: 100%; margin-left: 0; border-bottom: 1px solid var(--gray2-color); border-right:none;}

}


/*Эксперименты с цветом*/
.dark_1, .dark_2, .dark_3, .dark_4, .dark_5, .dark_6, .dark_7, .dark_8, .dark_9 {position: absolute; top:0; right:0; bottom:0; left:0;}

.dark_1 {background: rgba(0, 0, 0, 0.1);}
.dark_2 {background: rgba(0, 0, 0, 0.2);}
.dark_3 {background: rgba(0, 0, 0, 0.3);}
.dark_4 {background: rgba(0, 0, 0, 0.4);}
.dark_5 {background: rgba(0, 0, 0, 0.5);}
.dark_6 {background: rgba(0, 0, 0, 0.6);}
.dark_7 {background: rgba(0, 0, 0, 0.7);}
.dark_8 {background: rgba(0, 0, 0, 0.8);}
.dark_9 {background: rgba(0, 0, 0, 0.9);}

.releva {position: relative;}



.borders {background: transparent;
    background-image: linear-gradient(to right, #000 0 10%, rgba(255, 255, 255, 0) 10%);
    background-position: bottom;
    background-size: 8px 1px;
    background-repeat: repeat-x;}