@font-face {
    font-family: EnglishFont;
    src: url(EnglishFont.TTF);
}
.page-content {
	height: 100%;
}

/* loader css starts from here */
.loader {
  opacity: 0.6;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #444;
	display: flex;
    justify-content: center;
    align-items: center;
}

.loader .loader-inner {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #000;
	display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transition: width .5s, height 1s; /* For Safari 3.1 to 6.0 */
    transition: width .5s, height 1s;
}
.loader.success .loader-inner,
.loader.error .loader-inner {
	width: 300px;
    height: 210px;
    border-radius: 5px;
}

.loader .loader-inner .loading-box {
	text-align: center;
	width: 100%;
    padding: 2em;
}
.loader .loader-inner .loading-box .loader-message {
	padding: 1em 0;
	color: white;
}

.loader-message
{
  font-family: EnglishFont;
  font-size: 30px;
}
.loader-inner {
  opacity:1;
}

.loader .loader-inner .loading-box .circular-loader {
    border: 3px solid #f3f3f3; /* Light grey */
    border-top: 3px solid #444; /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
    margin: 0 auto;
    transition: all .5s ease-out;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader.error .loader-inner .loading-box .circular-loader {
	border-top: 3px solid #f3f3f3; 
	animation: none;
}

.loader .loader-inner .loading-box .circular-loader:before,
.loader .loader-inner .loading-box .circular-loader:after {
	content: '';
	height: 0px;
    width: 0px;
	background-color: white;
    position: absolute;
    -webkit-transition: height .5s; /* For Safari 3.1 to 6.0 */
    transition: height .5s;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}