/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/

.preloader{
	position:fixed;
	top:0;
	left:0;
	z-index:99999;
	display:flex;
	align-items:center;
	width:100%;
	height:100%;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;

	&.loaded{
		opacity:0;
		visibility:hidden;
		transform:scale(1.5);
		-webkit-transform:scale(1.5);
	}

}

/*--------------------------------------------------------------
# lds-circle
--------------------------------------------------------------*/

.lds-circle{
	display:inline-block;
	width:40px;
	height:40px;
	border-radius:50%;
	animation:lds-circle 2.4s cubic-bezier(0,0.2,0.8,1) infinite;
}

@keyframes lds-circle{
	0%,100%{
		animation-timing-function:cubic-bezier(0.5,0,1,0.5);
	}
	0%{
		transform:rotateY(0deg);
	}
	50%{
		transform:rotateY(1800deg);
		animation-timing-function:cubic-bezier(0,0.5,0.5,1);
	}
	100%{
		transform:rotateY(3600deg);
	}
}

/*--------------------------------------------------------------
# lds-default
--------------------------------------------------------------*/

.lds-default{
	display:inline-block;
	position:relative;
	width:80px;
	height:80px;

	div{
		position:absolute;
		width:6px;
		height:6px;
		border-radius:50%;
		animation:lds-default 1.2s linear infinite;

		&:nth-child(1){
			animation-delay:0s;
			top:37px;
			left:66px;
		}

		&:nth-child(2){
			animation-delay:-0.1s;
			top:22px;
			left:62px;
		}

		&:nth-child(3){
			animation-delay:-0.2s;
			top:11px;
			left:52px;
		}

		&:nth-child(4){
			animation-delay:-0.3s;
			top:7px;
			left:37px;
		}

		&:nth-child(5){
			animation-delay:-0.4s;
			top:11px;
			left:22px;
		}

		&:nth-child(6){
			animation-delay:-0.5s;
			top:22px;
			left:11px;
		}

		&:nth-child(7){
			animation-delay:-0.6s;
			top:37px;
			left:7px;
		}

		&:nth-child(8){
			animation-delay:-0.7s;
			top:52px;
			left:11px;
		}

		&:nth-child(9){
			animation-delay:-0.8s;
			top:62px;
			left:22px;
		}

		&:nth-child(10){
			animation-delay:-0.9s;
			top:66px;
			left:37px;
		}

		&:nth-child(11){
			animation-delay:-1s;
			top:62px;
			left:52px;
		}

		&:nth-child(12){
			animation-delay:-1.1s;
			top:52px;
			left:62px;
		}

	}

}

@keyframes lds-default{
	0%,20%,80%,100%{
		transform:scale(1);
	}
	50%{
		transform:scale(1.5);
	}
}

/*--------------------------------------------------------------
# lds-dual-ring
--------------------------------------------------------------*/

.lds-dual-ring{
	display:inline-block;
	width:80px;
	height:80px;

	&:after{
		content:" ";
		display:block;
		width:64px;
		height:64px;
		margin:8px;
		border-radius:50%;
		border-width:6px;
		border-style:solid;
		border-right-color:transparent;
		border-left-color:transparent;
		animation:lds-dual-ring 1.2s linear infinite;
	}

}

@keyframes lds-dual-ring{
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform:rotate(360deg);
	}
}

/*--------------------------------------------------------------
# lds-ellipsis
--------------------------------------------------------------*/

.lds-ellipsis{
	display:inline-block;
	position:relative;
	width:80px;
	height:80px;

	div{
		position:absolute;
		top:33px;
		width:13px;
		height:13px;
		border-radius:50%;
		animation-timing-function:cubic-bezier(0,1,1,0);

		&:nth-child(1){
			left:8px;
			animation:lds-ellipsis1 0.6s infinite;
		}

		&:nth-child(2){
			left:8px;
			animation:lds-ellipsis2 0.6s infinite;
		}

		&:nth-child(3){
			left:32px;
			animation:lds-ellipsis2 0.6s infinite;
		}

		&:nth-child(4){
			left:56px;
			animation:lds-ellipsis3 0.6s infinite;
		}

	}

}

@keyframes lds-ellipsis1{
	0%{
		transform:scale(0);
	}
	100%{
		transform:scale(1);
	}
}

@keyframes lds-ellipsis3{
	0%{
		transform:scale(1);
	}
	100%{
		transform:scale(0);
	}
}

@keyframes lds-ellipsis2{
	0%{
		transform:translate(0,0);
	}
	100%{
		transform:translate(24px,0);
	}
}

