@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,slnt,wdth,wght,GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC@8..144,-10..0,25..151,100..1000,-200..150,27..175,323..603,25..135,649..854,-305..-98,560..788,416..570,528..760&display=swap');

* {
font-family: "Roboto Flex", sans-serif !important;
font-optical-sizing: auto;
}


.font-h4{font-size:20px;line-height:28px;font-weight:700;letter-spacing:0}
.font-h5{font-size:18px;line-height:26px;font-weight:700;letter-spacing:0}
.font-h6{font-size:16px;line-height:26px;font-weight:700;letter-spacing:0}
h4,.h4{font-size:20px;line-height:28px;font-weight:700;letter-spacing:0}
h5,.h5{font-size:18px;line-height:26px;font-weight:700;letter-spacing:0}
h6,.h6{font-size:16px;line-height:26px;font-weight:700;letter-spacing:0}

.company-history{border:1px solid #e1e1e6;padding:40px}
.company-history h4{padding-bottom:2px;}
.company-history p{font-size:16px;line-height:24px;font-weight:400;letter-spacing:0;text-decoration:none;padding-bottom:10px;margin:0}
.company-history .text{margin:0 0 0 120px;border-bottom:1px solid #e1e1e6;padding-bottom:40px;width:100%}
.company-history .history-block{position:relative;display:flex;margin-top:40px}
.company-history .history-block:after{content:'';top:10px;left:7px;height:calc(100% + 40px);width:2px;background-color:#e1e1e6;position:absolute;z-index:5}
.company-history .history-block:last-of-type:after{content:none}
.company-history .history-block:last-of-type .text{border-bottom:none;padding-bottom:0}
.company-history .history-block:first-of-type{padding-top:40px;margin-top:0;border-top:0px solid #e1e1e6}
.company-history .history-block:first-of-type .date-wrap{margin-top:0}
.company-history .history-block:first-of-type:after{top:50px;height:100%}
.company-history .history-block .photo{max-width:525px}
.company-history .date-wrap{width:88px;min-width:88px;max-width:88px;display:flex;align-items:flex-start}
.company-history .date-wrap .title{margin-bottom:0;margin-left:40px}
.company-history .date-wrap .title.no-year{margin-left:118px}
.company-history .date-wrap .date{display:flex;align-items:center}
.company-history .date-wrap .date .dot{display:inline-block;width:16px;height:16px;border-radius:8px;position:relative;background-color:#e21c2a;z-index:10}
.company-history .date-wrap .date .dot:after{content:'';display:inline-block;width:8px;height:8px;margin-left:calc(100% - 15px);margin-bottom:calc(100% - 14px);border-radius:4px;background-color:#fff}
.company-history .date-wrap .date .num{font-size:20px;line-height:28px;font-weight:700;letter-spacing:0;text-decoration:none;color:#e21c2a;margin-left:16px}


************* Product Grid *************


.catalog-areas > ul.flex-row {
display: flex !important;
justify-content: center !important;
flex-wrap: wrap !important;
}

.inline-block {
display: inline-block !important;
}

.img-center {
display: flex !important;
justify-content: center !important;
flex-wrap: wrap !important;
}

.img-center > img {
padding: 1% 2% !important;
}

#container > div > div.customMainBanner {
height: 425px !important;
}

#container > div > div.customMainBanner > div.customSlider {
height: 425px !important;
}

#container > div > div.customMainBanner > div.customSlider > a {
height: 425px !important;
}

/*
#container > div > div.customMainBanner > div.customSlider > a > img {
position: relative !important;
height: 100% !important;
top: -80px !important;
}
*/

#container > div > div.customMainBanner > div.sliderLabels > label {
background: #e21c2a !important;
border-radius: 20% !important;
}

#container > div > div.customMainBanner > div.sliderButtonsControl {
bottom: 53% !important;
}

#container > div > div.customMainBanner > div.sliderButtonsControl > div {
background: #e21c2a !important;
border-radius: 10% !important;
background-image: unset !important;
}

#container > div > div.customMainBanner > div.sliderButtonsControl > div:hover {
opacity: 0.9 !important;
}


@media screen and (orientation: portrait) {
.company-history .history-block .photo {
min-width: 700px;
max-width: 700px;
}

.company-history .date-wrap .date .num {
font-size: 320% !important;
line-height: 100% !important;
}

* {
text-indent: unset !important;
list-style: initial !important;
list-style-type: initial !important;
}

#header {
height: 15% !important;
}

#header > div.head-pan {
zoom: 250% !important;
height: 35px !important;
text-align: center !important;
padding: 3% 0 3% 0 !important;
}

#header > div.head-pan > form > input[type=text] {
color: unset !important;
}

#header > div.head-pan > div > a > img {
border: solid 1px #000000 !important;
zoom: 110% !important;
}

#header > div.group > div > div.logo > div {
font-size: 100% !important;
font-size: 190% !important;
}

#header > div.group > div > div.head-contacts > span {
font-size: 280% !important;
line-height: 120% !important;
} 

#header > div.group > div > div.head-contacts > span > span {
font-size: 100% !important;
line-height: 100% !important;
}

