/******************** Most Seen Media *******************/
.mostSeenMedia { display: inline-block; float: left; width: 300px; position: relative }
.mostSeenMedia .cnts { display: inline-block; float: right; width: 100% }
.mostSeenMedia .cnts ul li { float: right; margin-bottom: 10px; width: 300px; height: 200px; position: relative; border: 1px solid #ddd; overflow: hidden; }
.mostSeenMedia .cnts ul li:last-child { margin-bottom: 0 }
.mostSeenMedia .cnts ul li .secName { display: block; 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; }
.mostSeenMedia .cnts ul li .secName .icon { width: 30px; height: 30px; float: right; margin-left: 10px; text-align: center; }
.mostSeenMedia .cnts ul li a .imageCntnr { position: relative; overflow: hidden; padding-bottom: 67%; }
.mostSeenMedia .cnts 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; }
.mostSeenMedia .cnts .desc { width: 100%; height: 70%; overflow: hidden; cursor: pointer; position: absolute; bottom: 0; right: 0; background: linear-gradient(270deg,rgba(0,0,0,0),#000000); background: -webkit-linear-gradient(270deg,rgba(0,0,0,0),#000); background: -o-linear-gradient(270deg,rgba(0,0,0,0),#000); background: -moz-linear-gradient(270deg,rgba(0,0,0,0),#000); background: -ms-linear-gradient(270deg,rgba(0,0,0,0),#000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004c4c4c',endColorstr='#ff1a3b00',GradientType=0); }
.mostSeenMedia .cnts .desc p { color: #fff; text-align: right; line-height: 1.6; padding: 10px; font-size: 15px;   position: absolute; bottom: 0; right: 0; direction: rtl; }
.mostSeenMedia .cnts ul li.video .secName .icon { background: #db182c; }
.mostSeenMedia .cnts ul li.video .secName .icon:before { content: "m"; color: #fff; font-size: 16px; line-height: 1.9; }
.mostSeenMedia .cnts ul li.image .secName .icon { background: #ffb200 }
.mostSeenMedia .cnts ul li.image .secName .icon:before { content: "n"; color: #fff; font-size: 16px; line-height: 1.9 }

@media screen and (min-width:320px) and (max-width:767px) {
        .mostSeenMedia { width: 100% }

}

@media screen and (max-width:767px) and (orientation:landscape) {
    .mostSeenMedia .cnts ul li { margin-left: 10px; width: calc((100% - 10px) / 2); height: auto }
    .mostSeenMedia .cnts ul li:nth-child(2n) { margin-left: 0 }
}

@media screen and (max-width:767px) and (orientation:portrait) {
        .mostSeenMedia .cnts ul li { width: 100% }

}