/** Related Article **/
.relatedArticles { display: inline-block; width: 100%; float: right; margin-bottom: 20px;position: relative; z-index: 2;background: unset; }
.relatedArticles ul { display: inline-block; width: 100%; float: right;height:120px }
.relatedArticles ul li.item { float: right; width: calc((100% - 16px) / 2); background:#fff;height: 120px; margin-left: 16px;border: 1px solid #E8E8E8; border-bottom: none; padding: 0; position: relative; cursor: pointer }
.relatedArticles ul li.item:last-child{margin-left:0}
.relatedArticles ul li.item a .arrow { float: right; position: absolute; top: 0; right: 0; width: 30px; height: 120px; display: inline-block; background: #E63B34 }
.relatedArticles ul li.item a .arrow span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) }
.relatedArticles ul li.item a .arrow .icon-next:before { content: "r"; color: #fff; font-size: 20px }
.relatedArticles ul li.item a .imageCntnr { width: 130px; height: 120px; float: right; position: relative; overflow: hidden; margin-right: 30px }
.relatedArticles ul li.item a img { position: absolute; top: 0; left: 50%;transform:translateX(-50%); bottom: 0;  margin: 0 auto; width: auto;max-width:unset; 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; }
.relatedArticles ul 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%); }
.relatedArticles ul li.item .desc { float: right; width: calc(100% - 180px); height: auto; cursor: pointer; position: relative; display: inline-block; padding: 0 10px }
.relatedArticles ul li.item .nextPrev:after { float: right; width: 100%; display: inline-block; text-align: right; margin-top:10px;margin-bottom:5px;  font-size: 12px; color: #E63B34; content: "الخبر السابق";font-family:DroidKufiBold, tahoma }
.relatedArticles ul li.item .desc h3,
.relatedArticles ul li.item .desc .relatedttl{ float: right; display: inline-block; width: 100%; text-align: right;  display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis; font-size: 14px; color: #000; line-height: 1.8; height: 75px; overflow: hidden; position: relative; cursor: pointer; 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; }
.relatedArticles ul li.item:hover .desc h3 { color: #E63B34 }
.relatedArticles ul li.item:last-child { margin-bottom: 0 }
.relatedArticles ul li.item:last-child { float: left }
.relatedArticles ul li.item:last-child a .arrow { float: left; right: auto; left: 0 }
.relatedArticles ul li.item:last-child a .arrow .icon-next:before { content: "q" }
.relatedArticles ul li.item:last-child a .imageCntnr { float: left; margin-right: 0; margin-left: 30px }
.relatedArticles ul li.item:last-child .desc { float: left }
.relatedArticles ul li.item:last-child .nextPrev:after { content: "الخبر التالى"; text-align: left }
.relatedArticles ul li.item:last-child .desc h3 { float: left; text-align: left }

.relatedArticles ul li.item:last-child .desc .relatedttl{text-align:left}
 .relatedArticles ul li.item .desc { width: calc(100% - 170px);    padding: 0 10px; }

.relatedArticles ul li.ramadan .secName { color: #330D46 }
.relatedArticles ul li.news .secName { color: #E03322 }
.relatedArticles ul li.sports .secName { color: #056818 }
.relatedArticles ul li.arts .secName { color: #A8006B }
.relatedArticles ul li.howa_w_hya .secName { color: #7b1fa2 }
.relatedArticles ul li.autos .secName { color: #1a237e }
.relatedArticles ul li.islameyat .secName { color: #075C99 }
.relatedArticles ul li.ecommerce .secName { color: #542f00 }

@media screen and (min-width:1680px) and (max-width:1919px) {
        .relatedArticles ul li.item:nth-of-type(2n) .desc .relatedttl{text-align:left}
}

@media screen and (min-width:1600px) and (max-width:1679px) {
        .relatedArticles ul li.item:nth-of-type(2n) .desc .relatedttl{text-align:left}
}


@media screen and (min-width:1536px) and (max-width:1599px) {
        .relatedArticles ul li.item:nth-of-type(2n) .desc .relatedttl{text-align:left}
}

@media screen and (min-width:1440px) and (max-width:1535px) {
     .relatedArticles ul li.item:nth-of-type(2n) .desc .relatedttl{text-align:left}

}


@media screen and (min-width:1360px) and (max-width:1439px) {

     .relatedArticles ul li.item:nth-of-type(2n) .desc .relatedttl{text-align:left}
}


@media screen and (min-width:1280px) and (max-width:1359px) {
     .relatedArticles ul li.item:nth-of-type(2n) .desc .relatedttl{text-align:left}
     .relatedArticles ul li.item a .imageCntnr{display:none}
      .relatedArticles ul li.item .desc{width:calc(100% - 30px);float:left}
           .relatedArticles ul li.item:last-child .desc{float:right}

}


@media screen and (min-width:1152px) and (max-width:1279px) {


     .relatedArticles ul li.item:nth-of-type(2n) .desc .relatedttl{text-align:left}
          .relatedArticles ul li.item a .imageCntnr{display:none}
      .relatedArticles ul li.item .desc{width:calc(100% - 30px);float:left}
                .relatedArticles ul li.item:last-child .desc{float:right}


}

@media screen and (min-width:1024px) and (max-width:1151px) {


     .relatedArticles ul li.item:nth-of-type(2n) .desc .relatedttl{text-align:left}
          .relatedArticles ul li.item a .imageCntnr{display:none}
      .relatedArticles ul li.item .desc{width:calc(100% - 30px);float:left}
                .relatedArticles ul li.item:last-child .desc{float:right}


}

@media only screen and (max-width: 1023px) {

     .relatedArticles ul li.item:nth-of-type(2n) .desc .relatedttl{text-align:right}
    }

@media screen and (min-width:320px) and (max-width:767px) {
     .relatedArticles{padding:0;margin-bottom:10px}
     .relatedArticles ul li.item {
        width: calc((100% - 10px) /2);margin-left:10px;
        height: auto;border: 1px solid #E8E8E8;
    }
    /*.relatedArticles ul li.item a img{width:100%;height:auto}*/
    .relatedArticles ul li.item:last-child {
        margin-left: 0;
    }
    .relatedArticles ul li.item a .arrow {
       height: 32px;
        width: 100%;
        position: relative;
        top: auto;
        right: auto;
    }
    .relatedArticles ul li.item .desc h3 {
        height: 72px;
    }
    .relatedArticles ul li.item a .arrow span{display:none}
    .relatedArticles ul li.item a .nextPrev{    text-align: center;
    display: inline-block;
    width: 100%;
    float: unset;height:100%}
    .relatedArticles ul li.item .nextPrev:after{color:#fff;width:auto;float:none;text-align:center;line-height:32px;margin-top:0}
 .relatedArticles ul li.item a .arrow .nextPrev:before{content: "r";color: #fff;font-size: 12px;line-height:32px;margin-left:10px}
 .relatedArticles ul li.item:last-child a .arrow .nextPrev:before{content:'q'}
 .relatedArticles ul li.item a .imageCntnr{display:inline-block!important;height:110px;margin-right: 0;width:100%}
 .relatedArticles ul li:first-child.item a .imageCntnr{float:right;margin-right: 0;margin-top: 0;}
 .relatedArticles ul li:last-child.item a .imageCntnr{float:left;margin-left:0}
 .relatedArticles ul li.item .desc{    width:100%;margin-right:0;height:122px}
 .relatedArticles ul li.item:last-child .desc{margin-left:0}
 .relatedArticles ul li.item:last-child.item a .nextPrev{direction:ltr}
 .relatedArticles ul li.item:last-child.item a .nextPrev:before{margin-left:0;margin-right:10px}



   .relatedArticles ul{height:270px}
      .relatedArticles .secName{font-size:12px;font-family:DroidKufiBold, tahoma;color:#E63B34;}
      .relatedArticles ul li.item .desc .relatedttl{font-size:13px}
}