#header > div.group > div > div.head-contacts > span > span > span {
font-size: 100% !important;
color: unset !important;
font-weight: unset !important;
}

#header > div.group > div > div.head-contacts > a {
display: none !important;
}

#header > div.group > nav > ul {
display: flex !important;
justify-content: center !important;
flex-wrap: wrap !important;
}

.menu {
width: 100% !important;
}

.menu > ul > li {
padding: 0.75% 2% 0.75% 2% !important;
}

.menu > ul > li:last-child {
padding: 0.75% 2% 0.75% 2% !important;
}

#header.header.centered-bl .group .menu ul li .header-menu__link {
text-transform: uppercase !important;
font-size: 300% !important;
line-height: 100% !important;
}

#header.header.centered-bl .group .menu ul li .header-menu__link span {
display: none !important;
}

#container > div > div.customMainBanner {
height: 1663px !important;
}

#container > div > div.customMainBanner > div.customSlider {
height: 1663px !important;
}

#container > div > div.customMainBanner > div.customSlider > a {
height: 1663px !important;
}

#container > div > div.customMainBanner > div.customSlider > a > img {
height: 2248px !important;
object-fit: cover;
object-position: 100% -585px !important;
}

#container > div > div.customMainBanner > div.sliderLabels {
right: 2% !important;
zoom: 250% !important;
}

#container > div > div.customMainBanner > div.sliderButtonsControl {
zoom: 250% !important;
}

#ajax_order_form > div.dialog-window.fixed-full.flex-center.no-pointer-events > div {
zoom: 180% !important;
}

#textMesage {
font-size: 150% !important;
line-height: 100% !important;
text-align: initial !important;
}

#ajax_order_form > div.dialog-window.fixed-full.flex-center.no-pointer-events > div > div > form > div.form-content > button {
zoom: 150% !important;
}

#container > div > div.main-content {
display: inline-block !important;
}

body #wrapper section#middle div#container .centered-bl.group .main-content .content {
width: 100% !important;
}

body #wrapper section#middle div#container .centered-bl.group .main-content .aside {
width: 100% !important;
}

#container > div > div.main-content > aside > div > ul {
display: flex !important;
justify-content: center !important;
flex-wrap: wrap !important;
}

#container > div > div.main-content > aside > div > ul > div {
zoom: 215% !important;
}

#container > div > div.main-content > aside > div > ul > li {
zoom: 215% !important;
padding: 5% !important;
}

#container > div > div.main-content > div > div.about b {
font-size: 280% !important;
line-height: 100% !important;
}

#container > div > div.main-content span.page-tt {
font-size: 100% !important;
font-size: 280% !important;
line-height: 100% !important;
}

#container > div > div.main-content > div > div.main-news > article > div > span {
font-size: 100% !important;
font-size: 200% !important;
line-height: 100% !important;
color: #e21c2a !important;
}

#container > div > div.main-content > div > div.main-news > a {
font-size: 100% !important;
font-size: 280% !important;
line-height: 100% !important;
height: auto !important;
}

#footer {
height: 15% !important;
}

#footer > div > div > div#first {
width: 35% !important;
line-height: 100% !important;
}

#footer > div > div > div#first > div.footer-logo > a img {
width: 90% !important;
}

#footer > div > div > div#first > div.soc > a img {
width: 15% !important;
padding: 2% !important;
}

#footer > div > div > div#first > div.soc > a img#youtube {
width: 33% !important;
padding: 1% !important;
}

#footer > div > div > div#first > div.soc > a:nth-child(2) {
position: fixed !important;
bottom: 2% !important;
right: 3% !important;
z-index: 9999 !important;
}

#footer > div > div > div#first > div.soc > a:nth-child(2) img {
position: fixed !important;
bottom: 2% !important;
right: 3% !important;
z-index: 9999 !important;
}

#footer > div > div > div#second {
width: 65% !important;
font-size: 100% !important;
font-size: 200% !important;
line-height: 130% !important;
}

#footer > div > div > div#second > nav > ul > li:nth-child(1) {
padding-left: 0 !important;
}

#footer > div > div > div#second b {
font-size: 100% !important;
}

#container > div > div > div.flex-column > div.card-descript {
text-align: initial !important;
}

#container > div > div > div.flex-column > div.card-descript > p > span {
font-size: 100% !important;
}

#container > div > div > div.flex-column > div.card-descript > p > span span, u, strong, ul, li {
font-size: 100% !important;
}

#container > div > div > div.flex-column > div.card-descript > p > strong > span {
font-size: 100% !important;
}

#container > div > div > div.flex-column > div.card-descript > p > a {
font-size: 100% !important;
}

#container > div > div > div.flex-column > div.card-descript > p > u > strong > span {
font-size: 100% !important;
}

#container > div > div > div.flex-column > div.card-descript > p > a > span > u > strong > span {
font-size: 100% !important;
}

#container > div > div > div.flex-column > div.card-descript > ul {
margin-left: initial !important;
margin-left: 5% !important;
}

