@import url("icons.css?modfiedDate=28042020");
@import url("header.css?modfiedDate=28042020");
@import url("searchV1.css?modfiedDate=28042020");
@import url("footer.css?modfiedDate=28042020");
@import url("arabic.css?modfiedDate=28042020");
@import url("responsiveV2.css?modfiedDate=28042020"); 
body {
	font-family: 'Montserrat-Regular', 'Montserrat-Light', 'Montserrat-Medium', 'Montserrat-SemiBold', 'Montserrat-Bold', Arial, sans-serif;
	font-size: 10px;
	color: #585858;
}
li {
	list-style: none;
}   
h2 {
	text-transform: none;
	font-size: 3.167em;
	color: #000;
	font-weight: 700;
}
h4, .services-icon {
	color: #420021;
}
h5 {
	color: #8d8d8d;
}
.align-center {
	text-align: center;
}
.pay-zakat-accordian h6 {
	font-weight: 600;
}
input, a {
	outline: none;
}
a, a:hover {
	color: #76102b;
}
p {
	font-size: 1.5em;
}
/****************** Banner starts here ***********/

.banner, .banner1, .banner2, .banner3 {
	padding-bottom: 25%; /* for a 4:3 aspect ratio */
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 0;
	min-height: 250px;
}

.banner-content {
	width: 50%;
	margin-top: 7%;
	color: #fff;
	text-align: center
}
.banner-slide {
	height: 100%;
	min-height: 250px
}
.banner-content a {
	color: #fff;
}

.banner-content h1 {
	font-size:40px;
	font-weight: bold;
	font-family: 'Raleway', sans-serif;
	color:black;
}

.banner-content h3 {
	font-size: 4.286em;
	text-transform: none;
}
.banner-content span {
	font-size: 1.857em;
}


 
#banner_text{
	 background-color:rgba(255, 255, 255, 0.7);
	 width: 100%; 
	 color:black;
	 text-align: center;
     padding-top:2px;
     padding-bottom:2px;	 
 }
 

 #banner_text p {
    font-size: 28px;
	font-family: 'Raleway', sans-serif;
	color:black;
}


.slide-buttons {
	background: #000;
	color: #fff;
	font-size: 1.357em;
	padding: 10px;
	position: absolute;
	right: 0;
	opacity: 0.6;
	bottom: 0;
}
.slide-buttons.b-arabic {
	display: none;
}
.slide-buttons span {
	cursor: pointer;
}
.slide-buttons span:first-child:hover, .slide-buttons span:last-child:hover {
	color: #666;
}

.slide-buttons a, a:visited {
	/*color: #fff;*/
	text-decoration: none;
}

.slide-buttons a:visited {
	/*color: #fff;*/
	text-decoration: none;
}

.slide-buttons a:hover {
	/*color: #666;*/
	text-decoration: none;
}

.pause  {
	background-image: url('../images/pause-button.png');
	background-size: 13px 13px;
	height: 13px;
	width:13px;
	display:inline-block;
	content: "";
}

.pause:hover  {
	background-image: url('../images/pause-button-hover.png');
	background-size: 13px 13px;
	height: 13px;
	width:13px;
	display:inline-block;
	content: "";
}


.play  {
	background-image: url('../images/play-button.png');
	background-size: 13px 13px;
	height: 13px;
	width:13px;
	display:inline-block;
	content: "";
}

.play:hover  {
	background-image: url('../images/play-button-hover.png');
	background-size: 13px 13px;
	height: 13px;
	width:13px;
	display:inline-block;
	content: "";
}


.pause-visited {
	background-image: url('../images/pause-button-hover.png');
	background-size: 13px 13px;
	height: 13px;
	width:13px;
	display:inline-block;
	content: "";
}

.play-visited {
	background-image: url('../images/play-button-hover.png');
	background-size: 13px 13px;
	height: 13px;
	width:13px;
	display:inline-block;
	content: "";
}


