#pics { padding: 0px;flex:1 }
#pics li {float:left; list-style: none; box-sizing:border-box;position:relative;overflow:hidden;border:4px solid #fff;}
@media screen and (min-width:1300px) {
    #pics li{width:20%}
}
@media screen and (max-width:1300px) {
    #pics li { width: 25% }
}
@media screen and (max-width:1100px) {
    #pics li { width: 33% }
}
@media screen and (max-width:900px) {
    #pics li { width: 50% }
}
@media screen and (max-width:700px) {
    #pics li { width: 100% }
}

#pics li:hover .shadow { opacity: 1; }
#pics li .shadow { z-index: 10; width: 100%; height: 100%;opacity:0; background-color: rgba(0,0,0,0.6); position: absolute;text-decoration:none;}
#pics li img {z-index:0; width: 100%; height: auto;vertical-align:bottom;}
#pics li .shadow > div { display:table;width:100%;height:100%;}
    #pics li .shadow > div > div { display: table-cell; vertical-align: middle; text-align: center;}
        #pics li .shadow > div > div .pic_CName { color: white; }
        #pics li .shadow > div > div hr{background-color:#aaa;width:40%;height:2px;border:0;}
        #pics li .shadow > div > div .pic_EName { color: white; }

body.black #pics li { border-color:#000 !important;}