body{margin:0;}

.page {
	width: 100%;
}
.page > h1 {
	font-weight: 300 !important;
	color: #fff;
	font-size: 34px;
	margin: 0;
}
.circles-container {
	min-height: 400px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.loader {
	position: relative;
	user-select: none;
	box-sizing: border-box;
	width: 150px;
	height: 150px;
}
.loader-bg {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-sizing: border-box;
	border: 5px solid #eeeeee;
	display: flex;
	align-items: center;
	justify-content: center;
}
.spinner-holder-one {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 50%;
	height: 50%;
	background: transparent;
	box-sizing: border-box;
}
.spinner-holder-two {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: transparent;
	box-sizing: border-box;
}
.loader-spinner {
	width: 200%;
	height: 200%;
	border-radius: 50%;
	border: 5px solid rgb(135, 206, 235);
	box-sizing: border-box;
}
.animate-0-25-a {
	transform: rotate(90deg);
	transform-origin: 100% 100%;
}
.animate-0-25-b {
	transform: rotate(-90deg);
	transform-origin: 100% 100%;
}
.animate-25-50-a {
	transform: rotate(180deg);
	transform-origin: 100% 100%;
}
.animate-25-50-b {
	transform: rotate(-90deg);
	transform-origin: 100% 100%;
}
.animate-50-75-a {
	transform: rotate(270deg);
	transform-origin: 100% 100%;
}
.animate-50-75-b {
	transform: rotate(-90deg);
	transform-origin: 100% 100%;
}
.animate-75-100-a {
	transform: rotate(0deg);
	transform-origin: 100% 100%;
}
.animate-75-100-b {
	transform: rotate(-90deg);
	transform-origin: 100% 100%;
}
.text {
	text-align: center;
	font-size: 20px;
	color: rgb(135, 206, 235);
	font-weight: bold;
}
.blue .loader-bg {
	border-color: rgba(255, 255, 255, 0.1);
	/*box-shadow: inset 2px 2px 20px 0 rgba(0, 0, 0, 0.1) !important;*/
}
.blue .text {
	font-size: 20px;
	color: #3ba8b6 !important;
}
.blue .loader-spinner {
	border-color: #3ba8b6;
}
.blue.circle-loaded-75 .text {
	color: #57a3d8 !important;
}
.blue.circle-loaded-75 .loader-spinner {
	border-color: #57a3d8;
}
.cobalt .loader-bg {
	border-color: #ccc;
	/*box-shadow: inset 2px 2px 20px 0 rgba(0,0,0,0.4) !important;*/
}
.cobalt .text {
	font-size: 20px;
	color: #333 !important;
}
.cobalt .loader-spinner {
	border-color: #333;
}
.fire .loader {
}
.fire .loader-bg {
	border-color: #333;
	/*box-shadow: inset 2px 2px 20px 0 rgba(0, 0, 0, 0.4);*/
}
.fire .text {
	font-size: 20px;
	color: #ee4230 !important;
}
.fire .loader-spinner {
	border-color: #ee4230;
}
.fire.circle-loaded-75 .text {
	color: #c6594e !important;
}
.fire.circle-loaded-75 .loader-spinner {
	border-color: #c6594e;
}
.matte .loader-bg {
	border-color: rgba(255, 255, 255, 0.4);
	/*box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.6);*/
}
.matte .text {
	color: rgba(20, 20, 20) !important;
	font-weight: bold;
}
.matte .loader-spinner {
	border-color: rgba(20, 20, 20);
}
.purple .loader-bg {
	border-color: rgba(255, 255, 255, 0.1);
	/*box-shadow: inset 2px 2px 20px 0 rgba(0, 0, 0, 0.1) !important;*/
}
.purple .text {
	font-size: 20px;
	color: #7b708d !important;
}
.purple .loader-spinner {
	border-color: #7b708d;
}
.purple.circle-loaded-75 .text {
	color: #a186ce !important;
}
.purple.circle-loaded-75 .loader-spinner {
	border-color: #a186ce;
}
.loader-bg {
	border-color: rgba(255, 255, 255, 0.4);
	/*box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.6);*/
}
.text {
	color: rgb(135, 206, 235) !important;
	font-weight: bold;
}
.loader-spinner {
	border-color: rgb(135, 206, 235);
}
.white .loader-bg {
	border-color: rgba(255, 255, 255, 0.1);
	/*box-shadow: inset 2px 2px 20px 0 rgba(0, 0, 0, 0.1) !important;*/
}
.white .text {
	font-size: 20px;
	color: #fff !important;
}
.white .loader-spinner {
	border-color: #fff;
}
.white.circle-loaded-75 .text {
	color: #ddd !important;
}
.white.circle-loaded-75 .loader-spinner {
	border-color: #ddd;
}

}
.page > h1 {
  font-weight: 300 !important;
  color: #fff;
  font-size:34px;
  margin:0;
}
.circles-container {
  min-height: 400px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.loader {
    position: relative;
    user-select: none;
    box-sizing: border-box;
    width: 150px;
    height: 150px;
}
.loader-bg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
    border: 5px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: center;
}
.spinner-holder-one {
    position: absolute;
    top:0;
    left:0;
    overflow: hidden;
    width: 50%;
    height: 50%;
    background: transparent;
    box-sizing: border-box;
}
.spinner-holder-two {
    position: absolute;
    top:0;
    left:0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: transparent;
    box-sizing: border-box;
}
.loader-spinner {
    width: 200%;
    height: 200%;
    border-radius: 50%;
    border: 5px solid rgb(135, 206, 235);
    box-sizing: border-box;
}  
.animate-0-25-a {
    transform: rotate(90deg);
    transform-origin: 100% 100%;
}
.animate-0-25-b {
    transform: rotate(-90deg);
    transform-origin: 100% 100%;
}
.animate-25-50-a {
    transform: rotate(180deg);
    transform-origin: 100% 100%;
}
.animate-25-50-b {
    transform: rotate(-90deg);
    transform-origin: 100% 100%;
}
.animate-50-75-a {
    transform: rotate(270deg);
    transform-origin: 100% 100%;
}
.animate-50-75-b {
    transform: rotate(-90deg);
    transform-origin:100% 100%;
}
.animate-75-100-a {
    transform: rotate(0deg);
    transform-origin: 100% 100%;
}
.animate-75-100-b {
    transform: rotate(-90deg);
    transform-origin: 100% 100%;
}
.text {
    text-align: center;
    font-size: 20px;
    color: rgb(135, 206, 235);
    font-weight: bold;  
}
.blue .loader-bg {
  border-color: rgba(255,255,255,0.1);
  /*box-shadow: inset 2px 2px 20px 0 rgba(0,0,0,0.1) !important;*/
}
.blue .text {
  font-size: 20px;
  color: #3ba8b6 !important;
}
.blue .loader-spinner {
  border-color: #3ba8b6;
}
.blue.circle-loaded-75 .text {
  color: #57a3d8 !important;
}
.blue.circle-loaded-75 .loader-spinner {
  border-color: #57a3d8;
}
.cobalt .loader-bg {
  border-color: #ccc;
  /*box-shadow: inset 2px 2px 20px 0 rgba(0,0,0,0.4) !important;*/
}
.cobalt .text {
  font-size: 20px;
  color: #333 !important;
}
.cobalt .loader-spinner {
  border-color: #333;
}
.fire .loader {
}
.fire .loader-bg {
  border-color: #333;
  /*box-shadow: inset 2px 2px 20px 0 rgba(0,0,0,0.4);*/
}
.fire .text {
  font-size: 20px;
  color: #ee4230 !important;
}
.fire .loader-spinner {
  border-color: #ee4230;
}
.fire.circle-loaded-75 .text {
  color: #c6594e !important;
}
.fire.circle-loaded-75 .loader-spinner {
  border-color: #c6594e;
}
.matte .loader-bg {
  border-color: rgba(255,255,255,0.4);
  /*box-shadow: 2px 2px 20px 0 rgba(0,0,0,0.6);*/
}
.matte .text {
  color: rgba(20, 20, 20) !important;
  font-weight: bold;
}
.matte .loader-spinner {
  border-color: rgba(20, 20, 20);
}
.purple .loader-bg {
  border-color: rgba(255,255,255,0.1);
  /*box-shadow: inset 2px 2px 20px 0 rgba(0,0,0,0.1) !important;*/
}
.purple .text {
  font-size: 20px;
  color: #7b708d !important;
}
.purple .loader-spinner {
  border-color: #7b708d;
}
.purple.circle-loaded-75 .text {
  color: #a186ce !important;
}
.purple.circle-loaded-75 .loader-spinner {
  border-color: #a186ce;
}
.loader-bg {
  border-color: rgba(255,255,255,0.4);
  /*box-shadow: 2px 2px 20px 0 rgba(0,0,0,0.6);*/
}
.text {
  color: rgb(135, 206, 235) !important;
  font-weight: bold;
}
.loader-spinner {
  border-color: rgb(135, 206, 235);
}
.white .loader-bg {
  border-color: rgba(255,255,255,0.1);
  /*box-shadow: inset 2px 2px 20px 0 rgba(0,0,0,0.1) !important;*/
}
.white .text {
  font-size: 20px;
  color: #fff !important;
}
.white .loader-spinner {
  border-color: #fff;
}
.white.circle-loaded-75 .text {
  color: #ddd !important;
}
.white.circle-loaded-75 .loader-spinner {
  border-color: #ddd;
}



