/* common */

@charset "utf-8";

.shell {
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
}

article {
    position: relative;
    display: flex;
    background-color: #fff;
}

section.index {
    padding: 20px 0;
}

header.scroll {
    margin-bottom: 50px;
}

header {
    position: fixed;
    left: 0; right: 0; top: 0;
    height: 111px;
    z-index: 2002;
    background-color: #fff;
}

.subHeader {
    margin-top: 100px;
}

.slideShow, content.error {
    margin-top: 100px;
}

footer {
    padding: 30px 0;
    font-size: .85em;
}

footer .shell {
    display: flex;
    justify-content: space-between;
}

footer .shell div:last-child {
    text-align: right;
}

content {
    flex-grow: 1;
    margin-top: 111px;
    padding: 10px 0 20px 0;
    background-color: #eaeff4;
    background-image: url(../img/bgMain.jpg);
}

content.indexPage {
    margin-top: 0 !important;
    padding-top: 20px;
}

.splitPage {
    display: grid;
    grid-column-gap: 15px;
    grid-row-gap: 50px;
    grid-template-columns: repeat(2, 1fr);
}

/* header */

.commonHeader {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: center;
    flex-wrap: nowrap;
    margin: 5px 0;
/*    position: relative; */
    font-weight: 600;
    pointer-events: all;
}

.commonHeader ul,.msgrSection ul {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 15px;
    margin: 0; padding: 0;
    list-style-type: none;
    line-height: 1em;
}

.logoDesktop {
    flex: 0 0 225px;
/*    margin-top: 15px; */
}

.logoMobile {
    display: none;
 /*   margin-top: 10px; */
    flex: 1 1 auto;
}

.infoSection {
    margin-left: auto;
}
.contactsSection {

}

.contactsSection ul {
    /* margin-top: 14px; */
    flex-direction: column;
}

.contactsSection li {
    text-align: right;
}

.commonHeader .submitButton a {
    padding: 10px 20px 10px 20px;
    font-size: 18px;
}

.phone {
    font-family: 'Geo', sans-serif;
    font-weight: 500;    
    letter-spacing: -.08em;
    font-size: 30px;
    line-height: 1.5rem
}

.phone a {
    color: #aab2b9;
    white-space: nowrap;
}

.mail {
    margin-top: 2px !important;
    font-size: 1em;
}

.mail a {
    white-space: nowrap;
}

.whatsapp, .telegram {
    margin-right: 10px;
}

.whatsapp::before, .telegram::before {
    font-family: "Font Awesome 5 Brands";
    font-size: 1.1rem;
    color: #aab2b9;
}

.telegram::before {
    content: "\f3fe";
}

.whatsapp::before {
    content: "\f232";
}

/*Реквизиты table*/
.org-details {
	width: 100%;
	margin-bottom: 20px;
	border: 1px solid #dddddd;
	border-collapse: collapse; 
}

.org-details td {
	border: 1px solid #dddddd;
	padding: 5px;
}

/* top menu */

nav {
    display: flex;
    justify-content: center;
}

.navTop {
    flex: 1 1 auto;
    background-color: #43515d;
    padding: 5px 0;

}

ul.menuRow>li {
    flex: 1 1 auto;
    transition: all .4s;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
}

ul.menuRow>li>a {
/*    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;  */
    text-align: center;
    padding: 27px 25px 0 25px;
    font-size: 1.1em;
}

ul.menuRow>li a.active {
    color: #fff !important
}
/*
ul.menuRow>li:nth-child(1) a::after {
    content: "01";
}

ul.menuRow>li:nth-child(2) a::after {
    content: "02";
}

ul.menuRow>li:nth-child(3) a::after {
    content: "03";
}

ul.menuRow>li:nth-child(4) a::after {
    content: "04";
}

ul.menuRow>li:nth-child(5) a::after {
    content: "05";
}

ul.menuRow>li a::after {
    position: absolute;
    left: 0; right: 0; top: 29px;
    height: 18px;
    z-index: 10px;
    font-family: 'Geo', sans-serif;
    font-size: 29px;
    font-weight: 500;
    letter-spacing: -2px;
    color: #b1bac3;
}
*/