/*--------------------------------------------------------------
# lds-facebook
--------------------------------------------------------------*/

.lds-facebook{
	display:inline-block;
	position:relative;
	width:80px;
	height:80px;

	div{
		display:inline-block;
		position:absolute;
		left:8px;
		width:16px;
		animation:lds-facebook 1.2s cubic-bezier(0,0.5,0.5,1) infinite;

		&:nth-child(1){
			left:8px;
			animation-delay:-0.24s;
		}

		&:nth-child(2){
			left:32px;
			animation-delay:-0.12s;
		}

		&:nth-child(3){
			left:56px;
			animation-delay:0;
		}

	}

}

@keyframes lds-facebook{
	0%{
		top:8px;
		height:64px;
	}
	50%,100%{
		top:24px;
		height:32px;
	}
}

/*--------------------------------------------------------------
# lds-grid
--------------------------------------------------------------*/

.lds-grid{
	display:inline-block;
	position:relative;
	width:80px;
	height:80px;

	div{
		position:absolute;
		width:16px;
		height:16px;
		border-radius:50%;
		animation:lds-grid 1.2s linear infinite;

		&:nth-child(1){
			top:8px;
			left:8px;
			animation-delay:0s;
		}

		&:nth-child(2){
			top:8px;
			left:32px;
			animation-delay:-0.4s;
		}

		&:nth-child(3){
			top:8px;
			left:56px;
			animation-delay:-0.8s;
		}

		&:nth-child(4){
			top:32px;
			left:8px;
			animation-delay:-0.4s;
		}

		&:nth-child(5){
			top:32px;
			left:32px;
			animation-delay:-0.8s;
		}

		&:nth-child(6){
			top:32px;
			left:56px;
			animation-delay:-1.2s;
		}

		&:nth-child(7){
			top:56px;
			left:8px;
			animation-delay:-0.8s;
		}

		&:nth-child(8){
			top:56px;
			left:32px;
			animation-delay:-1.2s;
		}

		&:nth-child(9){
			top:56px;
			left:56px;
			animation-delay:-1.6s;
		}

	}

}

@keyframes lds-grid{
	0%,100%{
		opacity:1;
	}
	50%{
		opacity:0.5;
	}
}

/*--------------------------------------------------------------
# lds-heart
--------------------------------------------------------------*/

.lds-heart{
	display:inline-block;
	position:relative;
	width:80px;
	height:80px;
	transform:rotate(45deg);
	transform-origin:40px 40px;

	div{
		top:32px;
		left:32px;
		position:absolute;
		width:32px;
		height:32px;
		animation:lds-heart 1.2s infinite cubic-bezier(0.215,0.61,0.355,1);

		&:after,
		&:before{
			content:" ";
			position:absolute;
			display:block;
			width:32px;
			height:32px;
		}

		&:before{
			left:-24px;
			border-radius:50% 0 0 50%;
		}

		&:after{
			top:-24px;
			border-radius:50% 50% 0 0;
		}

	}

}

@keyframes lds-heart{
	0%{
		transform:scale(0.95);
	}
	5%{
		transform:scale(1.1);
	}
	39%{
		transform:scale(0.85);
	}
	45%{
		transform:scale(1);
	}
	60%{
		transform:scale(0.95);
	}
	100%{
		transform:scale(0.9);
	}
}

/*--------------------------------------------------------------
# sk-rotating-plane
--------------------------------------------------------------*/

.lds-hourglass{
	display:inline-block;
	position:relative;
	width:80px;
	height:80px;

	&:after{
		content:" ";
		display:block;
		border-radius:50%;
		width:0;
		height:0;
		margin:8px;
		box-sizing:border-box;
		border-width:32px;
		border-style:solid;
		border-left-color:transparent;
		border-right-color:transparent;
		animation:lds-hourglass 1.2s infinite;
	}

}

@keyframes lds-hourglass{
	0%{
		transform:rotate(0);
		animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);
	}
	50%{
		transform:rotate(900deg);
		animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);
	}
	100%{
		transform:rotate(1800deg);
	}
}

/*--------------------------------------------------------------
# lds-ring
--------------------------------------------------------------*/

.lds-ring{
	display:inline-block;
	position:relative;
	width:80px;
	height:80px;

	div{
		box-sizing:border-box;
		display:block;
		position:absolute;
		width:64px;
		height:64px;
		margin:8px;
		border-width:8px;
		border-style:solid;
		border-radius:50%;
		animation:lds-ring 1.2s cubic-bezier(0.5,0,0.5,1) infinite;
		border-right-color:transparent;
		border-bottom-color:transparent;
		border-left-color:transparent;

		&:nth-child(1){
			animation-delay:-0.45s;
		}

		&:nth-child(2){
			animation-delay:-0.3s;
		}

		&:nth-child(3){
			animation-delay:-0.15s;
		}

	}

}

