﻿/********** Most Read **********/
.mostRead { padding: 0; height: auto; width: 100%; float: right; border: none; background:unset}

.mostRead .allItems { display: inline-block; width: 100%;  background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; box-sizing: border-box; }
.mostRead .allItems ul { display: inline-block; width: 100%; }
.mostRead .allItems li:first-child .number{border-radius:0 6px 0 6px}
.mostRead .allItems li { width: 100%;   padding: 10px;display: inline-block; position: relative; float: right; border-bottom: 1px solid #ddd; box-sizing: border-box; }
.mostRead .allItems li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.mostRead .allItems li:after { display: none; }
.mostRead .allItems li .item { display: inline-block; width: 100%; float: right; }
.mostRead ul li .item .imageCntnr { position: relative; overflow: hidden; padding-bottom: 70px; float: right; width: 70px; border-radius: 8px; }
.mostRead .allItems li img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0 auto; width: 100%; height: 100%; float: right; object-fit: cover; border-radius: 8px; 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; }
.mostRead .allItems li .cnts { display: inline-block; float: right; width: calc(100% - 70px); padding-right: 10px; box-sizing: border-box; }
.mostRead .allItems li .desc { display: inline-block; float: right; width: 100%; }
.mostRead .allItems li .desc h2 { font-family: AvenirLight, Arial; font-size: 16px; color: #000; line-height: 26px;overflow: hidden;height:52px }
.mostRead .allItems li .secName { display: inline-block; float: right; font-family: AvenirMeduim, Arial; font-size: 14px; color: #E03322; margin-bottom: 6px; }
.mostRead .allItems li .number { position: absolute; top: 0; right: 0; width: 28px; height: 28px; border: none; border-radius: 0 0 0 6px; background: #E03322; color: #fff; font-family: AvenirMeduim, Arial; font-weight: bold; font-size: 20px; text-align: center; line-height: 28px; pointer-events: none; z-index: 1; }
.mostRead .allItems li .item: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%); }
.mostRead .allItems li .item:hover .desc p { color: #b0b0b0; }

.mostRead .allItems li .secName.news { color: #E03322; }
.mostRead .allItems li .secName.sports { color: #43a047; }
.mostRead .allItems li .secName.arts { color: #fbaa19; }
.mostRead .allItems li .secName.howa_w_hya { color: #7b1fa2; }
.mostRead .allItems li .secName.autos { color: #1a237e; }
.mostRead .allItems li .secName.islameyat { color: #1c87c9; }
.mostRead .allItems li .secName.ecommerce { color: #febd69; }
.mostRead .allItems li .secName.cop { color: #006eb7; }
.mostRead .allItems li .secName.ramadan { color: #da8f2d; }
.mostRead .allItems li .secName.wc { color: #43a047; }

@media screen and (min-width:1152px) and (max-width:1279px) {
    .mostRead { width: 100%; margin-left: 0; }
}

@media screen and (min-width:1024px) and (max-width:1151px) {
    .mostRead { width: 100%; margin-left: 0; }
}

@media only screen and (max-width: 1023px) {
    .mostRead { width: 100%; margin-left: 0; }
    .mostRead .allItems li img { width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; transform: none; object-fit: cover; }
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    .mostRead { width: calc(100% - 20px); margin: 0 10px 20px; height: auto; }
    .mostRead .ttl h3 { font-size: 20px; }
    .mostRead .allItems li .cnts { width: calc(100% - 80px); padding-right: 10px; }
    .mostRead .allItems li .desc h2 { font-size: 14px; line-height: 22px; height: 44px;}
    .mostRead .allItems li:last-child { margin-bottom: 0; }
    .mostRead .allItems li .secName { font-size: 12px; margin-bottom: 4px; }
}
