@keyframes heartbeat-one {
	0% { backdrop-filter: blur(0px); background-position-x: 0; }
	50% { backdrop-filter: blur(100px); background-position-x: -500px; }
	100% { backdrop-filter: blur(0px); background-position-x: 0; }
}

@keyframes heartbeat-two {
	0% { background-color: rgba(0,0,0,0.0); }
	50% { background-color: rgba(0,0,0,0); }
	100% { background-color: rgba(0,0,0,0.0); }
}

/* Global Page Styles */
#walworthroadmosque {
	background: url('../../../../uploads/2017/06/bg-15-2.png') repeat-x;
	background-size: cover;
	overflow: hidden;
	position: fixed;
	width: 100vw;
	height: 100vh;
	animation: heartbeat-one 60s infinite;
}

#walworthroadmosque::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	animation: heartbeat-two 10s infinite;
}


.DigitsalScreenPage > .entry-content {
	animation: heartbeat-two 10s infinite;
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

#overlay {display: none;}


/** Make all other Background Transparent */
#walworthroadmosque > *,
.x-board .row.top-row .time,
.x-board .row.top-row .bg-white,
#walworthroadmosque .x-board .bg-dark,
#walworthroadmosque .x-board .bg-white,
#walworthroadmosque .x-board .bg-red,
#walworthroadmosque .x-board .bg-green {
	background: transparent !important;

}

* {
	font-family: 'Montserrat' !important;
}
/* Global Page Styles END */


/** MAIN ROW HEIGHTS  **/
.x-board .top-row {
    /*height: 15%; */ /* Original */
    height: 13% !important;
}

.x-board .middle-row {
        /*height: 70%; */ /* Original */
    height: 77% !important;
    padding: 30px 0 0;
	box-sizing: border-box;
	margin: 0;
}

.x-board .bottom-row {
        /*height: 15%; */ /* Original */
    height: 10% !important;
}



/* Clock Styles */
.row.top-row .time.vertical-time {
	position: relative;
	padding: 0;
}

.row.top-row .time.vertical-time > div.clock {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: none;
}

.row.top-row .time.vertical-time > div.clock > ul.clock {
	font-size: 9vh;
	margin: 0;
	padding: 0;
	line-height: 9vh;
    color: #ffffff !important;
}
.row.top-row .time.vertical-time > div.clock > ul.clock > li {
    text-shadow: none !important;
	font-weight: 600;

}
.row.top-row .time.vertical-time > div.clock > ul.clock > li:nth-child(4), 
.row.top-row .time.vertical-time > div.clock > ul.clock > li:nth-child(5) {
    font-size: 4vh;
}

/*
.row.top-row .time.vertical-time > div.clock > ul.clock > li#hours:after {
	content: ":";
	display: inline-block;
	padding: 0;
	margin: 0 -70px 0 10px;
}
*/
/* Clock Styles END */


/* Date Styles */
.row.top-row .vertical-date {
	padding: 0;
}
.row.top-row .vertical-date #dsDate {
    font-size: 2vh !important;
    text-shadow: none !important;
    color: #ffffff;
    font-weight: 400;
    padding: 0;
    margin: 0;
    font-style: normal;
}
.row.top-row .vertical-date #dsDate .hijriDate {
    color: #ffffff;
    font-style: normal;
}
.row.top-row .vertical-date #dsDate .hijriDate:before {
    content: "|";
    display: inline-block;
}
/*
.row.top-row .vertical-date > .align-middle > span:first-child:after  {
	content: ' | ';
	display: inline-block;
	vertical-align: middle;
	padding: 0 10px;
}
.row.top-row .vertical-date > .align-middle > #dsDate,
.row.top-row .vertical-date > .align-middle > span.verticalhijri {
	display: inline-block;
	vertical-align: middle;
	color: #ffffff;
	font-weight: 400;
	margin: 0;
}
.row.top-row .vertical-date > .align-middle > #dsDate, 
.row.top-row .vertical-date > .align-middle > span.verticalhijri > p.hijriDate {
	font-size: 2vh !important;
	color: #ffffff;
	font-weight: 400;
	padding: 0;
	margin: 0;
	font-style: normal;
}
*/
/* Date Styles END */


/* Prayer Times START */