@keyframes lds-ring{
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform:rotate(360deg);
	}
}

/*--------------------------------------------------------------
# lds-ripple
--------------------------------------------------------------*/

.lds-ripple{
	display:inline-block;
	position:relative;
	width:80px;
	height:80px;

	div{
		position:absolute;
		border-width:4px;
		border-style:solid;
		opacity:1;
		border-radius:50%;
		animation:lds-ripple 1s cubic-bezier(0,0.2,0.8,1) infinite;

		&:nth-child(2){
			animation-delay:-0.5s;
		}

	}

}

@keyframes lds-ripple{
	0%{
		top:36px;
		left:36px;
		width:0;
		height:0;
		opacity:1;
	}
	100%{
		top:0px;
		left:0px;
		width:72px;
		height:72px;
		opacity:0;
	}
}

/*--------------------------------------------------------------
# lds-roller
--------------------------------------------------------------*/

.lds-roller{
	display:inline-block;
	position:relative;
	width:80px;
	height:80px;

	div{
		animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;
		transform-origin:40px 40px;

		&:after{
			content:" ";
			display:block;
			position:absolute;
			width:7px;
			height:7px;
			border-radius:50%;
			margin:-4px 0 0 -4px;
		}
		&:nth-child(1){
			animation-delay:-0.036s;
		}
		&:nth-child(1):after{
			top:63px;
			left:63px;
		}
		&:nth-child(2){
			animation-delay:-0.072s;
		}
		&:nth-child(2):after{
			top:68px;
			left:56px;
		}
		&:nth-child(3){
			animation-delay:-0.108s;
		}
		&:nth-child(3):after{
			top:71px;
			left:48px;
		}
		&:nth-child(4){
			animation-delay:-0.144s;
		}
		&:nth-child(4):after{
			top:72px;
			left:40px;
		}
		&:nth-child(5){
			animation-delay:-0.18s;
		}
		&:nth-child(5):after{
			top:71px;
			left:32px;
		}
		&:nth-child(6){
			animation-delay:-0.216s;
		}
		&:nth-child(6):after{
			top:68px;
			left:24px;
		}
		&:nth-child(7){
			animation-delay:-0.252s;
		}
		&:nth-child(7):after{
			top:63px;
			left:17px;
		}
		&:nth-child(8){
			animation-delay:-0.288s;
		}
		&:nth-child(8):after{
			top:56px;
			left:12px;
		}

	}

}

@keyframes lds-roller{
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform:rotate(360deg);
	}
}

/*--------------------------------------------------------------
# lds-spinner
--------------------------------------------------------------*/

.lds-spinner{
	color:official;
	display:inline-block;
	position:relative;
	width:80px;
	height:80px;

	div{
		transform-origin:40px 40px;
		animation:lds-spinner 1.2s linear infinite;

		&:after{
			content:" ";
			display:block;
			position:absolute;
			top:3px;
			left:37px;
			width:6px;
			height:18px;
			border-radius:20%;
		}

		&:nth-child(1){
			transform:rotate(0deg);
			animation-delay:-1.1s;
		}

		&:nth-child(2){
			transform:rotate(30deg);
			animation-delay:-1s;
		}

		&:nth-child(3){
			transform:rotate(60deg);
			animation-delay:-0.9s;
		}

		&:nth-child(4){
			transform:rotate(90deg);
			animation-delay:-0.8s;
		}

		&:nth-child(5){
			transform:rotate(120deg);
			animation-delay:-0.7s;
		}

		&:nth-child(6){
			transform:rotate(150deg);
			animation-delay:-0.6s;
		}

		&:nth-child(7){
			transform:rotate(180deg);
			animation-delay:-0.5s;
		}

		&:nth-child(8){
			transform:rotate(210deg);
			animation-delay:-0.4s;
		}

		&:nth-child(9){
			transform:rotate(240deg);
			animation-delay:-0.3s;
		}

		&:nth-child(10){
			transform:rotate(270deg);
			animation-delay:-0.2s;
		}

		&:nth-child(11){
			transform:rotate(300deg);
			animation-delay:-0.1s;
		}

		&:nth-child(12){
			transform:rotate(330deg);
			animation-delay:0s;
		}

	}

}

@keyframes lds-spinner{
	0%{
		opacity:1;
	}
	100%{
		opacity:0;
	}
}