@font-face {
	font-family: 'Titillium Web';
    src:  url('../fonts/Titillium-Web-ExtraLight.ttf.woff') format('woff'),
    url('../fonts/Titillium-Web-ExtraLight.ttf.svg#Titillium-Web-ExtraLight') format('svg'),
    url('../fonts/Titillium-Web-ExtraLight.ttf.eot'),
    url('../fonts/Titillium-Web-ExtraLight.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}



@font-face {
	font-family: 'OpenSansCondLight';
	src: url('../fonts/OpenSansCondLight/OpenSansCondLight.eot');
	src: local('OpenSansCondLight'), url('../fonts/OpenSansCondLight/OpenSansCondLight.woff') format('woff'), url('../fonts/OpenSansCondLight/OpenSansCondLight.ttf') format('truetype');
}

@font-face {
	font-family: "Arial";
	src: url("../fonts/Arial/Arial.eot"); /* IE9*/
	src: url("../fonts/Arial/Arial.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
	url("../fonts/Arial/Arial.woff2") format("woff2"), /* chrome、firefox */
	url("../fonts/Arial/Arial.woff") format("woff"), /* chrome、firefox */
	url("../fonts/Arial/Arial.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
	url("../fonts/Arial/Arial.svg#Arial") format("svg"); /* iOS 4.1- */
}






* { box-sizing: border-box; }

body {
  padding: 0;
  margin: 0;
  font-family: 'Titillium Web', Helvetica, Arial, sans-serif;  
}


h1,h2,h3,h4,h5{
  color: #333;
}
#full-screen-clock{
	position: fixed;
	bottom:0;
	left:0;
	right:0;
	font-size:4vw;
	color:#FFF;
	padding:1vw 5vw;
	background:rgba(0,0,0,0.3);
	text-align:right;
	opacity:0.5;
	z-index:100;
}
.full-screen {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#122;
	/* background-image: url(../img/bg-kubah.png); */
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	z-index:99;
	color:#fff;
}
#display-khutbah{
	background-image: url(../img/bg-kubah.png);
}
#count-down{
	background-image: url(../img/bg-masjid.png);
}
#display-sholat{
	background-image: url(../img/bg-sholat.png);
}
#display-adzan{
	background-image: url(../img/bg-adzan.png);
}
#display-adzan>div{
    position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%,-50%);
    color: #788;
	text-shadow: 0.3vw 0.3vw 0 rgba(0,0,0,.3);
	padding:10vw;
	width: 100%;
	padding: 0 3vw;
	font-size:10vw;
    text-align: center;
    text-transform: uppercase;
	font-family: 'OpenSansCondLight', Helvetica, Arial, sans-serif; 
	/* font-weight:bold; */
}
#display-khutbah>div{
	position: absolute;
    top: 45%;
    left: 50%;
	transform: translate(-50%,-50%);
    color: #788;
	text-shadow: 0.3vw 0.3vw 0 rgba(0,0,0,.3);
	padding:10vw;
	width: 100%;
	padding: 0 3vw;
	font-size:6vw;
    text-align: center;
	font-family: 'OpenSansCondLight', 'Titillium Web', Helvetica, Arial, sans-serif; 
	text-transform: uppercase;
	/* font-weight:bold; */
}

#count-down .counter {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%,-50%);
    color: #788;
	width: 100%;
	padding: 0 3vw;
    text-align: center;
    text-transform: uppercase;
	font-family: 'OpenSansCondLight', Helvetica, Arial, sans-serif;  
}
#count-down .counter>h1{
	margin: 0 auto;
	font-size:7vh;
	line-height:9vh;
	/* background:#F00; */
	width:61.5vw;
	color: #788;
	border: 0.3vh solid #788;
	border-radius: 1vh;
	font-family: 'Titillium Web', 'OpenSansCondLight', Helvetica, Arial, sans-serif; 
	font-weight:bold;
}
#count-down .counter>div{
    display: inline-block;
	width:20vw;
	font-size:25vh;
	line-height:30vh;
	margin:0 0.3vw;
	text-shadow: 1px 1px 0 rgba(0,0,0,.75);
	padding:0;
	/* background:#f00; */
}
#count-down .counter>div>span {
	background:#788;
	font-size:5vh;
	line-height:7vh;
	font-weight:bold;
	text-shadow: none;
	color:#000;
	display: block;
	border-radius: 1vh;
}


