.imageCntnr {
    overflow: hidden;
}
.ramadan p.text{display:inline-block;float:right;text-align:right;color:#000;font-size:18px;margin:30px 0 5px 0 }

.boxListing{  padding: 0;margin: 0;list-style: none;-ms-box-orient: horizontal;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -moz-flex;display: -webkit-flex;display: flex;flex-wrap:wrap;}
.boxListing .ItemListing{ -webkit-flex-wrap: wrap;flex-wrap: wrap;padding: 0;width: 217px;height: 114px;margin: 0 0 20px 20px;position:relative;cursor:pointer;overflow:hidden;transition: all .2s ease-in-out; }

.boxListing .ItemListing:before{content:'';position:absolute;width:100%;height:100%;background:rgba(0,0,0,.45);top:0;right:0;z-index:1}
.boxListing .ItemListing:last-child{margin:0}
.boxListing .ItemListing:nth-child(4n){margin:0 0 20px 0}
.boxListing .ItemListing a{position:absolute;width:100%;height:100%;top:0;right:0}
.boxListing .ItemListing img{position: absolute;width: 100%;height: auto;background: #330D46;top: 50%;left: 0;transform: translateY(-50%);right: 0;}
.boxListing .ItemListing p{position:absolute;font-family:DroidKufiBold, Arial;font-size:19px;width:100%;height:100%;color:#fff;text-align:center;z-index:2;left:0;top:0;line-height:114px}
.boxListing .ItemListing:hover{transform: scale(1.1); }

.openDoaaPopup .doaaPopup{visibility:visible;opacity:1}
.openDoaaPopup.ItemListing:hover{transform:none}
.doaaPopup{position:fixed;display:inline-block;width:100%;height:100%;top: 0;right: 0;bottom: 0;left: 0;z-index:3;opacity: 0;visibility: hidden}
.doaaPopup:before{position: absolute;top: 0;left: 0;z-index: 3;width: 100%;height: 100%;background: rgba(0,0,0,0.8);content: '';
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0s 0.3s;
    transition: opacity 0.3s, transform 0s 0.3s;}
.doaaPopup .doaaBox{display:inline-block;position:absolute;width:900px;height:auto;background-color:#F4E0CE;left:50%;transform:translate(-50% , -50%);top:50%;padding: 20px 60px 40px; max-height: 440px;overflow-y:auto;z-index:4}
.doaaPopup .doaaBox:before{content:'';position:absolute;background:url(../Images/ramdan24/objectRight.png) right bottom no-repeat;bottom:0;right:0;width:50%;height:100%;background-size:100% auto;pointer-events:none}
.doaaPopup .doaaBox:after{content:'';position:absolute;background:url(../Images/ramdan24/objectRight.png) left top no-repeat;top:0;left:0;width:50%;height:100%;background-size:100% auto;transform:rotateX(3.142rad) rotateY(180deg);pointer-events:none}
.doaaPopup .doaaBox .closeDoaa{display:inline-block;position:absolute;top:20px;left:15px;width:15px;height:20px;z-index:2;right:auto;background-color:unset!important}
.doaaPopup .doaaBox .closeDoaa:before{content:'O';position:absolute;top:0;left:0;font-size:19px;color:#000;font-weight:bold;line-height:1}
.doaaPopup .doaaBox .title{display:inline-block;float:left;width:100%;}
.doaaPopup .doaaBox span{display:inline-block;color:#330D46;font-size:24px;text-align:center;font-family:DroidKufiBold, Arial ;margin:25px 0 15px }
.doaaPopup .doaaBox ul{display:inline-block;float:right;width:100%;margin-top:15px;}
.doaaPopup .doaaBox ul li{display:list-item;float:right;width:100%;background-color:transparent;font-family:DroidKufiLight, Arial;font-size:18px;color:#000;border:0;margin-bottom:10px; list-style-type: disc;list-style-position:inside;overflow:visible}
.doaaPopup .doaaBox ul li::marker{font-size:15px}
  .sharebtnfb{   display:inline-block; float: left!important;
    width: 118px!important;
    height: 40px!important;
    top: auto!important;
    right: auto!important;
    background-color: #4267B2!important;
    color: #fff!important;
    z-index: 1;
    line-height: 40px!important;text-align:left;margin-top:15px}
.sharebtnfb:before{content:'u';float:left;margin:5px 6px 0 10px}




.donation .ItemListing{background-color:#fff;border:1px solid #e8e8e8;width:calc((100% - 40px) /3);height:145px;margin-left:20px}
.donation .ItemListing:last-child, .donation .ItemListing:nth-of-type(3n){margin-left:0}
.donation .ItemListing:before{display:none}
.donation p.text{font-family:DroidKufiBold, Arial;font-size:22px;text-align:center;float:none;margin:20px 0 10px 0}
.donation  .ItemListing a{display:inline-block;position:relative;width:100%;height:100%;transition: all .2s ease-in-out;}
.donation  .ItemListing{transition:none;overflow:visible}
.donation .ItemListing p{height: auto;line-height: unset!important;bottom:15px;font-size: 15px;color: #000;text-align: center;top:auto}
.donation .ItemListing img{    background-color: unset;height: 66px;width: auto;top: unset;position: relative;left: unset;transform: unset;margin: 20px auto 15px;}
/*.donation .ItemListing.EFB img{height:36px;margin-top:45px;}*/
/*.donation .ItemListing.lifeMaker .doaaBox .title span, .donation .ItemListing.EFB .doaaBox .title span{line-height:unset}*/
.donation .ItemListing.EFB .doaaBox .title img{width:85px;margin-top:10px}
.donation .doaaPopup .doaaBox{max-height:650px;padding:20px 30px}
.donation .doaaBox ul li{display:inline-block;margin-bottom:12px}
.donation .doaaBox ul li:last-child{margin-bottom:0}
.donation .doaaBox ul li label{display:inline-block;float:right;color:#000;font-family: DroidKufiBold, Arial; font-size: 16px; }
.donation .doaaBox ul li span{margin:0;font-size:14px;font-family:DroidKufiLight, Arial;color:#333333;text-align:right;line-height:1.5;width:100%}
.donation .doaaBox ul li a{display:inline-block;float:right;color:#330D46;width:auto;height:auto;top:unset;left:unset}
.donation .doaaPopup .doaaBox{width:500px;height:465px;background-color:#fff;padding:20px}
.donation .doaaPopup .doaaBox:before, .donation .doaaPopup .doaaBox:after{display:none}
.donation .doaaPopup .doaaBox .title{display:inline-block;width:100%;float:right;border-bottom:2px solid #e8e8e8;padding-bottom:15px}
.donation .doaaPopup .doaaBox .title img{display:inline-block;float:right;width:70px;height:auto;margin:0}
.donation .ItemListing.lifeMaker .doaaBox .title span, .donation .ItemListing.EFB .doaaBox .title span {
    line-height: unset;
}
.donation .doaaPopup .doaaBox .title span{text-align: right; font-size: 20px; float: right;margin: 0 15px 0;line-height: 65px;color:#000}
.donation .doaaPopup .doaaBox .hyperlink{display:inline-block;width:150px;height:40px;background-color:#330d46;font-family:DroidKufiLight, Arial;font-size:15px;line-height:40px;color:#fff}
.donation .mersal .doaaPopup .doaaBox .title span{line-height:unset}
.donation .doaaBox ul li span.custom{    float: right; margin-top: 2px;}


@media screen and (min-width:1680px) and (max-width:1919px) {
     .boxListing .ItemListing p{line-height:123px}
     
    .boxListing .ItemListing{width:236px;height:123px}
    .boxListing .ItemListing:nth-child(4n){margin:0 0 20px 20px}
    .boxListing .ItemListing:nth-child(3n){margin:0 0 20px 0}


    .donation .ItemListing{width:calc((100% - 40px) /3);height:140px}

}

@media screen and (min-width:1600px) and (max-width:1679px) {
       .boxListing .ItemListing{width:236px;height:123px}
    .boxListing .ItemListing:nth-child(4n){margin:0 0 20px 20px}
    .boxListing .ItemListing:nth-child(3n){margin:0 0 20px 0}
 .boxListing .ItemListing p{line-height:123px}

    .donation .ItemListing{width:calc((100% - 40px) /3);height:140px}
}

@media screen and (min-width:1536px) and (max-width:1599px) {
        .boxListing .ItemListing{width:236px;height:123px}
    .boxListing .ItemListing:nth-child(4n){margin:0 0 20px 20px}
    .boxListing .ItemListing:nth-child(3n){margin:0 0 20px 0}
    
    .boxListing .ItemListing p{line-height:123px}

    .donation .ItemListing{width:calc((100% - 40px) /3);height:140px}
    .donation p.text{font-size:20px}
}


@media screen and (min-width:1440px) and (max-width:1535px) {
    
    .boxListing .ItemListing{width:236px;height:123px}
    .boxListing .ItemListing:nth-child(4n){margin:0 0 20px 20px}
    .boxListing .ItemListing:nth-child(3n){margin:0 0 20px 0}

    .boxListing .ItemListing p{line-height:123px}

    .donation .ItemListing{width:calc((100% - 40px) /3);height:140px}
    .donation p.text{font-size:20px}
}


@media screen and (min-width:1360px) and (max-width:1439px) {
    
    .boxListing .ItemListing{width:236px;height:123px}
    .boxListing .ItemListing:nth-child(4n){margin:0 0 20px 20px}
    .boxListing .ItemListing:nth-child(3n){margin:0 0 20px 0}
  .boxListing .ItemListing p{line-height:123px}

    .donation .ItemListing{width:calc((100% - 40px) /3);height:140px}
    .donation p.text{font-size:20px}
}


@media screen and (min-width:1280px) and (max-width:1359px) {
    
    .boxListing .ItemListing{width:202px;height:106px}
    .boxListing .ItemListing:nth-child(4n){margin:0 0 20px 20px}
    .boxListing .ItemListing:nth-child(3n){margin:0 0 20px 0}
    .boxListing .ItemListing p{font-size:20px}

    
    .boxListing .ItemListing p{line-height:106px}

     .donation .ItemListing{width:calc((100% - 40px) /3);height:140px}
    .donation .ItemListing p{font-size:16px}
    .donation .ItemListing img{margin:20px auto;height:60px}
    .donation p.text{font-size:18px}
}


@media screen and (min-width:1152px) and (max-width:1279px) {
     .boxListing .ItemListing{width:214px;height:112px}
    .boxListing .ItemListing:nth-child(4n){margin:0 0 20px 20px}
    .boxListing .ItemListing:nth-child(2n){margin:0 0 20px 0}
    .boxListing .ItemListing p{font-size:20px}

    
       .donation .ItemListing{width:calc((100% - 20px) /2);height:140px}
       .donation .ItemListing:nth-of-type(3n){margin-left:20px}
       .donation .ItemListing:nth-of-type(2n){margin-left:0}
    .donation .ItemListing p{font-size:16px}
    .donation .ItemListing img{margin:20px auto;height:60px}
    .donation p.text{font-size:18px}
}


@media screen and (min-width:1024px) and (max-width:1151px) {
    .boxListing .ItemListing{width:214px;height:112px}
    .boxListing .ItemListing:nth-child(4n){margin:0 0 20px 20px}
    .boxListing .ItemListing:nth-child(2n){margin:0 0 20px 0}
    .boxListing .ItemListing p{font-size:20px}

     .donation .ItemListing{width:calc((100% - 20px) /2);height:140px}
       .donation .ItemListing:nth-of-type(3n){margin-left:20px}
       .donation .ItemListing:nth-of-type(2n){margin-left:0}
    .donation .ItemListing p{font-size:16px}
    .donation .ItemListing img{margin:20px auto;height:60px}
    .donation p.text{font-size:18px}

        .doaaPopup .doaaBox{width:840px}

}


@media only screen and (max-width: 1023px) {
    
    .boxListing .ItemListing{width:calc((100% - 40px) /3);height:auto;padding:0}
    .boxListing .ItemListing a{display:inline-block;position:relative;width:100%;height:auto;padding-bottom:53%;float:right}
    .boxListing .ItemListing:nth-child(4n){margin:0 0 20px 20px}
    .boxListing .ItemListing:nth-child(3n){margin:0 0 20px 0}

     .boxListing .ItemListing p{height:auto;left:50%;top:50%;transform:translate(-50% , -50%)}
      .doaaPopup .doaaBox, .rulesPopup .ruleBox, .rulesPopupHint .ruleBox{width:calc(100% - 100px);padding: 20px 15px 40px;max-height: 300px;}
    .doaaPopup .doaaBox .closeDoaa, .rulesPopup .ruleBox .closeRules, .rulesPopupHint .ruleBox .closeRulesHint{padding-bottom:0}
    .doaaPopup .doaaBox span, .rulesPopup .ruleBox span, .rulesPopupHint .ruleBox span{margin: 15px 0 0;font-size:22px}
    .doaaPopup .doaaBox ul li, .rulesPopup .ruleBox ul li, .rulesPopupHint .ruleBox ul li{font-size:15px}

    .donation .ItemListing{height:145px}
    .donation .ItemListing a{height:100%;padding-bottom:unset}
    .donation .ItemListing p{left:unset;top:unset;transform:unset}
}

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

    
    .boxListing .ItemListing{width:calc((100% - 20px) /2)}
    .boxListing .ItemListing:nth-child(4n) { margin: 0 0 20px 20px}
    .boxListing .ItemListing:nth-child(3n) { margin: 0 0 20px 20px}
    .boxListing .ItemListing:nth-child(2n) { margin: 0 0 20px 0}
    .boxListing .ItemListing p{font-size:19px}
    .boxListing .ItemListing:hover {transform: none;}

     .doaaPopup .doaaBox, .rulesPopup .ruleBox, .rulesPopupHint .ruleBox{width: calc(100% - 20px); padding: 20px 15px;height:calc(100% - 250px);  max-height: unset; top: 150px;transform: translateX(-50%);}
    .doaaPopup .doaaBox span, .rulesPopup .ruleBox span, .rulesPopupHint .ruleBox span{font-size:20px}
    .doaaPopup .doaaBox ul li, .rulesPopup .ruleBox ul li, .rulesPopupHint .ruleBox ul li{margin-bottom:15px}

     .doaaPopup .doaaBox:after{height:172px}
    .donation .ItemListing{height:130px}
    .donation .ItemListing img{height:52px}
    /*.donation .ItemListing.EFB img{height:28px}*/
    .donation .ItemListing p{font-size:15px}
    .ramadan.donation p.text{font-size:14px}
    .donation .doaaPopup .doaaBox{width:calc(100% - 20px);height:calc(100% - 145px);padding:10px 15px}
    .donation .doaaPopup .doaaBox .title img{width:35px}
    .donation .doaaPopup .doaaBox .title span{font-size:16px;line-height:unset}
    .donation .doaaBox ul li label{font-size:15px}
    .donation .doaaPopup .doaaBox .hyperlink{width:130px;height:36px;font-size:14px;line-height:36px;float:unset}

}