.slide-buttons .img-count {
	display: inline-block;
	width: 7px;
	cursor: none;
	color: #fff;
}
.banner-container {
	position: relative
}
/******************* Services *******************/
.services-container {
	padding: 3% 5%;
}
.services-container .box {
	border-left: 1px solid #d7d5d8;
	margin: 30px 0;
	padding: 0 40px;
}
.services-container .box:last-child {
	border-right: 1px solid #d7d5d8;
}
.services-container .box h4 {
	font-size: 1.833em;
	padding: 10px 0;
}
.services-container .box h5 {
	font-size: 1.667em;
}
.services-container .box h5 a {
	color: #5e5e5e;
}
.services-container .box h5 a:hover {
	color: #76102b;
	text-decoration: underline;
}
.services-container .box p {
	font-size: 1.250em;
	color: #2e2e2e;
}
.multi-eli {
	overflow: hidden;
	display: block;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;/*	height: 40px;*/
}
.events-content .multi-eli {-webkit-line-clamp: 3;}
.services-container .box li {
	float: left;
	padding: 8px 8px 0;
}
.services-container .box li:first-child {
	padding-left: 0;
}
.services-container .box li a, .li-style {
	background-color: #e4cfd5;
	height: 8px;
	width: 8px;
	border-radius: 6px;
	display: block;
	text-decoration: none;
	cursor: pointer;
}
.services-container .box li a.active, .li-style.active {
	background-color: #76102b;
}
.li-style {
	margin: 5px 15px 0 0;
}
.display-line {
	display: -webkit-box;
}
.view-all {
	display: block;
	text-transform: none;
	font-size: 1.250em;
	padding-top: 30px;
	font-weight: 500;
}
.services-container .all-services {
	display: block;
	text-transform: none;
	font-size: 1.250em;
	padding-top: 30px;
	font-weight: 500;
}
.services-container a {
	text-decoration: none;
	color: #76102b;
}
.services-container a:hover {
	text-decoration: underline
}
.prev, .next, .icon-arrow_left, .icon-arrow_right, .services-container .icon-pagination_arrow, .services-container .icon-pagination_arrow_left, .events-polls .icon-pagination_arrow, .events-polls .icon-pagination_arrow_left, .news-container .icon-pagination_arrow, .news-container .icon-pagination_arrow_left {
	position: absolute;
	/* top: 60%; */
	font-size: 2.500em;
	display: block;
	cursor: pointer;
	color: #000000;
}
#newsPrev, #eventsPrev, #photoPrev, #publicationPrev, #logoPrev {
	left: -5px;
	top: 50%;
}
#newsNext, #eventsNext, #photoNext, #publicationNext, #logoNext {
	right: -10px;
	top: 50%;
}
.services-container .icon-pagination_arrow_left {
	left: -20px;
}
.services-container .icon-pagination_arrow {
	right: -20px;
}
.prev, .events-polls .icon-pagination_arrow_left, .news-container .icon-pagination_arrow_left {
	left: -10px;
}
.next, .events-polls .icon-pagination_arrow, .news-container .icon-pagination_arrow {
	right: -10px;
}
.news-container .icon-pagination_arrow_left {
	left: 5px;
}
.news-container .icon-pagination_arrow {
	right: 5px
}
.services-container .icon-pagination_arrow_left, .services-container .icon-pagination_arrow, .events-polls .icon-pagination_arrow, .events-polls .icon-pagination_arrow_left, .news-container .icon-pagination_arrow_left, .news-container .icon-pagination_arrow {
	top: 50%;
}
.events-polls-container .box, .events-polls- container .box div:first-child {
	border: 1px solid #dbdbdb;/*height: 198px;*/
}
.events-polls-container {
	background: #f3f3f3;
}
/******************* Icons **********************/

.services-icon {
	font-size: 5em;
	text-decoration: none !important;
	color: #420021 !important;
}
/********************* Events ****************/