/*============== Preloader ==============*/

/* Preloader */
#preloader {
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:#fff; /* change if the mask should have another color then white */
  z-index:99; /* makes sure it stays on top */
}

#status {
  width:200px;
  height:200px;
  position:absolute;
  left:50%; /* centers the loading animation horizontally one the screen */
  top:50%; /* centers the loading animation vertically one the screen */
  background-image:url(../img/preloader.gif); /* path to your loading animation */
  background-repeat:no-repeat;
  background-position:center;
  margin:-100px 0 0 -100px; /* is width and height divided by two */
}



/*
Fade content bs-carousel with hero headers
Code snippet by maridlcrmn (Follow me on Twitter @maridlcrmn) for Bootsnipp.com
Image credits: unsplash.com
*/

/********************************/
/*       Fade Bs-carousel       */
/********************************/
.fade-carousel {
    position: fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:-1;
    /* height: 100vh; */
}
.fade-carousel .carousel-inner .item {
    height: 100vh;
}




/********************************/
/*          Hero Headers        */
/********************************/


.fade-carousel .carousel-inner .item .hero {
    opacity: 0;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s; 
}
.fade-carousel .carousel-inner .item.active .hero {
    opacity: 1;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s;    
}

/********************************/
/*            Overlay           */
/********************************/
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: #080d15;
    opacity: .7;
	/* background-image: url(../img/bg-pattern-01.png); */
}

/********************************/
/*          Custom Buttons      */
/********************************/
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
    color: #f5f5f5;
    background-color: #33cccc;
    border-color: #33cccc;
    outline: none;
    margin: 20px auto;
}

/********************************/
/*       Slides backgrounds     */
/********************************/
.fade-carousel .slides div{
  height: 100vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
  background-image: url(../img/photo-01.jpg);
}
.fade-carousel .slides .slide-2 {
  background-image: url(../img/photo-02.jpg);
}
.fade-carousel .slides .slide-3 {
  background-image: url(../img/photo-03.jpg);
}

.fade-carousel .slides.active .slide-1,
.fade-carousel .slides.active .slide-2,
.fade-carousel .slides.active .slide-3{
	/* gak jadi, resourse prosesornya jadi full */
	/* animation: imgMove1 100s linear infinite; */
}


@keyframes imgMove1 {
	0%   {background-size: 120%;background-position: right bottom;}
	50%  {background-size: 150%;background-position: left top;}
	100% {background-size: 120%;background-position: right bottom;}
}
@keyframes imgMove2 {
	0%   {background-size: 120%;background-position: left top;}
	50%  {background-size: 150%;background-position: right bottom;}
	100% {background-size: 120%;background-position: left top;}
}
@keyframes imgMove3 {
	0%   {background-size: 120%;background-position: right top;}
	50%  {background-size: 150%;background-position: left bottom;}
	100% {background-size: 120%;background-position: right top;}
}


.main{
	
}

#left-container{
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	width:26vw;
	/* background-color:#fff; */
	background:linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 40%, rgba(0,0,0,0.7) 100%);
	box-shadow: 0 0 20vw 20vw rgba(0,0,0,0.7);
	/* background-image: url(../img/bg-pattern-01.png); */
}
#left-container:before{
	display: block;
	content: "";
	position:absolute;
	top: 0;
	right:0;
	bottom:0;
	left:0;
	background-image: url(../img/bg-pattern-01.png);
	opacity:0.6;
}

