@font-face { font-family: "BlueHost Sans"; src: url('../fonts/bh_regular.ttf');}
/*@font-face { font-family: "gotham"; src: url('../fonts/gothamrnd-medium.ttf') format('truetype');}*/
@font-face { font-family: "gotham-light"; src: url('../fonts/gothamrnd-light.ttf') format('truetype');}
@font-face { font-family: "gotham-book"; src: url('../fonts/gothamrnd-book.ttf') format('truetype');}
@font-face { font-family: "DroidKufi-Regular"; src: url('../fonts/DroidKufi-Regular.ttf') format('truetype');}
@font-face { font-family: "Lato"; src: url('../fonts/LatoLatin-Hairline.ttf') format('truetype');}

html, body {
font-family: gotham-book, gotham-light, Gotham, Lato, "BlueHost Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
	/*color: #404040;*/
	/* font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));*/
/*	font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
	line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));*/
}
.NextPrayerStyle{
	background-color: rgba(255,255,255,.3);
	font-size: 1.2em;
	color: #ffc104;
	border-radius: 10rem;
}

.wack{
	color:#5a5a5a;
}
.twoDots{
	font-size: 1em;
}
.hms{
	font-size: 3em;
	/*padding:0px 2px 0px 2px;*/
	font-family: Lato;
	vertical-align: sub;
}
.newBG:before{
	content: '';
	display: inline-block;
	width: 150px;
	height: 100%;
	background-image: url('../images/carramar_final.svg');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 50px 50px;
	transition: all ease-in-out 1s;
}


@keyframes rotate_fade {
	0%, 100% { opacity: 0.5; transform : scale(0.1);}
	25% { transform:scale(.4) translateX(140px); opacity: .2;}
	50% { transform:scale(1.4) ; opacity: 1; }
	75% { transform:scale(.2) translateX(-140px); opacity: .2;}
	/*0%,50%,100% { transform: scale(0) translateZ(0px); opacity:0;}*/
}
@keyframes bouncing {
	50% { transform: translateX(40px); }
}
@keyframes colorChange{
	20% { color : green; }
	40% { color: blue; }
	60% { color: yellow; transform: rotateY(180deg);}
	80% { color : purple; }
	100% { color: red;} 
}
.NextPrayer {
	animation: colorChange 4s ease-in-out infinite !important;
}
.NextPrayer:after{
	content: "\f219";
	font-family: "FontAwesome";
	color:black;
	font-size: 12px;
	animation: colorChange 2s ease-in-out infinite !important;
}
.current_prayer span{
	/*display: inline-block;*/
	position: absolute;
	width: 10px;
	height:10px;
	/*transform-style: preserve-3D;*/
	border-radius: 50%;
}
.current_prayer span:nth-child(1){
	background-color: red;
	animation-delay:-0.15s;
}
.current_prayer span:nth-child(2){
	background-color: green;
	animation-delay:-0.3s;
}
.current_prayer span:nth-child(3){
	background-color: blue;
	animation-delay:-0.45s;
}
.current_prayer span:nth-child(4){
	background-color: yellow;
	animation-delay:-0.6s;
}
.current_prayer span{
		animation: rotate_fade 3s linear infinite;
}