/*************************
    - 2. Page loader -
*************************/
.page-loader {
	position:fixed;
	z-index:9999999;
	width:100vw;
	height:100vh;
	background:#000;
}

.formLoader{
	position:fixed;
	z-index:9999999;
	width:100vw;
	height:100vh;
	background:#000;
		opacity:0.6;
		display:none;
}

.page-loader .loading, .formLoader .fromLoading {
	position:relative;
	width:100%;
	height:80px;
	top:calc(50% - 50px);
	text-align:center;
	margin:0 auto;
}

.page-loader .loading:after, .formLoader .fromLoading:after {
	content:attr(data-content);
	position:absolute;
	top:90px;
	width:100%;
	left:0;
	right:0;
	height:1px;
	font-size:12px;
	color:#fff;
	letter-spacing:1px;
	text-align:center;
	text-transform:uppercase;
}

.page-loader .loading span, .formLoader .fromLoading span {
	position:absolute;
	border:4px solid #000;
	border-radius:100%;
}

.page-loader .loading span:nth-child(1), .formLoader .fromLoading span:nth-child(1){
	width:80px;
	height:80px;
	left:calc(50% - 40px);
	-webkit-animation:spin-1 1s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
			animation:spin-1 1s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}

.page-loader .loading span:nth-child(2), .formLoader .fromLoading span:nth-child(2){
	top:20px;
	left:calc(50% - 20px);
	width:40px;
	height:40px;
	-webkit-animation:spin-2 1s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
			animation:spin-2 1s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}

@-webkit-keyframes spin-1 {
 	0% 		{opacity:1;}
 	50% 	{opacity:0.3;}
 	100% 	{opacity:1;}
}

@keyframes spin-1 {
 	0% 		{opacity:1;}
	50% 	{opacity:0.3;}
	100% 	{opacity:1;}
}

@-webkit-keyframes spin-2 {
 	0% 		{opacity:0.3;}
 	50% 	{opacity:1;}
 	100% 	{opacity:0.3;}
}

@keyframes spin-2 {
	0% 		{opacity:0.3;}
	50% 	{opacity:1;}
	100% 	{opacity:0.3;}
}