#jam{
	font-size:6vw;
	/* height:90px; */
	line-height: 0.8;
	/* background:#F00; */
	text-align: center;
	margin:15vh 0 0 0;
	padding:0 4vw 0 0;
	/* font-family: 'OpenSansCondLight', Impact,'Times New Roman', Helvetica, Arial, sans-serif;  */
	font-weight:bold;
	color:#FFF;
	position:relative;
}
#jam div{
	position:absolute;
	top:0.2vw;
	right:3vw;
	/* background:#33cccc; */
	color:#33cccc;
	line-height: 0.8;
	width:4vw;
	font-size:3vw;
	font-weight:bold;
	font-family: 'Titillium Web', Helvetica, Arial, sans-serif;  
	border-left: 0.7px solid rgba(255,255,255,0.6);
	/* padding-left: 1.1vw; */
}
#tgl{
	text-align: center;
	color:#FFF;
	/* background-color:var(--main-bg-color); */
	/* background-color:#33cccc; */
	font-size:2vw;
	margin: 0.8vh auto 7vw auto;
	font-weight:bold;
	position:relative;
}
#tgl:after{
	display: block;
	content: "";
	position:absolute;
	height:6vw;
	width:20vw;
	bottom: -5.8vw;
	right:3vw;
	/* background-color:#e2ad0055; */
	background-image: url(../img/clock-line.png);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}
#jadwal{
	color:#33cccc;
	
	margin: 4vh;
	font-weight:bold;
}
#jadwal .row .col-xs-5{
	font-size:2vw;
	padding-top:1.5vh;
	position:relative;
	padding-left:1.5vw;
	width:50%;
}
#jadwal .row .col-xs-7{
	font-size:3vw;
	/* line-height:4vh; */
	font-weight:bold;
	text-align:right;
	padding-right:1.8vw;
	width:50%;
	color:#FFFFFF;
}
#jadwal .row .col-xs-7 span{
	position:absolute;
	right:0vw;
	top:0.5vw;
	font-size:1vw;
	color:#e2ad00;
	padding: 0 5px;
	border-radius:1px;
}
/* #jadwal .active .col-xs-7 span{ */
	/* color:#000000; */
/* } */
#jadwal .row{
	border-bottom:0.7px solid rgba(52, 152, 219, 0.3);
	/* border-radius:0.5vw; */
	position:relative;
}
#jadwal .active .col-xs-5:before{
	display: block;
	content: "";
	position:absolute;
	height:3vw;
	width:3vw;
	top: 0.7vw;
	right:-1vw;
	/* background-color:#e2ad00; */
	border-radius:5px;
	background-image: url(../img/pattern01.png);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	opacity:0.3;
}

#jadwal .active{
	/* background-color : #33cccc; */
	/* color:#000; */
	border-radius:0.5vw;
	/* border:1.5px solid #33cccc; */
	overflow:hidden;
	/* background-color : #e2ad00AA; */
	background-color : #33cccc33;
	/* background-color : rgba(51,204,204,0.2); */
	/* border:1px solid #33cccc; */
	/* border-top:none; */
	color:#fff;
	font-weight:bold;
	border-color:transparent;
	border-left:0.3vw solid #e2ad00;
	/* border-bottom:0.1vw solid #33cccc99; */
}


#jadwal .active .col-xs-5{
	/* font-weight:bold;
	font-size:2.5vw;
	padding-top:0.5vh; */
	/* padding-top:1.5vh; */
}
/* #jadwal .active .col-xs-7{ */
	/* background-color : #33cccc; */
	/* color:#000; */
/* } */







#right-counter{
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:26vw;
}
#right-counter .counter {
    color: #fff;
    position: absolute;
    top: 40%;
    left: 50%;
	transform: translate(-50%,-50%);
    color: #fff;
	width: 100%;
	padding: 0 3vw;
    text-align: center;
    text-transform: uppercase;
	font-family: 'OpenSansCondLight', Helvetica, Arial, sans-serif;  
}
#right-counter .counter>h1{
	margin: 0 auto;
	font-size:5vh;
	line-height:7vh;
	font-family: 'Titillium Web', 'OpenSansCondLight', Helvetica, Arial, sans-serif; 
	font-weight:bold;
	/* background:#F00; */
	width:46.5vw;
	color: #33cccc;
	border: 0.3vh solid #33cccc;
	border-radius: 1vh;
}
#right-counter .counter>div{
    display: inline-block;
	width:15vw;
	font-size:20vh;
	line-height:25vh;
	margin:0 0.3vw;
	text-shadow: 1px 1px 0 rgba(0,0,0,.75);
	padding:0;
	color:#FFF;
	/* background:#f00; */
}
#right-counter .counter>div>span {
	background:#e2ad00;
	font-size:5vh;
	line-height:7vh;
	font-weight:bold;
	text-shadow: none;
	color:#000;
	display: block;
	border-radius: 1vh;
}



