*{box-sizing: border-box;}
body{display: flex; flex-direction: column; padding:20px; margin:0; font-family: Arial, Helvetica, sans-serif; background-color: rgb(242, 242, 242); color:#333;}

header,main,footer{width: 100%; display: flex; }




.wrap{width:98%; max-width:900px;  margin:0 auto; display: flex;} 

h1{font-size:24px;color:#333; margin:0; padding:0;}

header .wrap{display: flex; justify-content: space-between; align-items: center;}
 a.logo{display: block; width: 100%; height: 70px; background:#fff; border-radius: 20px; padding:20px; margin:0 0 10px 0; background:#fff url(/tpls/img/logo.jpg) no-repeat center;}

header{width:100%;margin:10px 0; display: flex;}

main{width: 100%; display: flex; margin:10px 0;  max-width: 1600px; margin:0 auto; }
aside{width:280px; min-height: 200px;  padding:0px; display: flex; flex-direction: column; flex-shrink: 0;  }
article{width: 100%; margin:0 20px; min-height: 200px; padding:10px 20px;  display: flex; background:#fff; border-radius: 20px; flex-direction: column; }

button, .btn{background:#03B875; transition:0.3s; text-decoration:none; color:#fff; border:none; border-radius: 10px;  cursor:pointer; height: 36px; padding:0px 20px; font-size: 16px;}
.btn{height:auto; padding:5px 10px;}



button:hover, .btn:hover{background:#03B875;}
.caption{display: flex; align-items: center; width: 100%; padding:10px 0 10px 0; margin:0 0 0px 0;}

.caption a.backlink{display: flex; transition:0.3s;align-items:center; margin-right:10px; font-size:16px;   justify-content: center; align-items: center;  text-decoration: none; color:#333;  padding:10px 10px; border-radius: 10px;  background:#eee;}
.caption a.backlink i{margin-right:10px; transition:0.3s; color:#000; font-size:20px;}
.caption a.backlink:hover{background:#018f5b; color:#fff;}
.caption a.backlink:hover i{color:#fff;}

.apps{display: flex;  justify-content: end; width: 100%;  padding:0px 0 0 0; }
.apps a{display: block; margin:10px 0 10px 10px;}
.apps a img{display: block; width:180px;}

.menu-l1{display: flex; margin:10px 0 0 0; padding:20px; flex-direction: column; list-style: none; background:#fff; border-radius: 20px;}
.menu-l1-item{display: flex; align-items: center; border-top: 1px #e6e6e6 solid;}
.menu-l1-item:first-child{border-top:none;}

.menu-l1-item a{color:#333;  padding:5px;  font-size: 13px; display: flex; align-items: center; text-decoration: none;}

.menu-l1-item a img{width:48px;  height:48px; margin-right:10px; border-radius: 10px; object-fit: contain; object-position: center;}

.flex-line{width: 100%; display:flex;}
.flex-col{width: 100%; display:flex; flex-direction:column}
.flex-sb{justify-content: space-between;}
.flex-rb{align-items: end; justify-content: end;}
.flex-50{width: 50%;display: flex;}
.flex-cnt{align-items: center; justify-content: center;}
.flex-start{align-items: start !important; justify-content: start !important;}

.sorter{padding:15px 0;}
.sorter select{background: #fff; margin-left:5px;}

#loginBlockVariant a{padding:10px;}
#loginBlockVariant{overflow:hidden; max-height:100px; transition:0.5s;}
#loginBlockVariant.noView{max-height:0;}


.moreTxt{max-height:50px; overflow:hidden; align-items: flex-start !important; position: relative;}
.moreTxt:after{content:"Показать описание"; font-size:12px; text-decoration: underline;  position: absolute; display: flex; align-items: end; cursor:pointer; left: 0; bottom: 0; height:35px; width:100%; background-image:linear-gradient(to top,rgba(255,255,255,1),rgba(255,255,255,0.5))}

.tabsNav{margin-bottom:30px; padding:0; display: flex; list-style: none; width: 100%; justify-content: center;}
.tabsNav span, .tabsNav li{transition:0.3s;  border-bottom:1px #e1e1e1 solid; position:relative; font-weight:600; bottom:-1px; z-index:10; cursor:pointer; min-height:34px; padding:5px 10px; margin:0 10px; font-size:18px; border-radius:5px 5px 0 0;}
.tabsNav span.selected, .tabsNav span.selected:hover, .tabsNav li.selected, .tabsNav li.selected:hover{ border-bottom:3px #03B875 solid; padding-bottom:4px;}
.tabsNav span:hover, .tabsNav li:hover{border-bottom:2px #ccc solid; padding-bottom:4px;}
.tabsBox{padding:10px; position:relative; display:none; width: 100%;}
.tabsBox.open{display:block;}

.tabsNav li a{color:#333; text-decoration: none;}

.loginReg{display: flex; width:100%; max-width:400px; margin:0 auto; justify-content: center;}
.loginReg button{margin:0 0 10px 0; width: 100%;}
.tabsNav li sup{position:absolute; right:-5px; top:-5px; margin:0; display:block; font-size:12px; background:#da3b44; color:#fff; width:16px; height:16px; line-height:16px;  border-radius:8px; text-align:center;}

.tabsNav.mainNav{margin:0 0 20px 0; justify-content: flex-start;}

.main-info {
  margin: 20px 0;
  line-height: 150%;
}

.main-info h2 {
  font-size: 18px;
}

@media (max-width: 800px)
{
  .tabsNav{flex-direction: column;}
  .tabsNav li {margin:10px 5%;   text-align: center;}

  .tabsNav.mainNav{flex-direction: row;  width: 100%; justify-content: space-between;}
  .tabsNav.mainNav li{width: auto; margin:0;}
}


#filterForm{width: 100%; padding:0 10px; background: #03B875; border-radius: 14px; margin:10px 0;}
#filterForm .asi_name {border:none; }
#filterForm button{background:#fff; color:#333;}
.resultRed{ padding:20px; text-align:center;margin:0 0 20px 0; border:3px #de8888 solid; border-radius:10px;}
.resultGreen{ padding:20px; text-align:center; margin:0 0 20px 0; border:3px #03B875 solid; border-radius:10px;}

form .formResult .red, .alertRed{ padding:20px; text-align:center;margin:15px; border:3px #de8888 solid; border-radius:10px;}
form .formResult .green{ padding:20px; text-align:center; margin:15px; border:3px #03B875 solid; border-radius:10px;}


.folders.bigFolders{justify-content:center;}
.folders.bigFolders li a {width: 190px; height:150px;}
.folders.bigFolders li a img{width: 188px; height:148px;}

.folders{display: flex; margin:0; padding:0; list-style: none; flex-wrap: wrap; justify-content: center;}
.folders li{margin:10px; padding:0px; }
.folders li.current{border:5px #ececec solid; font-weight:bold;}
.folders li.current a strong{font-weight: bold;}
.folders li a{width:150px; height:120px; border:1px #ececec solid; border-radius: 10px; padding:10px; overflow:hidden; display: block;  position:relative; background:#fff; }
.folders li a img{width: 100%; height:118px; display: block; object-fit: contain; object-position: bottom center;}
.folders li a strong{position: absolute; background:rgba(255,255,255,0.7); display: block; font-weight: normal; text-decoration: none; padding:0 10px; color:#333; left: 0; top: 10px; width: 100%; text-align: center;}









        /* Адаптивный дизайн */
        @media (max-width: 480px) {
            #vFilter {
                width: 100%;
                padding: 20px 15px;
            }
            
            .filter-actions {
                flex-direction: column;
            }

          }










@media (max-width: 800px)
{
  .folders{justify-content: space-between;}
  .folders li{width:49%; margin:0 0 10px 0;} 
  .folders li a{width:100%;}

  h1{font-size:20px;}

  .caption{display: flex; align-items: center; width: 100%; padding:0px 0 10px 0; margin:0 0 0px 0;}

.caption a.backlink{font-size:12px;}
.caption a.backlink i{font-size:16px; margin-right:5px;}

}

ul.listProds{display: flex; list-style: none; width: 100%; flex-direction: column; margin:0; padding:0;}
ul.listProds li{display: flex; position:relative; width: 100%; transition:0.3s; box-shadow: 0px 0px 4px rgba(0,0,0,0.2);margin: 0 0 10px 0;border-radius: 10px;padding: 20px 20px 20px 20px;}
ul.listProds li:hover{box-shadow: 0px 0px 8px rgba(0,0,0,0.3);}

ul.listProds li .thumb{width:120px; height:90px;  display: flex; flex-direction: column; background:#eedfd3}
ul.listProds li .thumb img{width:120px; height:90px; object-position: center; object-fit: cover; margin:auto;}
ul.listProds li .noThumb img{filter: grayscale(100%); opacity:0.7;}

ul.listProds li .photoOn{background:none !important;}
ul.listProds li .photoOn img{width:120px; height:90px; object-position: center; object-fit: contain !important; margin:auto;}

ul.listProds li .thumb a{display: none;}
ul.listProds li .thumb a:first-child{display: block;}

ul.listProds li h2{font-size: 16px; margin:0; width: 100%; font-weight: normal; cursor:pointer; }
ul.listProds li h2:hover{text-decoration: underline;}
ul.listProds li  .videoObzor{margin-top:10px;}

ul.listProds li  .videoObzor a{color:#333; text-decoration: none;}
ul.listProds li  .videoObzor a i{color:#c64141}
ul.listProds li .details{display: flex; flex-direction: column;  padding-left:20px; width: 100%;  font-size: 12px;}
ul.listProds li .details>div{width: 100%; padding:5px 0; display: flex; align-items: center;}
ul.listProds li .details>div:first-child{border-left:none;}

ul.listProds li .details .txt{width: 100%; font-size: 13px; padding-right:40px }
ul.listProds li .details .company{width: 100%; padding-right:40px}
ul.listProds li .details .company a{margin-right:5px; color:#a2a2a2; text-decoration: none;}
ul.listProds li .details .company a:hover{color:#333;text-decoration: underline;}
ul.listProds li .details .company span:after{content:",";}
ul.listProds li .details .company span:last-child:after{content:"";}

ul.listProds li .details .prices{display: flex; padding:10px 0; }
ul.listProds li .details .prices span{display: flex; font-size:15px;  align-items: flex-end; }
ul.listProds li .details .prices span small{font-size:12px; color:#909090; padding:0 3px; font-weight: normal;  text-align: right;}
ul.listProds li .details h2{color:#359; text-decoration:underline;}
.add2cart{position:absolute; right:20px; bottom:20px;}


@media (max-width: 800px)
{
  ul.listProds li .thumb{width:100px; height:75px; }
ul.listProds li .thumb img{width:100px; height:75px; }
  ul.listProds li{padding: 10px 10px 10px 10px;}
  .add2cart{position:absolute; left:10px; right:auto; bottom:15px;}
  ul.listProds li .details{padding-left:10px;}
  ul.listProds li button{font-size:12px;}
article img{max-width: 100%; height:auto !important}
}


.blog_file a{display: flex; align-items: center; color:#fff;  text-decoration: none; font-size:16px; background:#03B875; border-radius: .5rem;  padding:10px;     min-height: 62px; max-height: 70px;}
.blog_file a i{font-size: 28px; margin-right:10px; color:#fff;}
.blog_file a i.fa-file-pdf{color:#fff}
.blog_file a i.fa-file-word{color:#fff}
.blog_file a i.fa-file-excel{color:#fff}

article p:first-of-type{margin-top:0;}

.blogPostPicture{float:right; width:50%; max-width:300px; margin:0 10px 10px 0;}
.blogPostPicture img{display: block; width:100%;}
@media (max-width: 400px)
{
  .blogPostPicture{float:none; width:100%;max-width:100%;}
}

form{transition:0.3s;}
#textFinder{width:100%;}
form.textFinder{margin:0; width:0 !important; max-height:0; overflow: hidden;}



.userBar{width: 100%; display: flex; justify-content: center; background: #fff; padding:20px; border-radius: 20px; box-shadow: 0 0 50px #fff; margin:0 0 20px 0;  }
.userBar a{text-decoration: none; color:#333; font-size: 18px;}
.userBar a i{margin-right:5px;}
#cartShort{background: #fff; height:100%; position: relative; border-radius: 20px;  box-shadow: 0 0 50px #fff; }
aside.cart{width:360px; background:none; overflow:hidden; min-height:300px; position: sticky; top:30px;  padding:0; box-shadow: none; overflow:visible}

aside.cart .cart-place{position: absolute; z-index: 1; padding:10px 10px 20px 10px; left: 0; top: 0; width: 100%; height: 100%; overflow-y: auto;}

.cart-total{position: absolute; z-index: 10;  text-align: center;  padding:10px 20px; bottom:0; left:0; width: 100%;  font-size: 20px;;}

.cart-caption{ z-index: 10; display: flex; flex-direction: column; position: relative; left: 0; top: 0;  box-shadow: 0 0 30px #fff; padding: 10px 20px; width:100%;}
.cart-caption strong{font-size:24px;color:#555; }


.cart-caption-tabs{background:#fff; overflow:hidden; margin:5px 0; width: 100%; font-size: 12px; display: flex; border-radius: 5px; border:1px #ececec solid;}


.cart-caption-tabs span{width: 50%; background:#fff; color:#333; box-shadow: none; justify-content: center; align-items: center;  display: flex; padding:4px; text-align: center;}
.cart-caption-tabs span.current{box-shadow:inset 1px 1px 3px rgba(0,0,0,0.1); background:#e1e1e1;}
.cart-caption-tabs span:first-child{border-right: 1px #ececec solid;}

.short_cart-clubName strong{font-size:16px; text-decoration: underline;}

.short_cart-clubTotal{justify-content: space-between; display: flex; align-items: center !important; font-size:14px;}

.short_cart-clubTotal button{padding:5px 10px;  height:auto; font-size: 14px;}

.cart ul{display: flex; flex-direction: column; list-style: none; margin:0; padding:0;}
.cart ul ul{margin:0 0 0px 0;}
.cart .cart-prodItem{padding:10px 0; position:relative; align-items: flex-start;  border-bottom:0px #ececec solid; font-size: 12px; display: flex;}

.short_cart-clubName{box-shadow: 0px 0px 4px rgba(0,0,0,0.2);margin:0 0 10px 0; border-radius: 10px; padding:10px;}

.cart{width: 100%; max-width: 600px; margin:0 auto;} 
.cart .cart-prodItem:last-child{border:none;}

.cart ul li a{color:#333; display: block; text-decoration: none; padding-bottom: 0px;}

.cart ul li img{width:60px; height:60px; object-position:top; object-fit: contain; margin:0 10px 0 0;}
.cart-prodInfo{width: 100%; display: flex; flex-direction: column;}

.cart-calc{width: 100%; padding:8px 0; align-items: center;  display: flex; justify-content: space-between;}

.cart-calc-q{font-size:16px; display: flex; align-items: center; padding:3px 5px; background:#fff; border-radius: 5px; box-shadow: 1px 1px 3px rgba(0,0,0,0.1);}
.cart-calc-q i{cursor: pointer; font-size:20px;  text-align: center; width:20px; color:#969696; font-style: normal; }
.cart-calc-q i:hover{color:#333;}
.cart-calc-q .q{padding:0 10px;}

.cart-company{color:#969696}

.cart-calc-price{font-size:16px; color:#bbb; display: flex; align-items: flex-end;}
.cart-calc-price b{color:#333; font-weight: normal;}
.cart-calc-price small{font-size: 12px; margin-left:3px;}

.cart-prodInfo{display: flex; flex-direction: column;}

#order{padding:20px 0}
#order>li{box-shadow: 0px 0px 4px rgba(0,0,0,0.2);margin:0 0 10px 0; border-radius: 10px; padding:10px;}
#order .orderTotal{box-shadow:none; font-size:24px;}

#modal{position:fixed; width: 0; height: 0; left: 0; top: 0; z-index: 9999; overflow:hidden; display: flex; opacity:0; transition:0.5s opacity;}
#modal .closer{position: absolute; right: 17px;top: 20px; font-size:28px;}
#modal.open{position:fixed; width: 100%; height: 100%;left: 0; top: 0; z-index: 9999; display: flex; opacity:1;}
#modal .modal-blacker{background:rgba(0,0,0,0.7); z-index: 1; position:absolute; left: 0; top: 0; width: 100%; height: 100%; }
#modal .modal-content{margin:auto; width:90%; z-index: 2; position: relative; max-height: 90%;  overflow-y:auto;  max-width:500px;  padding:20px; background:#fff; border-radius: 20px;}
.form{display: flex; flex-direction: column;}
.form .row {
  padding: 15px 0px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.form .line {
  padding: 10px 0px;
  height: 100%;
  display: flex;
}

.form .line button{margin-left:10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}

.form .row span {

  padding: 0 0 8px 0;
  display: block;
  font-size:12px;
}
.form .row input, .form .line input, .form .row select, .form .row textarea {
  height: 36px;
  outline: none;
  padding: 0px 10px;
  line-height: 36px;
  font-size: 16px;  
  border-radius: 10px;
  border: 1px #bbb solid;
  width: 100%;
}
.form .row textarea{height:72px;  line-height: 1.4;}
.form .row:first-child {
  border-top: none;
}

.sorter{align-items: center;}

/* .mySelect{position:relative; overflow:hidden; background:#03B875; transition:0.3s; text-decoration:none; color:#fff; border:none; border-radius: 10px;  cursor:pointer; height: 28px; padding:0px 10px; font-size: 12px; display: flex; align-items: center;  margin-left:20px;}
.mySelect select{opacity:0;  z-index: 10; position:absolute; left:0; top:0; width: 100%; height: 100%; margin-left:25px; }
.mySelect i{margin-right:5px;} */





.custom-select-wrapper {
    font-family: 'Inter', sans-serif;
    margin: 20px 0;
    width: 260px;
    position: relative;
}

/* Основной контейнер */
.mySelect {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1.5px solid #e9ecef;
    border-radius: 16px;
    padding: 12px 18px;
    cursor: pointer;
    position:relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(3, 184, 117, 0.05); /* Легкий зеленый оттенок в тени */
    font-size: 14px;
    color: #1e293b;
    gap: 10px;
    min-height: 48px;
}

/* Эффект при наведении - ВОЗВРАЩАЕМ ФИРМЕННЫЙ ЗЕЛЕНЫЙ */
.mySelect:hover {
    border-color: #03B875;
    box-shadow: 0 8px 20px -8px rgba(3, 184, 117, 0.35); /* Усиливаем зеленую тень */
    transform: translateY(-2px);
}

/* Эффект при открытии */
.mySelect.active {
    border-color: #03B875;
    box-shadow: 0 0 0 4px rgba(3, 184, 117, 0.15); /* Зеленое свечение */
}

/* Иконка списка - ВОЗВРАЩАЕМ ЗЕЛЕНЫЙ */
.mySelect .fa-list {
    color: #03B875;
    font-size: 16px;
    filter: drop-shadow(0 2px 4px rgba(3, 184, 117, 0.2));
}

/* Текст */
.mySelect span {
    flex: 1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Стрелка */
.mySelect .arrow {
    color: #94a3b8;
    font-size: 14px;
    transition: transform 0.3s ease;
}

/* Поворот стрелки - СТРЕЛКА ТОЖЕ СТАНОВИТСЯ ЗЕЛЕНОЙ */
.mySelect.active .arrow {
    transform: rotate(180deg);
    color: #03B875;
}

/* Скрываем нативный select */
.mySelect select {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

/* КАСТОМНЫЙ ВЫПАДАЮЩИЙ СПИСОК */
.custom-options {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 20px;
    border: 1px solid rgba(3, 184, 117, 0.1); /* Тонкая зеленая граница */
    box-shadow: 0 25px 50px -12px rgba(3, 184, 117, 0.25); /* Зеленая тень */
    z-index: 1000;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px) scale(0.98);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    transform-origin: top center;
}

/* Стилизация скролла в фирменном цвете */
.custom-options::-webkit-scrollbar {
    width: 6px;
}

.custom-options::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

.custom-options::-webkit-scrollbar-thumb {
    background: #03B875;
    border-radius: 10px;
}

.custom-options::-webkit-scrollbar-thumb:hover {
    background: #029c5f; /* Темнее при наведении */
}

/* Показываем дропдаун */
.custom-options.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Стрелочка дропдауна - ТОЖЕ ЗЕЛЕНАЯ */
.custom-options::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 20px;
    width: 12px;
    height: 12px;
    background: white;
    transform: rotate(45deg);
    border-left: 1px solid #03B875; /* Зеленая граница */
    border-top: 1px solid #03B875; /* Зеленая граница */
    border-radius: 3px 0 0 0;
    z-index: -1;
}

/* Стиль опций */
.custom-option {
    padding: 14px 18px;
    font-size: 14px;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
    border-left: 4px solid transparent;
    position: relative;
}

/* Индикатор выбора - ЗЕЛЕНЫЙ */
.custom-option::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: #03B875;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s;
}

/* Hover эффект - С ФИРМЕННЫМ ЗЕЛЕНЫМ */
.custom-option:hover {
    background: linear-gradient(90deg, rgba(3, 184, 117, 0.05) 0%, #ffffff 100%);
    border-left-color: #03B875;
    color: #03B875;
    font-weight: 500;
    padding-left: 22px;
}

/* Выбранная опция - ЗЕЛЕНАЯ */
.custom-option.selected {
    background: rgba(3, 184, 117, 0.05);
    color: #03B875;
    font-weight: 600;
    border-left-color: #03B875;
}

.custom-option.selected::before {
    opacity: 1;
}

/* Разделитель */
.custom-option:not(:last-child) {
    border-bottom: 1px solid rgba(3, 184, 117, 0.1); /* Зеленый разделитель */
}

/* Адаптивность */
@media (max-width: 768px) {
    .custom-select-wrapper {
        width: 100%;
    }
}

/* Стили для открытия наверх */
.custom-options.dropdown-top {
    top: auto;
    bottom: calc(100% + 8px);
    transform-origin: bottom center;
}

.custom-options.dropdown-top::before {
    top: auto;
    bottom: -6px;
    border-left: none;
    border-top: none;
    border-right: 1px solid #03B875;
    border-bottom: 1px solid #03B875;
}









.clubCard{width: 100%; display: flex;  padding:20px 0; font-size:14px;}
.clubCard>div{display: flex; flex-direction: column; width:100%;}
.clubCard-left>div{padding: 0 0 30px 0;}
.clubCard-right>div{padding: 0 0 30px 0;}
.checks{display: flex; }
.checks>div.label{position:relative; }
.checks>div.label label{position:relative; background:#fff; color:#03B875; border:1px #03B875 solid; transition:0.3s; text-decoration:none; border-radius: 10px;  cursor:pointer; height: 28px; padding:0px 10px; font-size: 12px; display: flex; align-items: center;  margin-left:20px;}
.checks>div.label input:checked+label{background:#03B875; color:#fff;  border:1px #03B875 solid;}

.checks>div.label label i{margin-right:5px;}
.checks>div.label label .fa-check-circle{display: none;}
.checks>div.label input:checked+label .fa-check-circle{display: block;}
.checks>div.label input:checked+label .fa-circle{display: none;}

.checks>div.label input{width:0px; opacity:0; height:0px; position:absolute;}

.clubCard-left>div>i{color:#555;}


.clubCard-cap{display: block; font-size:16px; padding-bottom:5px;}
.clubCard>.clubCard-right{padding-left:40px;}

#clubAbout{max-height:100px; transition:1s; overflow:hidden; position: relative;}
#clubAbout.open{max-height:3000px;}
#clubAbout .more{position:absolute; display: flex; justify-content: center; align-items: end; left:0; bottom:0; width: 100%;  height:60px; background-image:linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0.4));}
#clubAbout .more span{text-decoration: underline; cursor:pointer; color:#004071}

#clubAbout.open .more{display:none;}

ul.phones{margin:0; padding:0; list-style: none;}
ul.phones li a, ul.phones li i{font-size:26px; color:#333; text-decoration: none;} 

#modal .clubCard{flex-direction: column;}
#modal .clubCard>.clubCard-right{padding-left:0px; order:1;}
#modal .clubCard>.clubCard-left{padding-left:0px; order:2;}
#modal .clubCard-right ul.phones li a{font-size:26px;}
#modal .clubCard-right ul.phones li .fab{font-size:26px;}
@media (max-width: 800px)
{
  .clubCard{flex-direction: column;}
  .clubCard>.clubCard-right{padding-left:0px; order:1;}
  .clubCard>.clubCard-left{padding-left:0px; order:2;}
  .clubCard-right ul.phones li a{font-size:24px;}

  .blog_file a{margin:5px 0 20px 0; }
}

i.fa-viber{color:#59267c !important}
i.fa-telegram{color:#0099e5  !important}
i.fa-whatsapp-square{color:#20B038  !important}

.clubCard-right ul.phones li a{color:#333; font-size:18px; text-decoration:none;}
.clubCard-right ul.phones li .fab{font-size: 18px; margin:0 0 0 5px;}
.clubCard-right ul.phones li a small{font-size:18px;}
.listClubPage{display: flex; width: 100%;}
#map{width:50%; height:600px; margin-left:20px; margin-top:20px;}
ul.listClub{display: flex; width:100%; flex-direction: column; list-style: none; margin:20px 0; padding:0;}
ul.listClub li{box-shadow: 0px 0px 4px rgba(0,0,0,0.2); margin-bottom:10px; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; padding:10px;}
ul.listClub li h2{margin:0; font-size:16px;}
ul.listClub li h2 a{text-decoration:none; color:#333;}
ul.listClub li small{color:#999; display: block; padding-top:5px;}

.pgs{display: flex; justify-content: center;}
.pgs ul{padding:0; margin:20px 0; list-style: none; display: flex; flex-wrap: wrap; flex-direction: row;}
.pgs ul li{padding:5px;}
.pgs ul li a{display: block; width: 22px; height:22px; display: flex; text-decoration: none; color:#333; align-items: center; justify-content: center;  border-radius: 3px; box-shadow: 1px 1px 3px rgba(0,0,0,0.1);}
.pgs ul li.current a{box-shadow: none; background:#03B875; color:#fff;}

footer{max-width: 1600px; margin:0 auto;}
footer .wrap{max-width:100%; padding:0 380px 0 300px;}
footer .wrap p{width: 100%;font-size:12px; color:#9e9e9e; }
footer{flex-direction: column;}
footer .col{width:25%; text-align-last: left;}

footer .col ul{display: flex; flex-direction: column; margin:0; padding:20px 0; list-style: none;}
footer .col ul li a{color:#424242; text-decoration:none; font-size:12px; }
footer .col ul li a:hover{text-decoration:underline;}
footer .col ul li{padding:5px 0; display: flex; align-items: center;}
footer .col ul li i{font-size: 20px; line-height:16px; margin-right:5px; width:30px;  display: flex; justify-content: center; }
footer .col ul li i.fa-youtube{color:#da3b44}
footer .col ul li i.fa-instagram{color:#a40e61}
footer .col ul li i.fa-telegram{color:#308dd4}
footer .col ul li i.fa-user-circle{width:auto;}
button.cartBtn{display: flex; border:none; transition:0.3s; border-radius: 50%; width: 40px; height: 40px; margin:0 auto; background:#03B875; align-items: center; justify-content: center; color:#fff; font-size:18px;}
button.cartBtn:hover{background:#018f5b;}



button.cartBtn.del{margin:0; position:absolute; right:0; top:0; width: 26px; height: 26px; background:none; color:#c64141;}

.tableList{border-collapse: collapse; color:#333; border:1px #bbb solid;  border-radius: 10px;}
.tableList tr td{padding:10px; border:1px #bbb solid; font-size: 12px;}
.tableList tr td{background-color: rgb(242, 242, 242);}
.tableList tr:nth-child(even) td{background-color:#fff;}

.tableList tr:first-child td{font-size: 14px; font-weight: bold;;}

.header__aside {
    display: flex;
    text-align: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .header__aside li {
    display: block;
  }
  .header__aside li a {
    display: flex;
    height: 45px;
    color: #646462;
    text-decoration: none;
    padding: 7px 15px 0 15px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .header__aside li a img {
    display: block;
    height: 40px;
  }
  
  .header__aside li:last-child a {
    
  }
  
  .header__aside li a span {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
  }
  .header__aside li a span:first-child {
    height: 40px;
  }
  .header__aside li a i {
    font-size: 24px;
    transition: 0.5s;
  }
  
  body.showMenu .header__aside li a i {
    transform: rotate(90deg);
  }




.blog{display: flex; flex-wrap: wrap; justify-content:space-around; margin:20px 0 0 0; padding: 0; list-style: none; width: 100%;}
.blog li{width:24%; display: flex; flex-direction: column; height:200px; margin:0 0 20px 0; position:relative; border-radius: 10px;  overflow:hidden;} 
.blog li a{display: block; height:200px; background:#000;  position: relative;}
.blog li .img img{display: block; width:100%; height:200px; object-fit: cover; opacity:0.5; transition:0.3s; object-position: center;}
.blog li .img{width: 100%; height:200px; overflow: hidden; position:relative; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.blog li a:hover img{opacity:0.8}
.blog li h3{font-size: 20px; color:#fff;  text-align: center; text-shadow: 0 0 3px #000; margin:0; padding:10px; line-height: 1.2; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top:0%; height:100%; overflow:hidden; width: 100%; }

.blog_btn {
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding-bottom: 30px;
  flex-direction: column;
}

@media (max-width: 1900px)
{
  .blog li{width:32%; }
}
@media (max-width: 1200px)
{
  .blog li{width:49%; }
}
@media (max-width: 440px)
{
  .blog li{width:100%; }
}

header{display:none;}

@media (max-width: 1400px)
{

}

@media (max-width: 1150px)
{

}

@media (max-width: 1400px)
{

aside.asideMenu{position:fixed; width: 100%; height: 100%; max-width:400px; z-index: 100; border-radius: 0; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); background: rgba(255,255,255,0.95);
left:-800px; transition:0.5s;  top:0; padding-top:80px; overflow-y: auto;}
aside.asideMenu ul li:first-child{border:none;}

.showMenu aside.asideMenu{left:0;}

body{padding:5px;}
article{margin-left:0;}

footer .wrap{padding-left:0; padding-right:0; flex-wrap: wrap;}


header .fa-times{color:#c64141; display: none;}
.showMenu header .fa-bars{display:none;}
.showMenu header .fa-times.f1{display:block;}

.showCart header .fa-shopping-bag{display:none;}
.showCart header .fa-times.f2{display:block;}

header .fa, header .fas{width: 20px;}

.checks>div.label label{margin-left:4px; padding:0 4px; font-size: 12px;}
.checks>div.label:first-child label{margin-left:0; padding:0 4px; font-size: 12px;}
.checks>div.label:first-child label i{margin-right:3px;}
.mySelect{margin-left:4px;}
.mySelect i{margin-right:3px;}
header{padding: 5px 20px; position:relative; 
  display: flex;z-index: 300;
  background: #fff; align-items: center; transition:0.3s;
  border-radius: 20px; width: 100%; justify-content: space-between;}

  .showMenu header, .showCart header{box-shadow: 0px 0px 4px rgba(0,0,0,0.2);}

  header a.logo{width: 120px; height:40px; background-size: contain;}
aside a.logo{display:none;}
  header button,   header button:hover{background:none; display: flex; align-items: center; color:#333; padding:0; font-size: 12px;}
  header button i{font-size:22px;}

  header button:first-child i{margin-right:7px;}
  header button:last-child i{margin-left:7px;}
  header button:last-child{opacity:0;}
  
}

@media (max-width: 800px)
{

aside.cart{position:fixed; width: 100%; max-width:400px; height: 100%; max-height: 100% !important; z-index: 100; background: rgba(255,255,255,0.95);
  right:-800px; transition:0.5s;  top:0; padding-top:80px; overflow-y: auto;}
  .showCart aside.cart{right:0;}


article{margin:0 !important; padding:10px;}
body{padding:5px;}
footer .wrap{padding-left:0; padding-right:0;  flex-wrap:wrap;}
footer .wrap .col{width:50%;}
header button:last-child{margin-left:7px; opacity:1;}
}


  @media (max-width: 1200px)
{
  ul.listRelateCats li a{font-size:12px; }


  .flex-mobileCols{flex-direction: column !important;}
  .flex-mobileCols>div{width: 100%;}
}