#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
z-index: 9999999999999;
overflow: hidden;
width: 100%;
height: 100vh;
position: absolute;
}

#status {
width: 400px;
width: 25rem;
height: 200px;
height: 12.5rem;
position: absolute;
left: 50%;
top: 50%;
margin: -150px 0 0 -200px;
margin: -9.375rem 0 0 -12.5rem;
color: #fff;
}

#preloader-text {
width: 100%; 
text-align: center;
color: #fff;
font-family: 'Arial';
font-size: 16px;
font-size: 1rem;
position: absolute;
bottom:-20px;
bottom:-1.25;
text-transform: uppercase;
}
	
#preloader-text:before {content:"Please wait - Page is loading.";}
	
.ball {
width: 40px;
width: 2.5rem;
height: 40px;
height: 2.5rem;
border-radius: 50%;
background-color: #b5248b;
animation: bounce 0.5s;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-direction: normal;
animation-direction: alternate;
animation-timing-function: cubic-bezier(.5,0.05,1,.5);
animation-iteration-count: infinite;
margin-left: -25px;
margin-left: -1.5625rem;
left: 50%;
position: absolute;
}

@keyframes bounce {
  from { transform: translate3d(0, 0, 0);     }
  to   { transform: translate3d(0, 150px, 0); }
  to   { transform: translate3d(0, 9.375rem, 0); }
}

/* Prefix Support */
ball {
  -webkit-animation-name: bounce;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: cubic-bezier(.5,0.05,1,.5);
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes bounce {
  from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to   { -webkit-transform: translate3d(0, 150px, 0);
	     -webkit-transform: translate3d(0, 9.375rem, 0);
	  transform: translate3d(0, 200px, 0);
	  transform: translate3d(0, 12.5rem, 0);}
}