/* Head */
#dsPrayerTimetable thead th.dsPrayerName, #dsPrayerTimetable thead th.dsBegins, #dsPrayerTimetable thead th.dsIqamah {
	font-weight: 600;
	color: #ffffff;
    border-bottom: 2px solid #ffffff !important;
	background: rgba(255,255,255,0.05) !important;
	font-size: 2.5vh;
    padding: 10px 0;
}

/* Body */
#dsPrayerTimetable tbody td.prayerName, #dsPrayerTimetable tbody td.prayerName span, 
#dsPrayerTimetable tbody td .dpt_start, #dsPrayerTimetable tbody td .dpt_jamah, 
#dsPrayerTimetable tbody td.l-red, #dsPrayerTimetable tbody td {
	font-weight: 600;
	border-color: #ffffff;
	font-size: 2.5vh;
	color: #ffffff;
}

/** Prayer times BG normal */
#dsPrayerTimetable tbody > tr > td {
	background: rgba(255,255,255,0.05) !important;
}

/** Prayer times BG Next player highlight */
#dsPrayerTimetable tbody > tr.nextPrayer > td {
	background: rgba(255,255,255,0.20) !important;
}

/** finished prayer disable fade **/
.x-board td span.prayerFinished { opacity: 100% !important; }
	/* Prayer Times END */


/** Slider Start **/

/** Buttons **/
.row.middle-row #carouselExampleIndicators {
    box-sizing: border-box;
    padding-top: 30px;
}
.row.middle-row #carouselExampleIndicators > .carousel-control-prev,
.row.middle-row #carouselExampleIndicators > .carousel-control-next {
	opacity: 0;
}

.row.middle-row #carouselExampleIndicators > .carousel-inner > .carousel-item > .nextPrayer > .align-middle-next-prayer > .dsRamadan {
	background: rgba(255,255,255,0.5) !important;
}
.row.middle-row #carouselExampleIndicators > .carousel-inner > .carousel-item > .nextPrayer > .align-middle-next-prayer > .dsRamadan > .sehri,
.row.middle-row #carouselExampleIndicators > .carousel-inner > .carousel-item > .nextPrayer > .align-middle-next-prayer > .dsRamadan > .iftar {
	font-weight: 600;
	border-color: #ffffff;
	font-size: 2.5vh;
	color: #ffffff;
	background: none !important;
}

.row.middle-row #carouselExampleIndicators > .carousel-inner > .carousel-item > .nextPrayer > .align-middle-next-prayer > #quranVerse,
.row.middle-row #carouselExampleIndicators > .carousel-inner > .carousel-item > .nextPrayer > .align-middle-next-prayer > #quranVerse a > span{
	font-size: 2.5vh;
}

/* Next Prayer START */
.x-board .middle-row .carousel .carousel-inner .carousel-item .nextPrayer *,
.x-board .middle-row .carousel .carousel-inner .carousel-item .nextPrayer * > *,
.x-board .middle-row .carousel .carousel-inner .carousel-item .nextPrayer * > * > * {
    font-weight: 600;
    color: #ffffff !important;
    font-size: 3vh !important;
}  


.row.middle-row #carouselExampleIndicators > .carousel-inner > .carousel-item {
    height: 100%;
}
.row.middle-row #carouselExampleIndicators > .carousel-inner > .carousel-item > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.row.middle-row #carouselExampleIndicators > .carousel-inner > .carousel-item > div > .align-middle-next-prayer {
    position: inherit;
}

#text-carousel .nextPrayer h3 {
	font-weight: 600;
	color: #ffffff;
}

#text-carousel .nextPrayer #dsNextPrayer {
	margin: 20px 30px;
}


/* Next Prayer END */
/** Slider End **/





/* Scroll Text START */
#dsIqamahUpdate {
	margin-top: 58px;
}
#dsIqamahUpdate a {
	color: #ffffff;
	text-decoration: none;
}

.row.bottom-row > .col-sm-12.col-xs-12.height-24 {
	height: 100%;
	padding: 0;
}

.x-board .scrolling-vertical {
	padding-top: 0 !important;
}

.jamahChanges.jamahChanges-vertical, .dsScroll a.scroll {
	font-weight: 600;
	color: #ffffff;
}
/* Scroll Text END */