@keyframes ph-spinner {
	to {
		transform: rotate(360deg);
	}
}

@-webkit-keyframes ph-spinner {
	to {
		-webkit-transform: rotate(360deg);
	}
}

.ph-spinner {
	min-width: 24px;
	min-height: 24px;
}

.ph-spinner:before {
	content: 'Loading';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin-top: -10px;
	margin-left: -10px;
}

.ph-spinner:before {
	content: '';
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, .3);
	border-top-color: rgba(0, 0, 0, .6);
	animation: ph-spinner .6s linear infinite;
	-webkit-animation: ph-spinner .6s linear infinite;
}
.ph-spinner.ph-spinner-dark:before {
	content: '';
	border-radius: 50%;
	border: 2px solid rgba(255,255,255, .3);
	border-top-color: rgba(255,255,255, .6);
	animation: ph-spinner .6s linear infinite;
	-webkit-animation: ph-spinner .6s linear infinite;
}


$second-dot: 16px;
$last-dot: 32px;

.ph-loading {
	background: rgba(0,0,0,0.5);

	.ph-loading-dots {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		-webkit-animation: typing 1s linear infinite normal;
		-moz-animation: typing 1s linear infinite normal;
		animation: typing 1s linear infinite normal;
		position: relative;
		margin-left: -$last-dot/2;
		background-color: rgba(255,255,255, 1);
		box-shadow: $second-dot 0px 0px 0px rgba(255,255,255,0.2),
		$last-dot 0px 0px 0px rgba(255,255,255,0.2);
	}
}

$second-dot: 16px;
$last-dot: 32px;

.ph-loading-image {
	text-align: center;

	.ph-loading-image-dots {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		-webkit-animation: typing 1s linear infinite normal;
		-moz-animation: typing 1s linear infinite normal;
		animation: typing 1s linear infinite normal;
		position: relative;
		display: inline-block;
		margin-left: -$last-dot;
		background-color: rgba(255,255,255, 1);
		box-shadow: $second-dot 0px 0px 0px rgba(255,255,255,0.2),
		$last-dot 0px 0px 0px rgba(255,255,255,0.2);
	}

	&.small {
		.ph-loading-image-dots {
			width: 6px;
			height: 6px;
		}
	}

	&.light {
		.ph-loading-image-dots {
			background-color: rgba(0,0,0, 1);
			box-shadow: $second-dot 0px 0px 0px rgba(0,0,0,0.2),
			$last-dot 0px 0px 0px rgba(0,0,0,0.2);
			-webkit-animation: typing-light 1s linear infinite normal;
			-moz-animation: typing-light 1s linear infinite normal;
			animation: typing-light 1s linear infinite normal;
		}
	}
}

@-webkit-keyframes typing{
	0%{
		background-color: rgba(255,255,255, 1);
		box-shadow: $second-dot 0px 0px 0px rgba(255,255,255,0.2),
		$last-dot 0px 0px 0px rgba(255,255,255,0.2);
	}
	45%{
		background-color: rgba(255,255,255, 0.4);
		box-shadow: $second-dot 0px 0px 0px rgba(255,255,255,1),
		$last-dot 0px 0px 0px rgba(255,255,255,0.2);
	}
	75%{ background-color: rgba(255,255,255, 0.4);
		box-shadow: $second-dot 0px 0px 0px rgba(255,255,255,0.2),
		$last-dot 0px 0px 0px rgba(255,255,255,1);
	}
}

@-moz-keyframes typing{
	0%{
		background-color: rgba(255,255,255, 1);
		box-shadow: $second-dot 0px 0px 0px rgba(255,255,255,0.2),
		$last-dot 0px 0px 0px rgba(255,255,255,0.2);
	}
	45%{
		background-color: rgba(255,255,255, 0.4);
		box-shadow: $second-dot 0px 0px 0px rgba(255,255,255,1),
		$last-dot 0px 0px 0px rgba(255,255,255,0.2);
	}
	75%{ background-color: rgba(255,255,255, 0.4);
		box-shadow: $second-dot 0px 0px 0px rgba(255,255,255,0.2),
		$last-dot 0px 0px 0px rgba(255,255,255,1);
	}
}

@keyframes typing{
	0%{
		background-color: rgba(255,255,255, 1);
		box-shadow: $second-dot 0px 0px 0px rgba(255,255,255,0.2),
		$last-dot 0px 0px 0px rgba(255,255,255,0.2);
	}
	45%{
		background-color: rgba(255,255,255, 0.4);
		box-shadow: $second-dot 0px 0px 0px rgba(255,255,255,1),
		$last-dot 0px 0px 0px rgba(255,255,255,0.2);
	}
	75%{ background-color: rgba(255,255,255, 0.4);
		box-shadow: $second-dot 0px 0px 0px rgba(255,255,255,0.2),
		$last-dot 0px 0px 0px rgba(255,255,255,1);
	}
}

@-webkit-keyframes typing-light {
	0%{
		background-color: rgba(0,0,0, 1);
		box-shadow: $second-dot 0px 0px 0px rgba(0,0,0,0.2),
		$last-dot 0px 0px 0px rgba(0,0,0,0.2);
	}
	45%{
		background-color: rgba(0,0,0, 0.4);
		box-shadow: $second-dot 0px 0px 0px rgba(0,0,0,1),
		$last-dot 0px 0px 0px rgba(0,0,0,0.2);
	}
	75%{ background-color: rgba(0,0,0, 0.4);
		box-shadow: $second-dot 0px 0px 0px rgba(0,0,0,0.2),
		$last-dot 0px 0px 0px rgba(0,0,0,1);
	}
}

@-moz-keyframes typing-light{
	0%{
		background-color: rgba(0,0,0, 1);
		box-shadow: $second-dot 0px 0px 0px rgba(0,0,0,0.2),
		$last-dot 0px 0px 0px rgba(0,0,0,0.2);
	}
	45%{
		background-color: rgba(0,0,0, 0.4);
		box-shadow: $second-dot 0px 0px 0px rgba(0,0,0,1),
		$last-dot 0px 0px 0px rgba(0,0,0,0.2);
	}
	75%{ background-color: rgba(0,0,0, 0.4);
		box-shadow: $second-dot 0px 0px 0px rgba(0,0,0,0.2),
		$last-dot 0px 0px 0px rgba(0,0,0,1);
	}
}

@keyframes typing-light{
	0%{
		background-color: rgba(0,0,0, 1);
		box-shadow: $second-dot 0px 0px 0px rgba(0,0,0,0.2),
		$last-dot 0px 0px 0px rgba(0,0,0,0.2);
	}
	45%{
		background-color: rgba(0,0,0, 0.4);
		box-shadow: $second-dot 0px 0px 0px rgba(0,0,0,1),
		$last-dot 0px 0px 0px rgba(0,0,0,0.2);
	}
	75%{ background-color: rgba(0,0,0, 0.4);
		box-shadow: $second-dot 0px 0px 0px rgba(0,0,0,0.2),
		$last-dot 0px 0px 0px rgba(0,0,0,1);
	}
}

@-webkit-keyframes sk-scaleout {
	0% { -webkit-transform: scale(0) }
	100% {
		-webkit-transform: scale(1.0);
		opacity: 0;
	}
}

@keyframes sk-scaleout {
	0% {
		-webkit-transform: scale(0);
		transform: scale(0);
	} 100% {
		  -webkit-transform: scale(1.0);
		  transform: scale(1.0);
		  opacity: 0;
	  }
}