.yellow .loader-bg {
	border-color: rgba(255, 255, 255, 0.1);
	/*box-shadow: inset 2px 2px 20px 0 rgba(0, 0, 0, 0.1) !important;*/
}

.yellow .text {
	font-size: 20px;
	color: #d2c315 !important;
}

.yellow .loader-spinner {
	border-color: #d2c315;
}

.yellow.circle-loaded-75 .text {
	color: #ffeb3b !important;
}

.yellow.circle-loaded-75 .loader-spinner {
	border-color: #ffeb3b;
}

.yellow .loader-bg {
  border-color: rgba(255,255,255,0.1);
  /*box-shadow: inset 2px 2px 20px 0 rgba(0,0,0,0.1) !important;*/
}
.yellow .text {
  font-size: 20px;
  color: #d2c315 !important;
}
.yellow .loader-spinner {
  border-color: #d2c315;
}
.yellow.circle-loaded-75 .text {
  color: #ffeb3b !important;
}
.yellow.circle-loaded-75 .loader-spinner {
  border-color: #ffeb3b;
}




.dkgray .loader-bg {
	border-color: rgba(255, 255, 255, 0.1);
}

.dkgray .text {
	font-size: 20px;
	color: #333333 !important;
}

.dkgray .loader-spinner {
	border-color: #333333;
}

.dkgray.circle-loaded-75 .text {
	color: #333333 !important;
}

.dkgray.circle-loaded-75 .loader-spinner {
	border-color: #333333;
}

.dkgray .loader-bg {
	border-color: rgba(255,255,255,0.1);
	/*box-shadow: inset 2px 2px 20px 0 rgba(0,0,0,0.1) !important;*/
}

.dkgray .text {
	font-size: 20px;
	color: #333333 !important;
}

.dkgray .loader-spinner {
	border-color: #333333;
}

.dkgray.circle-loaded-75 .text {
	color: #333333 !important;
}

.dkgray.circle-loaded-75 .loader-spinner {
	border-color: #333333;
}