/*
ul.menuRow>li a:hover::after {
    color: #8c959d;
}

ul.menuRow>li a.active::after {
    color: #fff;
}

ul.menuRow>li a::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 100%;
    z-index: -1;
    transition: all .4s
}

ul.menuRow>li a:hover::before {
    background: #eaeff5;
}

ul.menuRow>li a.active::before {
    background: linear-gradient(to right, #21a5d7, #7aae4a);
    bottom: 0;
}

ul.menuRow>li a:hover::before, nav#desktop ul li a.active::before {
    bottom: 0;
}
*/
/* sub menu */

.menuSub {
    margin: 5px 0 10px 0;
    font-size: 1.05rem;
    font-weight: 600;
    transition: all .2s;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
}

.menuSub {
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.menuSub::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.menuSub .shell {
    width: 100%;
}

main .menuSub ul {
    padding: 0;
}

.menuSub li {
    margin-bottom: 10px;
}

.menuSub a {
    display: inline-block;
    position: relative;
    padding: 1px 10px 1px 10px;
    color: #75808b;
    border-bottom: none;
    white-space: nowrap;
    z-index: 1;
}

.menuSub ul li a:hover {
    color: #68727c;
}

.menuSub ul li.active a {
    color: #fff !important;
}

.menuSub ul li a::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 100%;
    background: #eaeff5;
    z-index: -1;
    transition: .4s
}

.menuSub ul li a:hover::before {
    bottom: 0
}

