#jpreOverlay {
	background-color: #000000;
	position:absolute;
	width:100%;
	height:100%;
}
#jpreSlide{
	font-size:22px;
	color:#ccc;
	text-align:center;
	width:50%;
	height:30%;
}
#jpreLoader{
	width:400px;
	height:2px;
	background:#111;
	border-radius:25px;
	-moz-border-radius:25px;
	-webkit-border-radius:25px;
	position:relative;
	margin:0 auto;
}

#jpreLoader:before{
	content:"";
	position:absolute;
	bottom:calc(100% + 70px);
	left:50%;
	transform:translateX(-50%);
	width:520px;
	height:180px;
	background:url('../images/logo.png?v=2') no-repeat center center;
	background-size:contain;
	filter:brightness(0) invert(1);
}

/* Mobile responsive loading screen */
@media only screen and (max-width: 767px) {
	#jpreOverlay {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
	}
	
	#jpreSlide {
		width: 80% !important;
		max-width: 300px;
		height: auto !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		margin: 0 auto;
	}
	
	#jpreLoader {
		width: 200px !important;
		height: 2px;
		margin: 0 auto;
		position: relative;
	}
	
	#jpreLoader:before {
		width: 300px !important;
		height: 110px !important;
		bottom: calc(100% + 35px);
		left: 50%;
		transform: translateX(-50%);
	}
	
	#jpreLoader:after {
		bottom: calc(100% + 10px);
		left: 50%;
		margin-left: -25px;
		display: none !important; /* Hide the 3 dots on mobile */
	}
	
	#jprePercentage {
		font-size: 48px !important;
		margin-top: 10px;
		position: relative;
		z-index: 1;
	}
	
	#jSplash {
		line-height: 1.5;
		font-size: 14px;
	}
}

@media only screen and (max-width: 480px) {
	#jpreLoader {
		width: 150px !important;
	}
	
	#jpreLoader:before {
		width: 240px !important;
		height: 85px !important;
		bottom: calc(100% + 25px);
	}
	
	#jprePercentage {
		font-size: 36px !important;
	}
}

#jpreLoader:after{
	content:"";
	position:absolute;
	bottom:calc(100% + 20px);
	left:50%;
	width:10px;
	height:10px;
	margin-left:-25px;
	border-radius:50%;
	background:#fff;
	box-shadow:25px 0 0 rgba(255,255,255,.4), 50px 0 0 rgba(255,255,255,.2);
	animation:loaderDots 1.1s infinite ease-in-out;
	display: none !important; /* Hide the 3 dots */
}

#jpreBar {
	background:#222;
	border-radius:25px;
	-moz-border-radius:25px;
	-webkit-border-radius:25px;
}

#jprePercentage {
	color:#111;
	z-index:-1;
	font-family:Arial,Helvetica,sans-serif;
	text-align:center;
	margin-top:10px;
	font-size:96px;
	margin-top:-10px;
}

#jSplash{
	line-height:200%;
}

#jSplash section{
	padding:0;
	display:block;
	background:none !important;
}

@keyframes loaderDots{
	0%{
		opacity:1;
		box-shadow:25px 0 0 rgba(255,255,255,.4), 50px 0 0 rgba(255,255,255,.2);
	}
	50%{
		opacity:.5;
		box-shadow:25px 0 0 rgba(255,255,255,.8), 50px 0 0 rgba(255,255,255,.4);
	}
	100%{
		opacity:1;
		box-shadow:25px 0 0 rgba(255,255,255,.4), 50px 0 0 rgba(255,255,255,.2);
	}
}