.v_div{width:23%; background-color:#fff;background-repeat:no-repeat;float:left;margin:0 1% 25px 0;
       border-radius:8px;box-sizing:border-box;position:relative;padding:0 0 14px 0;box-shadow:1px 1px 3px #ccc;height:300px}

/*.v_div:nth-child(3n+1){ clear:both}*/

 
.vi{display:block;padding:11px;line-height:1.2;font-size:.9em}


#vbody h2{clear:both;padding:20px 0 0 0}
#vbody h2 a {
  display:block;position:relative; 
}
    #vbody h2 a:after {content:"View All";position:absolute;top:12px;right:60px;font-size:medium;color:#333;font-weight:normal
        
    }
.v_info {
    position: absolute;
    bottom: 9px;left:9px;color:#999;padding:11px 22px;border:1px solid #ccc;border-radius:5px
} 


.v_fav {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    color: transparent;
    border: 0;
   
    border-radius: 5px
}

    .hrt:before,
    .hrt:after {
        position: absolute;
        content: "";
        left: 20px;
        top:12px;
        width: 12px;
        height: 20px;
        background: #e8e8e8;
     
        border-radius: 12px 12px 0 0;
      
        transform: rotate(-45deg);
     
        transform-origin: 0 100%;
    }

    .hrt:after {
        left:9px;
 
        transform: rotate(45deg);
     
        transform-origin: 100% 100%;
    }


.v_faved .hrt:after,.v_faved .hrt:before,   .v_fav:hover .hrt:after, .v_fav:hover .hrt:before {
    background: #fc2e5a
}


 .v_img{width:100%;height:auto;border-radius:6px;margin-bottom:9px}
 .v_cts{ margin-right:55px}
.v_ct{padding:5px 9px;background-color:#f4f4f4;display:inline-block;font-size:.8em;margin:9px 0 0 11px;border-radius:4px}

#v_catcb, #filtercb {
    position: absolute;
    opacity: 0
}
#v_cat {
    display: none;
    position: absolute;
    z-index: 5;
    background-color: #fff;
    padding: 9px;
    border-radius: 5px;
    box-shadow: 2px 2px 20px #333;margin-top:-11px;width:280px
}
.v_cat{display:block;margin:4px 0 4px 0;padding:12px 22px}

#filtermask,#v_catmask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #aaa;
    z-index: 4;
    opacity: .6
}


#v_catcb:checked ~ #v_cat, #v_catcb:checked ~ #v_catmask {
    display: block
}




.f_drop {
    display: inline-block;
    padding: 11px 40px 11px 11px;
    background-color: #eee;
    border-radius: 8px;
    margin-bottom: 20px;
    color: #777;
    z-index: 4;
    position: relative
}
    #filters{margin-left:20px }

.f_drop:after {
    content: "┛";
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 13px
}
#v_catcb:checked ~ #v_filterdiv  #v_caticon{background-color:#333;color:#eee}


#v_catcb:checked ~ #v_filterdiv .f_drop:after {
    transform: rotate(225deg);
    top: 7px
}
#v_catcb:checked ~ #v_filterdiv #filters {
    z-index: 3
}


#v_filterdiv {
    max-width: 1030px
}
#v_myfav {
    position: relative;
    padding: 9px 4px 9px 40px;
    float: right
}

 





.v_myfav {
    display: inline-block;
    margin: 0 20px 20px 0
}
.v_myfav img{border-radius:6px}




#filtercancel {
    margin: 9px 20px 9px 20px;background-color:#eee;padding:12px;border-radius:5px;color:#888;font-size:.9em
}

#filterlist {
    display: none;
    background-color: #fff;
    position: absolute;
    z-index: 7;
    box-shadow: 1px 1px 20px #333;
    border-radius: 4px;
    width: 95%;
    padding: 11px;
    box-sizing: border-box;
    max-width: 900px
}
.v_fcb {
    position: absolute;
    opacity: 0
}


.v_fcb:checked + label{background-color:#159cea;color:#fff}

#applyfilter {
    padding: 12px 22px;
    border-radius: 5px;
    margin: 12px;cursor:not-allowed; background-color:#bddef5;font-weight:bold;
}
.v_fcb:checked ~ #applyfilter {
    background-color: #000;
    color: #fff;cursor:pointer
}



.v_filteritem {
    display: inline-block;
    padding: 11px;
    margin: 9px;
    border-radius: 4px
}
.v_filteritem:hover {background-color:#eee;border-radius:4px
}

#filtercb:checked ~ #v_filterdiv #filterlist, #filtercb:checked ~ #filtermask {
    display: block
}
#filtermask {z-index:5
}

#filtercb:checked ~ #v_filterdiv #filters {
    z-index: 5;
    background-color: #333;
    color: #eee
}

#filtercb:checked ~ #v_filterdiv #filters {

}






@media(max-width:1000px) {
    .v_div{width:32%; }
        .v_div:nth-child(4n+1) {
            clear: none
        }
    .v_div:nth-child(3n+1) {
        clear: both
    }
         
}
@media(max-width:600px) {
    .v_div {
        width: 48%;
    }

        .v_div:nth-child(4n+1) {
            clear: none
        }

        .v_div:nth-child(3n+1) {
            clear: none
        }
}