.menuSub ul li.active a::before {
    bottom: 0;
    background: linear-gradient(to right, #21a5d7, #7aae4a);
}

/* .menuSub ul li a::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
    width: 10px; height: 5px;
    background-image: url(/custom/base/img/icoMenuArr.png);
    z-index: 1000;
    opacity: 0;
    -webkit-transition: all 0.4s;
    transition: all 0.4s; 
} */

.menuSub ul li.active a::after {
    opacity: 1;
}

/* slider */

.slideShow {
    height: 400px;
    overflow: hidden;
    background: linear-gradient(to right, #21a5d7 0%, #7aae4a 50%);
}

.slideShowItem {
    cursor: grab;
}

.slideShowImg, .slideShowText {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.slideShowImg {
    position: relative;
    flex: 1 1 50%;
    background-size: cover;
    background-position: center center;
    clip-path: polygon(8% 0, 100% 0, 100% 100%, 8% 100%, 0 75%, 0 25%);  
}

.slideShowText {
    flex: 1 1 50%;
    padding: 0 60px 0 20px;
    align-items: flex-end;
    
}

.slideShowText h2 {
    margin-bottom: 10px;
    max-width: 80%;
    font-size: 2.6em;
    font-weight: 700;
    line-height: 1.05em;
    text-align: right;
    color: #fff;
}

.slideShowText h2 a {
    color: #ffffffa6;
}

.slideShowText h2 a:hover {
    color: #fff !important;
}

.slideShowText p {
    max-width: 90%;
    font-size: 1.5em;
    line-height: 1.2em;
    text-align: right;
    color: #fff;
}

.slideShowArrow {
    position: absolute;
    top: 0; bottom: 0;
    width: 40px;
    z-index: 1001;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: all .4s;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
}

.slideShowArrow span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
    transition: all .4s;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
}

.slideShowArrow.arrowPrev span::before {
    content: "\f053";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 2rem;
}

.slideShowArrow.arrowNext span::before {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 2rem;

}

@media (hover: hover) {
    .slideShowArrow span:hover {
        color: #f16947
    }
}


.slideShowArrow.arrowPrev {
    left: -30px;
}

.slideShowArrow.arrowNext {
    right: -30px;
}

.slideShow:hover .slideShowArrow.arrowPrev {
    left: 20px;
    opacity: 1;
}

.slideShow:hover .slideShowArrow.arrowNext {
    right: 20px;
    opacity: 1;
}

/* subheader */

.subHeader h1 span {
    display: none;
}

.subHeader h1 span:first-child {
    display: inline-block;
}

.breadCrumbs {
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: .95em;
    font-weight: 500;
    line-height: 1.3em;
    color: #838385;
}

.breadCrumbs .separator {
    margin: 0 3px;
    font-size: .85em;
    font-weight: 400;
    color: #838385;
}

.breadCrumbs span, .breadcrumbs a {
    display: inline-block;
}

.breadCrumbs a {
    transition: all .4s;
}

/*  */

.catInfo {
    margin-bottom: 40px;
}

.listGrid, .listRows {
    margin: 10px 0 40px 0;
}

.firstPage {
    margin: 20px 0 40px 0;
}

.firstPage .listGrid {
    margin: 10px 0;
}

.firstPageHeader a::after {
    content: "\f061";
    margin-left: 10px;
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 16px;
}

.listGrid {
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: repeat(4, 1fr);
}

.listGrid article {
    position: relative;
    flex-direction: column;
    padding-bottom: 45px;
}

.listGrid.listIndex article {
    padding-bottom: 0;
    overflow: hidden;
    /* background: linear-gradient(to top, #44515c, #8892a1); */
    background: #fff;
}

.listGrid.listIndex .shopImgs {
    text-align: center;
}

.listGrid.listIndex .shopInfo {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    background: linear-gradient(to right, #21a5d7, #7aae4a);
    z-index: 1001;
    pointer-events: none;
}

.listGrid.listIndex article a {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

.listGrid.listIndex article img {
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}

.listGrid.listIndex article:hover img {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
}

.listGrid.listIndex h3 {
    font-size: 1.3rem;
    line-height: 1em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.listGrid .shopImgs>figure {
    text-align: center;
}

.listGrid .shopInfo {
    padding: 10px;
    text-align: center;
}

.listGrid h4 {
    font-size: 1.05rem;
}

.listRows article, article.shopID {
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.listRows .shopImgs, .shopID .shopImgs {
    flex: 0 0 240px;
}

.listRows .shopInfo, .shopID .shopInfo {
    padding: 0 0 20px 20px;
}

.shopAnounce {
    margin-top: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: #7aae4a;
}

.shopInfo p {
    margin-top: .3em;
    line-height: 1.3em;
}

.shopText {
    margin-top: 10px;
}

.shopText2 {
    margin-top: 10px;
    font-size: .9rem;
}

/* Кнопки */

.submitButton.big {
    margin-top: 25px;    
}

.submitButton.small {
    margin-top: 20px;
}

article.shopItem .submitButton.small {
    opacity: .3;
    transition: all .2s;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
}

article.shopItem:hover .submitButton.small {
    opacity: 1;
}

.listGrid .submitButton.small {
    position: absolute;
    left: 0; right: 0; bottom: 20px;
    text-align: center;
}

.submitButton.multi {
    margin-top: 40px;      
}

.submitButton a {
    color: #fff !important;
    background-color: #21a5d7;
    font-weight: 700;
    border: none;
    border-radius: 1px;
    cursor: pointer;
    -webkit-transition: .4s;
    transition: .4s;
    white-space: nowrap
}

.submitButton a:hover {
    background: #7aae4a;    
}


.submitButton.big a {
    padding: 6px 15px 5px 15px;
    font-size: 17px;
    
}

.submitButton.small a {
    padding: 3px 15px 4px 15px;  
    font-size: 15px; 
}
.moreButtons {
    margin-top: 20px;
}

.moreButtons a {
    color: #fff;
}

.moreButtons button a:hover {
    color: #fff !important;
}
/*tables*/
table {
	width: 100%;
	margin-bottom: 20px;
	border: 1px solid #dddddd;
	border-collapse: collapse; 
}
table th {
	font-weight: bold;
	padding: 5px;
	background: #efefef;
	border: 1px solid #dddddd;
}
table td {
	border: 1px solid #dddddd;
	padding: 5px;
}

.table tr td:last-child, .table tr th:last-child {
	text-align: right;
}
/* elements */

.pref {
    margin-top: 10px;
    margin-bottom: 10px;
    background: none;
    column-gap: 50px;
    align-items: center;
}

.pref div:first-child {
  /*flex-basis: 80%; */
}

.pref div:first-child img {
    display: block;
    max-width: none;
    width: 80px;
    color: #bec8d1;
}

.pref div:first-child span {
    display: block;
    margin-top: 10px;
    font-family: 'Geo', sans-serif;
    font-size: 4em;
    letter-spacing: -0.1em;
    color: #bec8d1;
}

.pref div:last-child {
    /* flex: 1 1 auto; */
    flex-basis: 100%; 

}

.pref div:last-child p {
    margin-top: 0;
}

@media screen and (max-width: 768px) {
    .pref {
        flex-direction: column;
    }
}


.yandexMap {
    margin-top: 30px;
}

.privacyPolicy {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    padding: 20px;
    font-size: .8em;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background-color: #676769;
}

.privacyPolicy a, .privacyPolicy span {
    display: inline-block;
    margin-top: 10px;
    padding: 9px 15px;
    color: #fff;
    background-color: #940000;
    cursor: pointer;
}

content.error {
    display: flex;
    justify-content: center;
    align-items: center;
}

content.error h1 {
    font-size: 4rem;
}

.dummyImg {
    
}

/*
Clauses
*/

.section-d_clauses_home .section-d_main {
    margin-bottom: 20px;
}

.section-d_clauses_home .section-d__name a {
    color: #767b81;
}

.clausesItem {
    margin-top: 20px;
    padding: 10px 20px 15px 20px;
}

.clausesAnnounce {
    margin: 10px 0 15px 0;
}

.clausesAnnounce ul {
    padding: 0;
    list-style-type: none;
}

.clausesItem button {
    margin-right: 10px;
}

.clausesItem button a {
    color: #fff;
}

.clausesItem button a:hover {
    color: #fff  !important;
}

.clausesText {
    display: none;
    margin-top: 10px;
}

.clausesText h3 {
    font-size: 1.3rem;
}

.clausesText ul, .clausesText p {
    font-size: .95rem;
}

.clausesExtraText::before {
    content: 'Подробнее';
}

.clausesExtraText.active::before {
    content: 'Свернуть';
}
.clauses_id_img {
    max-width: 50%;
}
/*  */

.listGrid.photoList {
    margin: 10px 0 !important;
}

.photoItem {
    padding: 10px !important;
}

.photoItem h3 {
    margin-top: 10px;
    font-size: 1.3rem;
    text-align: center;
}

.photoImg {
    position: relative;
    background-color: #fff;
    background-size: cover;
    background-position: center center;
    transition: all .4s;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
}

.photoImg a {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

.downloadFile {
    margin-top: 30px;
}

.downloadFile a {
    color: #fff !important;
    background-color: #21a5d7;
    font-weight: 700;
    border: none;
    border-radius: 1px;
    padding: 6px 15px 8px 15px;
    font-size: 17px;
    cursor: pointer;
    -webkit-transition: .4s;
    transition: .4s;
    white-space: nowrap
}

.downloadFile a:hover {
    background: #7aae4a;    
}

ul.tempList {
    margin: 20px 0 0 0; padding: 0;
    list-style-type: none;
    display: grid;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    grid-template-columns: repeat(3, 1fr);
    font-weight: 600;
}

ul.tempList li {
    padding: 5px 10px;
    background: #fff;
}

.listGrid.grid5 {
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.listGrid.grid5.listIndex h3 {
    font-size: 1.1rem;
}

.searchSection {
    display: flex;
    position: relative;
    background-color: #bcbfc5;
    margin-top: 20px;
    padding: 10px;
}

.indexPage .searchSection {
    margin-top: 9;
}

.searchSection input, .searchSection button {
    font-size: 1.2rem;
}

.searchSection button {
    padding: 5px 20px 6px 20px;
}

.searchSectionForm {
    display: flex;
    flex-grow: 1;
}

.searchLine {
    flex: 1 1 auto;
}

.searchLine input {
    max-width: none !important;
}

.searchResult {
    position: absolute; top: 50px; left: 0; right: 0;
    background-color: #bcbfc5;
    z-index: 2000;
}

.searchResult .section-d_search {
    margin: 0 10px 10px 10px;
    max-height: 300px;
    overflow-y: auto;
}

.searchResult .listRows {
    margin: 0 !important;
}

.searchResult .listRows .shopItem {
    padding: 5px 10px;
    margin-top: 10px;
    margin-bottom: 0;
}

.searchResult .listRows .shopItem:first-child {
    margin-top: 0;
}

.searchResult .shopItem .shopImgs {
    flex: 0 0 60px;
}

.searchResult .shopItem .submitButton {
    display: none;
}

.searchResult .shopItem .shopInfo {
    padding: 0 0 0 10px;
    display: flex;
    align-items: center;
}

.shopID .shopInfo {
    display: flex;
    align-items: center;
}

.searchResult .shopItem .shopInfoContainer {
    
}

.searchResult .shopItem .shopAnounce {
    margin-top: 3px;
}

.mainSearchResult .shopItem .shopInfo {
    display: flex;
    align-items: center;
}

.mainSearchResult article {
    margin-bottom: 10px !important;
}
/* Partners */
.partners-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.partners-content .partners-item {
   flex: 1 1 0;
}
@media screen and (max-width: 768px) {
    .partners-content .partners-item {
        flex: 50%;
    }
}
/*Valwes wrapper*/
.valves-wrapper {
    margin: 30px 0;
    display: flex;
    flex-wrap:wrap;
    gap:20px;
    /*justify-content: space-between; */
}
.valves-table {
/*	width: 70%; */
	margin-bottom: 20px;
	border: 1px solid #dddddd;
	border-collapse: collapse; 
}

.valves-table td {
	border: 1px solid #dddddd;
	padding: 5px;
}

.valves-table td:nth-child(2) {
    text-align: center;
    padding: 5px 30px;
}

@media screen and (max-width: 768px) {
    .valves-table {
        width: 100%;
    
    }
}
 /*
Derrick
*/
.anounceListRows .buttonsArea {
    margin-top: 20px;
}
.buttonsArea .readmoreButton {
    margin-left: 20px;
}
/*--------------------------------------------------------------
# Whatsapp widget
--------------------------------------------------------------*/

.widget__link {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	right: 45px;
	bottom: 30px;
	width: 55px;
	height: 55px;
	background-color: #25d366;
	border-radius: 50%;
	z-index: 999;
}
.widget__img {
	display: inline-block;
	height: 35px;
	width: 32px;
	background-image: url(/custom/base/img/widget-letter-alt.webp);
	background-size: cover;
	background-position: center;
}
.widget__link::after {
	content: " ";
	display: block;
	position: absolute;
	border: 1px solid #25d366;
	left: -20px;
	right: -20px;
	top: -20px;
	bottom: -20px;
	border-radius: 50%;
	animation: animate-circle 1.5s linear infinite;
	opacity: 0;
	backface-visibility: hidden;
}

.widget__link:hover {
    cursor: pointer; 
}

@keyframes animate-circle {
	0% {
		transform: scale(0.5);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: scale(1.2);
		opacity: 0;
	}
}

.offers .section-d__list {
        grid-template-columns: repeat(3, 1fr);

}