.listing.multimedia .ttl .more { float: left; display: inline-block; width: 80px; height: 40px; background: #0277bd; padding: 0 10px; color: #fff;   font-size: 13px; line-height: 3 }
.listing.multimedia .ttl .more:hover { background: #1b92d9 }
.listing.multimedia .ttl .more span { float: left; margin-right: 10px }
.listing.multimedia .ttl .more .icon-more:before { content: "h"; color: #fff; font-size: 12px; line-height: 3.4 }
.listing.multimedia .subCat { display: inline-block; width: 100%; float: right; margin-bottom: 20px }
.listing.multimedia .subCat:last-child { margin-bottom: 0 }

.listing ul li { margin-bottom: 20px; width: calc((100% - 40.1px) / 3); margin-left: 20px; height: auto; position: relative; border: 1px solid #ddd; overflow: hidden; background: #fff; display: inline-block; float: right }
.listing ul li.gap { opacity: 0; height: 0; display: inline-block }
.listing ul li .secName { padding: 2px 10px;   font-size: 13px; color: #fff; background: rgba(0,0,0,0.7); position: absolute; top: 0px; right: 0px; z-index: 1 }
.listing ul li .secName{padding: 0 0 0 10px; font-size: 13px;color: #fff;background: rgba(0,0,0,0.7);position: absolute;top: 0px;right: 0px;z-index: 1;height: 30px;line-height: 2.3;left: 0;width: 30px;height: 25px;overflow: hidden;padding: 0;right: auto;}
.listing ul li .secName .icon {background-color: #000;width: 30px;height: 25px;position: absolute;top: 0;margin-left: 0;right: 0;}
.listing ul li .secName .icon.icon-album:before{content: 'n';color: #fff;font-size: 13px;float: left;left: 50%;position: absolute;top: 50%;transform: translate(-50%,-50%);}
.listing ul li .secName .icon.icon-name:before{content: 'm';color: #fff;font-size: 8px;float: left;left: 50%;position: absolute;top: 50%;transform: translate(-50%,-50%);}
.listing ul li .desc{padding:10px }

@media screen and (min-width:1024px) and (max-width:1359px) {
    .listing ul li { width: calc((100% - 20.1px) / 2);margin-left: 20px;float: right;}
    .listing ul li:nth-child(3n) {margin-left: 20px;}
    .listing ul li:nth-child(2n) {margin-left: 0;}

}




@media only screen and (max-width: 1023px) {
       
    .listing { width: 100%; margin-left: 0 }
    .listing ul li { width: 100%; margin-left: 0; margin-bottom: 10px }
    .listing ul li .secName { left: 0; top: 0; background: none; color: #0277bd; padding: 0 }
    .listing ul li a .imageCntnr { width: 150px; padding-bottom: calc((150px * 67)/ 100); float: right; }
    .listing ul li .desc { float: right; position: relative; width: calc(100% - 150px); height: auto; display: inline-block; background: #fff; padding: 7px 10px; margin-top: 30px }
    .listing ul li .desc p { color: #000; position: relative; padding: 0; height: 48px }
    .leftSide { width: 100% }

}

@media screen and (min-width: 320px) and (max-width: 767px) {

 
    .leftSide { width: 100% }
    .listing { margin-left: 0; width: 100%; }
    .listing ul { min-height: unset }
    .listing ul li .secName { right: 0; top: 0; font-size: 11px }
    .listing ul li a .imageCntnr { width: 120px; padding-bottom: calc((120px * 67)/ 100) }
    .listing ul li .desc { width: calc(100% - 120px); margin-top: 24px; padding: 0 10px }
    .listing ul li .desc p { font-size: 12px; height: 54px; overflow: hidden; line-height: 1.6; margin-bottom: 0 }
 
}