.polls, .events, .promo-box {
	border: 1px solid #dbdbdb;
	margin-bottom: 2.500em;
}
.promo-box {
}
.polls, .events {
	min-height: 330px;
}
.all-events {
	float: right;
	display: block;
	text-transform: none;
	font-size: 1.143em;
	padding-top: 20px;
}
.events, .promo-box {
	background: #fff;
}
.events-content, .promo-content {
	padding: 2.500em;
}
.events h4, .promo-box h4 {
	font-size: 1.333em;
	font-weight: 600;
	margin-top: 0;
	line-height: normal;
}
.events h4 a, .promo-box h4 a {
	color: #000;
}
.events h4 a:hover, .promo-box h4 a:hover {
	color: #76102b;
	text-decoration: underline;
}
.events-polls a {
	text-decoration: none;
	color: #76102b;
}
.events-polls a:hover {
	text-decoration: underline
}
.events-content span, .promo-content span {
	font-size: 2em;
	color: #76102b;
}
.events img, .promo-box img {
	width: 100%;
	border: 1px solid #dbdbdb;
}
.clear {
	clear: both;
}
.polls {
	background: #fff;
	margin-bottom: 5%;
	padding: 5px 2.500em 0;
}
.poll-head {
	padding-left: 10px;
	padding-bottom: 20px;
}
.events-polls {
	padding: 2% 5%;
}
.inner-wrapper .events-polls {
	background: #fff;
}
.news-container {
	padding: 2% 5%;
	background-color: #f9f9f9;
	position: relative;
}
.events-polls h2, .news-container h2 {
	padding-bottom: 10px;
}
.polls h4 {
	color: #333;
	font-size: 1.286em;
	font-weight: bold;
	line-height: 21px;
}
.events p, .promo-box p {
	font-size: 1.167em;
}
/*.events p {
	height: 52px;
}*/
.events .date, .promo-box .date {
	font-size: 1em;
	line-height: normal;
	color: #fff;
	background-color: #61061f;
	opacity: 0.9;
	position: absolute;
	left: 2.500em;
	bottom: 1px;
	text-align: center;
	font-weight: 300;
	padding: 0 7px 7px 7px;
}
.events .date span, .promo-box .date span {
	font-size: 3.750em;
	font-weight: bold;
}
.date-box {
	position: relative;
	margin-right: 25px;
}
.date-box:last-child {
	margin-right: 0;
}
.date-box:after {
	content: "-";
	font-size: 5em;
	position: absolute;
	left: 110%;
	top: -10px;
}
.date-box:last-child:after {
	content: ""
}
.events-img, .promo-img {
	position: relative
}
.events p span, .promo-box p span {
	font-size: 3.429em;
	line-height: normal;
	color: #61061f;
}
.polls button {
	font-weight: 600;
	padding: 7px 0;
	width: 40%;
	font-size: 1em;
}
.polls button:hover { color:#ccc;}
.vote-btn {
	background: #76102b;
	color: #fff;
	margin-right: 15px;
}
.view-btn {
	background: #fff;
	color: #76102b;
}
.polls .results-button button {
	width: 26%;
	margin-right: 10px;
}
.polls .results-button button:last-child {
	margin-right: 0;
}
.polls .results-button button:nth-child(2) {
	width: 34%
}
.vote-btn:focus, .vote-btn.focus, .vote- btn:hover, .vote-btn:active, .vote- btn:active:focus {
	color: #fff;
	outline: none;
}
.polls li {
	border-bottom: 1px solid #ebebeb;
	width: 100%;
	font-size: 1.286em;
	font-weight: normal;
	padding: 6px 0 11px;
}
.polls li:last-child {
	border-bottom: none;
}
.polls li:first-child {
	padding-top: 10px;
}
.view-btn:focus, .view-btn.focus, .view- btn:hover, .view-btn:active, .view- btn:active:focus {
	color: #76102b;
	outline: none;
}
.checkbox label:after {
	content: '';
	display: table;
	clear: both;
}
.checkbox .cr {
	position: relative;
	display: inline-block;
	border: 2px solid #CCC;
	border-radius: .25em;
	width: 1.667em;
	height: 1.667em;
	float: left;
	margin-right: 1.5em;
}
.checkbox .cr .cr-icon {
	position: absolute;
	font-size: 1.333em;
	line-height: 0;
	top: 50%;
	left: 10%;
}
.checkbox label input[type="checkbox"] {
	display: none;
}
.checkbox label input[type="checkbox"] + .cr > .cr-icon {
	transform: scale(3) rotateZ(-20deg);
	opacity: 0;
	transition: all .3s ease-in;
}
.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon {
	transform: scale(1) rotateZ(0deg);
	opacity: 1;
}
.checkbox label input[type="checkbox"]:disabled + .cr {
	opacity: .5;
}

.checkbox label {
	padding-left: 0;
}
/********************** News *******************/
/*.news-slide a {
	height: 35px;
}*/
/********************* Topics ****************/

.topics {
	position: relative;
	background: url(../images/topics.jpg) no-repeat;
	background-size: cover;
	float: left;
}
.topics h2 {
	padding-top: 2em;
	padding-bottom: 1em;
	margin: 0;
	color: #fff;
}
.topics-after {
	background-color: #76102b;
	opacity: 0.9;
	padding: 0 5% 3.333em;
}
.topics-after h6 {
	font-size: 1.833em;
}
.topics-after h6 a {
	color: #fff;
}
.topics-after li {
	text-align: center
}
.topics-icon {
	font-size: 5em;
	color: #fff;
	padding-bottom: 10px;
	display: block
}
.topics-after .icon-arrow_left, .topics-after .icon-arrow_right {
	top: 48%;
	color: #FFFFFF;
	z-index: 10000;
	font-size: 3.333em;
	opacity:0.5;
}
.topics-after .icon-arrow_left {
	left: 30px;
}
.topics-after .icon-arrow_right {
	right: 30px;
}
/********************* Useful Links ****************/

.useful-links {
	padding: 3% 5% 1%;
	background-color: #f5f5f5;
}
.useful-links li {
	text-align: center;
	margin-top: 3%;
	border-right: 1px solid #eae7ea;
	margin-bottom: 5%;
}
.useful-links li:first-child {
	border-left: 1px solid #eae7ea;
}
.useful-links h6 {
	color: #301830;
	font-size: 1.667em;
	margin-top: 25px;
	width: 60%;
	line-height: 21px;
}
.useful-links h6 a {
	text-decoration: none;
	color: #2f1830;
}
.useful-link {
	width: 65px;
	height: 65px;
	border-radius: 50%;
	border: 2px solid #e7e7e7;
	background-size: cover;
	text-align: center;
}
.link1 {
	background-image: url('../images/link1.png')
}
.link2 {
	background-image: url('../images/link2.png')
}
.link3 {
	background-image: url('../images/link3.png')
}
.link4 {
	background-image: url('../images/link4.png')
}
.lhs {
	display: none;
}
/*Zakat*/
.dl-horizontal dt {
	text-align: left;
	width: 100px;
}
.tooltip-head {

    border-radius: 10px;
    width:220px;
    min-height:150px;
    position: relative;
    display: inline-block;
    background: #fff;
    margin: 20px 0 0 5px;
    box-shadow: -1px -1px 20px 5px #888888;
}
.tooltip-head p{
	border-radius: 10px;
	width: 220px;
	height: 150px;
	position: relative;
	display: inline-block;
	background: #fff;
	margin: 20px 0 0 5px;
	box-shadow: -1px -1px 20px 5px #888888;
}
.tooltip-head p {
	margin-top: 0;
	padding-top: 0;
}
.tooltip-head:before {
	content: "";
	position: absolute;
	height: 0;
	width: 0;
	top: -28px;
	left: 28px;
	border-width: 15px;
	border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0.01) #fff transparent;
	border-style: solid;
}
@media (min-width: 768px) {
.dl-horizontal dd {
	margin-left: 0;
}
}
.table-zakat {
	width: 200px;
	height: 70px;
	border: 1px solid #ccc;
}
.table-zakat p:first-child {
	border-bottom: 1px solid #ccc;
}
.docs-datepicker-trigger, .docs-datepicker-trigger:hover {
	top: 3.5px;
	left: -83px;
	border: none;
	border-bottom: 2px solid #e9e9e9;
	border-radius: 0;
}
.docs-datepicker-trigger:hover, .docs-datepicker-trigger:focus {
	background: none;
	outline: none;
}

/*28Oct2018: Kamal Fix for E-accessibility start */
.skip-element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
}

.skip-element-invisible:active,
.skip-element-invisible:focus {
  position: absolute !important;
  clip: auto;
  overflow: visible;
  height: auto;
  color: #FFFFFF;
}

.div-skip {
     height: 1px;
}

.use-link a:hover, .use-link a:focus {
      text-decoration: underline;
}

.services-container a:hover, .services-container a:focus {
      text-decoration: underline;
}

.events-polls a:hover, .events-polls a:focus {
      text-decoration: underline;
}

/*28Oct2018: Kamal Fix for E-accessibility end */

/* 25Oct2018: Image responsive issue*/
.image-responsive{    
	width: 100%;
    overflow-x: auto;
}
/* 25Oct2018: Image responsive issue*/


/* C107295 Kamal fix for e-accessibility start*/
.innerslides h5 a:focus,.innerslides2 h5 a:focus,.innerslides3 h5 a:focus,.innerslides4 h5 a:focus {
text-decoration: underline;
}
/* C107295 Kamal fix for e-accessibility end*/