#right-container{
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:26vw;
	/* background-color:rgba(255,0,0,0.3) */
}
#running-text:before{
	display: block;
	content: "";
	position:absolute;
	height:3.5vw;
	width:5vw;
	top: 0;
	left:0;
	background-color:#e2ad00;
	border-radius:5px;
	background-image: url(../img/news.png);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	
}
#running-text{
	height:3.5vw;
	width:70vw;
	color:#fff;
	/* margin:3vh 3vw 4vh 3vw; */
	background-color:rgba(51,204,204,0.2);
	position:fixed;
	bottom:2vh;
	/* bottom:4vh; */
	right:2vw;
	border-radius:5px;
	
	/* right:30vw; */
	/* overflow: hidden; */
	/* overflow:show; */
	/* background-image: url(img/logo.png); */
	/* background-size: contain; */
	/* background-position: center center; */
	/* background-repeat: no-repeat; */
}

#running-text .item i{
	color:#e2ad00;
	margin-left: 20px;
	margin-right: 7px;
	font-size: 2vw;
	
}
#running-text .item{
	position: absolute;
	left: 5.5vw;
	right: 0.5vw;
	height:100%;
	overflow: hidden;
	
	font-family: 'Titillium Web', 'OpenSansCondLight', Helvetica, Arial, sans-serif; 
	padding-top: 0.3vw;
	font-size: 2.1vw;
	white-space: nowrap;
}


/* @keyframes scroll-left { */
	/* 0% { */
		/* transform: translateX(100%); */
	/* } */
	/* 100% { */
		/* transform: translateX(-100%); */
	/* } */
/* } */


#logo{
	height:7vw;
	width:70vw;
	/* margin:3vh 3vw 4vh 3vw; */
	/* background-color: #f00; */
	position:fixed;
	/* bottom:-4vh; */
	bottom:5.6vw;
	right:2vw;
	/* background-color:#F00; */
	/* background-image: url(../img/logo.png); */
	background-size: contain;
	background-position: left bottom;
	background-repeat: no-repeat;
}

.quote-carousel {
    /* position: relative; */
	/* background-color:rgba(255,255,0,0.3); */
	/* top:0; */
	/* right:0; */
	/* bottom:0; */
	/* left:0; */
    /* height: 100vh; */
}
.quote-carousel .carousel-inner .item {
    height: 100vh;
}
.quote-carousel .carousel-inner .item .hero {
    color: #fff;
    position: absolute;
    top: 40%;
    left: 50%;
	transform: translate(-50%,-50%);
    /* z-index: 3; */
    color: #fff;
	/* background-color:#f00; */
	width: 100%;
	padding: 0 3vw;
    text-align: right;
    /* text-transform: uppercase; */
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
	font-family: 'OpenSansCondLight', 'Titillium Web', Helvetica, Arial, sans-serif;  
}

.quote-carousel .text1{
	text-transform: uppercase;
	font-size: 3.3vw;
	color:#33cccc;
}
/* .quote-carousel .text2:before{
	display: block;
    content: "";
	font-size:10vw;
	background-image: url(../img/quote.png);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	font-family:  Helvetica, Arial, sans-serif;  
	position:absolute;
	top: -1vw;
	left:-2vw;
    width: 2vw;
	height:2vw;
    margin: 0 1rem;
} */

.quote-carousel .text2{
	font-size: 2.9vw;
	position:relative;

/*	font-style:italic; */
}
.quote-carousel .text3:before{
	display: block;
	content: "";
	position:absolute;
	height:5vw;
	width:160vw;
	top: -1vw;
	right:-4vw;

	/* background-color:#e2ad0055; */
	/*background-image: url(../img/hadist-line.png); */

	/* background-size: contain; */
	background-position: right center;
	background-repeat: no-repeat;
}
.quote-carousel .text3{
font-weight: bold;

	font-size: 2vw;
/*	font-style: italic; */
	position:relative;
		color:#fff;
}