@font-face {
font-family: Nasalization; /* set name */
src: url(../fonts/Nasalization.otf); /* url of the font */
}


.loader_count {color: #FFFFFF; z-index:1000;}


/* ---------Page preload--------------------------------------*/
.loader {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index:1000;
-webkit-transform: translate3d(0,0,0);
}

.loader-anim  , .loader-anim2 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
background-color: #77c152;
}

.loader-anim2 {z-index:100}

.loading-text-container {
position: relative;
top:50%;
z-index:1000;
width:150px;
height:90px;
margin:0 auto;
font-family: 'Oswald', sans-serif;
font-weight:700;
}

.loading-text {
font-size: 100px;
color: #2D2D2D;
text-transform: uppercase;
display: block;
line-height: 50px;
position: absolute;
z-index: 100;
font-family: Nasalization;
margin:0 auto;
}

.loading-text strong {display:block;}

.loader_count {
	position: absolute;
	right: -10px;
	top: -150px;
	font-size: 200px;
	z-index: 1;
}

.page-load {
position:fixed;
top:80px;
left:80px;
right:0;
bottom:0;
z-index:119;
-webkit-transform: translate3d(0,0,0);
display:none;
}

.pl-row {
float:left;
width:100%;
overflow:hidden;
height:25%;
position:relative;
z-index:1;
}

.pl-row  span {
	position: absolute;
	left:0;
	right:100%;
	top:0;
	bottom:0;
}

.pl-row  span.pl-row-anim {
	z-index:2;
	background:#77c152;
}

.pl-row  span.pl-row-anim2 {z-index:1000;}

.pl-spinner   {
	position:absolute;
	top:50%;
	left:50%;
	z-index:4;
	width:40px;
	height:40px;
	margin:-20px 0 0 -20px;
	border-radius:100%;
	background:#77c152;
	box-shadow: 0px 0px 0px 12px rgba(255,255,255,0.05);
  	transition: all 500ms cubic-bezier(.19,1,.22,1) 0ms;
	transform:scale(0);
}

.pl-spinner.act-loader {transform:scale(1.0);}

.pl-spinner:before  {
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	border-radius:100%;
	border:2px solid  rgba(255,255,255,0.2);
	animation: rotate 1s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
	box-sizing:border-box;
}

@keyframes rotate {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}


@media only screen and (min-width: 320px) and (max-width: 500px) {
.loading-text {font-size: 60px;}
}


@media only screen and (min-width: 200px) and (max-width: 320px) {
.loading-text {font-size: 50px;}
}