#matcats ul{list-style:none;margin:0;max-width:300px;padding:0;width:100%}
#matcats ul>li{position:relative}
#matcats ul>li p{margin:0}
#matcats ul>li p a{background:#0177C1;color:#fff;display:block;padding:15px 15px 15px 30px;text-decoration:none}
#matcats ul>li a[href="#foo"]{height:0;position:absolute;top:0;width:100%; font-size:0;}

#matcats ul>li a[href="#foo"]::before{border:solid black;border-width:0 2px 2px 0;content:"";display:inline-block;padding:4px;position:absolute;right:7px;top:6px;transition:transform .5s ease;transform:rotate(45deg);z-index:1}

#matcats ul>li ul{max-height:0;overflow:hidden;transition:max-height .6s ease-out}

#matcats ul>li ul li a{background:  #F8F8F8;;    display: block;    color: #fff;    text-decoration: none;    padding: 5px 5px 5px 15px;}

#matcats ul>li ul li a:hover{font-weight:bold;}

#matcats ul:target{    max-height: 800px;    transition: max-height 2s ease-out;    background:  #F8F8F8;    padding-bottom: 10px;    position: relative;    z-index: 9;}

#matcats :target+a[href="#foo"]{background: #F8F8F8;; font-weight:bold;  font-size: 0.833vw;    padding: 0px 15px 25px 15px;    text-decoration: none;  color: #0683D2;z-index: 999;}

#matcats :target+a[href="#foo"]::before{transform:rotate(224deg)}

#catalog_left #matcats ul{
    max-width: 100%;
    background-color: #F8F8F8;
    color: black;
}

#catalog_left #matcats ul>li p a{
    background: none;
    color: black;
    padding: 6px 0 6px 0px;
    font-size: 0.833vw;
}
#catalog_left #matcats ul>li ul li a{
    background: none;
    color: black;
    font-size: 0.833vw;
}

#matcats{
    padding: 1.042vw;
}

.hidden-filters.filter_part p:hover{
   background-color: #fff;
   padding: 0 2px 0 2px;
}

@media screen and (max-width: 990px){
   #catalog_left #matcats{
       background: #F8F8F8;
       display: none;
       padding: 16px 16px 0 16px;
   } 
   #matcats .section{
       font-size: 16px;
   } 
   #catalog_left #matcats ul>li p a{
       font-size: 16px;
       padding: 6px 1.042vw 6px 1.042vw;
   }
   #matcats :target+a[href="#foo"]{
       font-size: 16px;
   }
   #catalog_left #matcats ul>li ul li a{
       font-size: 16px;
   }
   #matcats ul>li a[href="#foo"]::before{
       right: 15px;
   }
   #matcats .filter-item{
       padding: 0 1.042vw;
   }
   #catalog_left #matcats ul{
       /* height: 2500px; */
      overflow-y: scroll;

   }
}