﻿body {
}
/******************** ramadan lantern ********************/
.lantern{display:inline-block;position:relative;width:100%;height:auto;background-color:#f1d8ba;padding:15px 20px;margin-bottom:40px;float:right}
.lantern:before{content:'';background:url(../Images/ramdan24/lantern.png);position: absolute;left: 0;top: 0;width: 278px;height: 100%;background-size: 100%;filter: brightness(0.5);opacity: 0.1;}
.lantern img{display:none;position:absolute;top:0;left:0;width:auto;height:calc(100% + 1px);z-index:2}
.lantern .doaa{display:inline-block;float:right;width:calc(100% - 248px);z-index:2;position:relative}
.lantern p{display:inline-block;float:right;width:100%;font-family:DroidKufiBold, Arial;font-size:18px;margin-bottom:2px;color:#E53B24}

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.ticker-wrap {
  position: relative;
  width: 100%;float:right;
  overflow: hidden;
  height: auto;
  background-color: transparent;
  box-sizing: content-box;
}
.ticker-wrap .ticker {
  display: inline-block;
  height: 35px;
  line-height: 35px;
  white-space: nowrap;
  padding-right: 100%;
  box-sizing: content-box;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 30s;
  animation-duration: 30s;
}

.ticker-wrap .ticker__item {display:inline-block;float:right;width:100%;font-size:15px;color:#1E1E1E;text-align:right;}

@media screen and (min-width:1152px) and (max-width:1279px) {
      .lantern:before{background: url(../Images/ramdan24/lantern.png) top 20px left no-repeat;background-size:100%;width: 230px;}
    .lantern .doaa{width: calc(100% - 188px);}

}

@media screen and (min-width:1024px) and (max-width:1151px) {
        
    .lantern:before{background: url(../Images/ramdan24/lantern.png) top 20px left no-repeat;background-size:100%;width: 230px;}
    .lantern .doaa{width: calc(100% - 188px);}
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    .lantern .doaa{width:calc(100% - 75px)}
.lantern{padding:10px 20px}
.ticker-wrap .ticker{height:30px}

    .lantern:before{background: url(../Images/ramdan24/lantern.png) top 42px left no-repeat;background-size:100%;width: 135px;}

}