#container > div > div > div.flex-column > div.card-descript > ul > li {
font-size: 100% !important;
font-size: 280% !important;
line-height: 100% !important;
}

#container > div > div > div.flex-column > div.card-descript > ul > li > span {
font-size: 100% !important;
line-height: 100% !important;
}

#container > div > div > div.flex-column > div.card-descript > ul > li > span > span {
font-size: 100% !important;
}

#container > div > div > div.flex-column > div.section > div {
width: 100% !important;
}

#container > div > div > div.flex-column > div.section > ul {
display: none !important;
}

#container > div > div > div.flex-column > div.section > div > div > table > tbody > tr > td > p > span {
font-size: 100% !important;
}

#container > div.centered-bl.group.catalogtypes > div.brands-item.group > div > div > p > span > span {
font-size: 100% !important;
}

#container > div.centered-bl.group.catalogtypes > div.brands-item.group > div > div > p > strong > span {
font-size: 100% !important;
}

#container > div.centered-bl.group.catalogtypes > div.brands-item.group > div > div > p > a > span {
font-size: 100% !important;
}

#container > div.centered-bl.group.catalogtypes > div.brands-item.group > div > div > p > a > u > span {
font-size: 100% !important;
}

#container > div.centered-bl.group.catalogtypes > div.brands-item.group > div > div > ul {
margin-left: initial !important;
margin-left: 5% !important;
}

#container > div.centered-bl.group.catalogtypes > div.brands-item.group > div > div > ul > li {
font-size: 100% !important;
font-size: 280% !important;
line-height: 100% !important;
}

#container > div.centered-bl.group.catalogtypes > div.brands-item.group > div > div > ul > li > span {
font-size: 100% !important;
line-height: 100% !important;
}

#container > div.centered-bl.group.catalogtypes > div.brands-item.group > div > div > ul > li > span > span {
font-size: 100% !important;
}

h1, h2, h3, h4, h5, h6, p {
font-size: 280% !important;
line-height: 100% !important;
}

#container > div.centered-bl > div > p > span {
font-size: 100% !important;
}

#container > div.centered-bl > div > p > a.btn {
zoom: 250% !important;
}

#container > div.centered-bl > div > div.group > h1 > span {
font-size: 100% !important;
}

#container > div.centered-bl > div > div.group > p > span {
font-size: 100% !important;
}

#container > div.centered-bl > div > div:nth-child(3) > div.aside-city {
font-size: 280% !important;
line-height: 100% !important;
}

#container > div > div > div.flex-column > div.flex-row {
height: 900px !important;
}

#container > div > div > div.flex-column > div.flex-row img {
object-fit: contain !important;
}

#container > div > div > div.flex-column > div.flex-row > div:nth-child(1) {
height: 900px !important;
width: 70% !important;
padding: 0 2% 0 0 !important;
}

#container > div > div > div.flex-column > div.flex-row > div:nth-child(2) {
height: 900px !important;
width: 26% !important;
padding: 0 2% 0 0 !important;
}

.img-center > img {
width: 46% !important;
}

button {
zoom: 230% !important;
}

.catalog-areas > ul.flex-row > li {
position: relative !important;
display: inline-block !important;
min-height: 1px !important;
flex: none !important;
width: calc(50% - 70px) !important;
padding: 25px 25px !important;
}

.catalog-areas > ul.flex-row > li > span:nth-child(1) {
width: auto !important;
heigt: auto !important;
min-height: 470px !important;
}

.catalog-areas > ul.flex-row > li > span:nth-child(2) {
width: auto !important;
heigt: auto !important;
min-height: 75px !important;
max-height: 75px !important;
padding: 20px 0 20px 0 !important;
}

.catalog-areas > ul.flex-row > li img {
width: auto !important;
heigt: auto !important;
max-height: 470px !important;
min-height: 75px !important;
}

.catalog-areas > ul.flex-row > li > .name-c-prod {
font-size: 300% !important;
line-height: 40px !important;
}

#container > div.centered-bl.group.catalogtypes > div > ul > li > a > div > div:nth-child(2) > i {
font-size: 85% !important;
}

.catalog-areas > .pagination {
font-size: 300% !important;
line-height: 40px !important;
padding-right: 20px !important;
padding-left: 20px !important;
width: unset !important;
}

.brands-item.group > div {
padding-right: 20px !important;
padding-left: 20px !important;
}

.brands-item.group > div > div > p > span {
font-size: 100% !important;
line-heigh: 40px !important;
}

#practical > div.catalog-list > div {
zoom: 200% !important;
width: 45% !important;
}
}

@medi (max-width:575px){
.company-history .history-block{flex-direction:column}
.company-history .history-block .date-wrap{align-items:flex-start;flex-direction:column;margin-bottom:24px}
.company-history .history-block .date-wrap .date{margin-bottom:8px}
.company-history .history-block .date-wrap .title{margin:0}
.company-history .history-block .text{margin:0}
.company-history .history-block:after{content:none}

@medi (max-width:374px){
.company-history .history-block .photo{max-width:70%;height:auto}
}

@medi (max-width:991px){
.company-history .history-block .photo{max-width:100%}
}

************* END Product Grid *************

