.filters {
    margin: 0 0 4px;
    padding: 0;
    text-align: center;
    width: 100%;
}
.filters a {
    border-radius: 5px;
    display: inline-block;
    font-size: 14px;
    margin: 0 5px 10px;
    padding: 2px 12px 4px;
    font-weight: bold;
}
.filters a:hover, .filters a.active {
  background: #510b0c;
  color:#fff;
}
.filter-box ul {
    border: 2px solid #e7e7e7;
    list-style: outside none none;
    margin: 0;
    height: auto !important;
    padding: 0 0 8px;
    position: relative;
}
.filter-box ul li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box;  float: left;
    font-size:13px; font-weight: normal; margin:8px 0 0 8px; background: #e9e9e9; padding: 5px; width:211.2px !important; position: static !important; display: inline-block !important;}    
.filter-box ul li img { width:100%; height: 100%; background:#000; }
.filter-box ul li.tb-hidden img { opacity:0.3; filter:alpha(opacity=30); transition:all 1s ease; }
.filter-box ul li.tb-hidden.active img { opacity:1; filter:alpha(opacity=100); transition:all 1s ease; }

.filter-box ul li span.mask { display:none; transition:all 1s ease; -webkit-transition:all 1s ease; color: #fff; padding: 0; position: absolute; /* left: 5px; right: 5px; bottom: 5px; top: 5px; */     width: 214px; height: 160px;  top: inherit;   margin-top: 11px;}
.filter-box ul li.active:hover{opacity:0.8;}
/*.filter-box ul li span.mask:before { left:0; top:0;height:100%; width:100%; background:#000; opacity:0.3; filter:alpha(opacity=30);  position: absolute; content:"";}*/
.filter-box ul li span.mask a {color: #fff; display: table; font-size: 14px;  font-weight: bold; height: 100%;
  line-height: normal; vertical-align: bottom; width: 100%; }
.filter-box ul li span.mask a:hover {color: #fff; }
.filter-box ul li span.mask a, .filter-box ul li span.mask span.title { margin:0 !important; position:relative; }
.filter-box ul li span.mask span.mask-inner { display: table-cell; height: 100%;  padding: 10px;  vertical-align: bottom; width: 100%; }
.filter-box ul li:hover span.mask, .filter-box ul li.tb-hidden.active:hover span.mask { display: block; transition:all 1s ease; -webkit-transition:all 1s ease; }
.filter-box ul li.tb-hidden span.mask, .filter-box ul li.tb-hidden:hover span.mask { display: none; }
.fancybox-inner span.title { margin: 5px 0 !important; }
.fancybox-inner .popup-content img { max-width:100%; }

.page-template-full-width .filter-box ul li {width: 301px !important;}

@media only screen and (max-width: 768px){
 .filter-box ul li { width:29.3vw !important; height:29.3vw !important; }
    .page-template-full-width .filter-box ul li {width:30.9vw !important; height:30.9vw !important;}
}
@media only screen and (max-width: 640px){
  .filter-box ul li { height:30vw!important; width:30vw!important; }
    .page-template-full-width .filter-box ul li {width: 30vw !important; height: 30vw!important;}
}
@media only screen and (max-width:480px) {
  .filter-box ul li {
      height: 40.5vw!important;
      width: 44.5vw!important;
  }
     .page-template-full-width .filter-box ul li {width:44.4vw !important; height:40.4vw !important;}
}

@media only screen and (max-width:414px) {
  .filter-box ul li {
      width: 43.6vw!important;
  }
     .page-template-full-width .filter-box ul li {width: 43.6vw !important; height: 40.6vw!important;}
}
@media only screen and (max-width:320px) {
  .filter-box ul li {
    width: 86vw!important;
    height: 70vw!important;
  }
     .page-template-full-width .filter-box ul li {width: 86vw !important; height: 70vw!important;}
}