.listing { display: inline-block; float: right; margin-left: 20px; width: calc(100% - 320px); margin-bottom: 50px }
.listing.speed{min-height:900px}
.listing ul { text-align: justify; min-height: 1212px }
.listing.multimedia ul { min-height: unset }
.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:nth-of-type(3n) { margin-left: 0 }
.listing ul li:nth-last-child(-n+3) { margin-bottom: 0 }
.listing ul li a { display: inline-block;float:right;width:100% }
.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 .imageCntnr { position: relative; overflow: hidden; padding-bottom: 67%; display: inline-block; float: right; width: 100% }
.listing ul li a img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0 auto; width: 100%; height: 100%; border: none; filter: brightness(100%) contrast(100%); -webkit-filter: brightness(100%) contrast(100%); -moz-filter: brightness(100%) contrast(100%); -o-filter: brightness(100%) contrast(100%); -ms-filter: brightness(100%) contrast(100%); transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; }
.listing ul li:hover img { filter: brightness(108%) contrast(108%); -webkit-filter: brightness(108%) contrast(108%); -moz-filter: brightness(108%) contrast(108%); -o-filter: brightness(108%) contrast(108%); -ms-filter: brightness(108%) contrast(108%) }
.listing ul li .desc { width: 100%; cursor: pointer; display: inline-block; float: right; padding: 10px }
.listing ul li .desc p { display: inline-block; float: right; width: 100%; color: #000; text-align: right; line-height: 1.8; font-size: 14px;   direction: rtl; height: 78px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.listing ul li:hover .desc p { color: #0277bd }
.listing ul li .desc p.date { display: none }
.listing ul li .desc .time { display: inline-block;   font-size: 12px; color: #6E6E6E; float: right; direction: rtl; width: 100%; margin-bottom: 2px; margin-top: 4px; }
.listing ul li .desc .icon-time:before { content: "x"; float: right; margin-left: 8px; font-size: 16px; line-height: 1.2; display: none }
.listing ul li .desc .time span { margin-left: 16px; position: relative; float: right; line-height: 1.6; }
.listing ul li .desc .time span:after { content: ""; position: absolute; left: -8px; top: 2px; width: 1px; height: 14px; background: #b9b9b9; }
.listing ul li .desc .time span:last-child:after { display: none }
.listing ul li.noStats { display: inline-block; width: 100%; float: right; min-height: 230px }
.listing ul li.noStats p { position: absolute; top: 50%; transform: translateY(-50%);   font-size: 14px; color: #000; width: 100%; text-align: center }
.listing .more { display: inline-block; width: 100%; height: 28px; background: #0277bd; padding: 0 10px; text-align: left; color: #fff;   font-size: 13px; line-height: 2.3 }
.listing .more:hover { background: #1b92d9 }
.listing .more span { float: left; margin-right: 10px }
.listing .more .icon-more:before { content: "h"; color: #fff; font-size: 14px; line-height: 2.2 }
.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%);}


@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 }
}
@media screen and (min-width: 320px) and (max-width: 767px) {

  .listing { margin-left: 0; width: 100%; }
    .listing ul { min-height: unset }
    .listing ul li .secName { right: 130px; top: 2px; 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 }
}