/* -----------------------------------------
   Ajax loading Styles
----------------------------------------- */
body, html{
	width: 100%;
	height: 100%;
}

body.loading{cursor: wait; }


/* -----------------------------------------
   Ajax loading etc
----------------------------------------- */
.loadframe{
	height: 100%;
	width: 100%;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 1;
	background: black;
}

body.loading .loadframe{
	height: 100%;
	display: block;
	position: fixed;
	opacity: 1;
	z-index: 999;
	}

body.loading .loadframe .vocal-mark{
	opacity: 1;
	}

body.loading .loadframe .border-box{
	height: 100%;
	width: 100%;
	opacity: 1;
	border-width: 30px;
	}

body.loading .loadframe .icon-pointer{
	font-size: 50px;
	color: white;
	margin-left: 30px;
	margin-top: 15px;
	float: left;
	}

body.loading .loadframe .border-box.loader-out {
	border-width: 0px;
	opacity: 0;	
}

body.loading .loadframe .icon-pointer.loader-out {
	opacity: 0;	
}


.loadframe .vocal-mark {
border-width: 0px;
border-color: white;
border-style: solid;
position: absolute;
height: 175px;
width: 300px;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
opacity: 0;
-webkit-transition: all 0.5s cubic-bezier(1,.07,.17,.77);
-moz-transition: all 0.5s cubic-bezier(1,.07,.17,.77);
transition: all 0.5s cubic-bezier(1,.07,.17,.77);
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
}

.loadframe .border-box {
border-width: 0px;
border-color: white;
border-style: solid;
position: relative;
width: 100%;
height: 100%;
opacity: 0;
opacity: 0;
-webkit-transition: all 0.5s cubic-bezier(1,.07,.17,.77);
-moz-transition: all 0.5s cubic-bezier(1,.07,.17,.77);
transition: all 0.5s cubic-bezier(1,.07,.17,.77);
 -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
}