.mprm-floating-circles.mprm-floating-circle-wrapper {
  position: relative;
  margin: auto;
  transform: scale(0.6);
  .mprm-floating-circle {
	position: absolute;
	background-color: rgb(255, 255, 255);
	border-radius: 10px;
	animation-name: mprm_floating_fade;
	animation-duration: 1.2s;
	animation-iteration-count: infinite;
	animation-direction: normal;
  }

  &.big-preloader {
	width: 60px;
	height: 60px;
	z-index: 100;

	.mprm-floating-circle {
	  height: 10px;
	  width: 10px;
	  &#mprm-floating-circle-rotate-1 {
		left: 0;
		top: 24px;
		animation-delay: 0.45s;
	  }

	  &#mprm-floating-circle-rotate-2 {
		left: 8px;
		top: 8px;
		animation-delay: 0.6s;
	  }

	  &#mprm-floating-circle-rotate-3 {
		left: 24px;
		top: 0;
		animation-delay: 0.75s;
	  }

	  &#mprm-floating-circle-rotate-4 {
		right: 8px;
		top: 8px;
		animation-delay: 0.9s;
	  }

	  &#mprm-floating-circle-rotate-5 {
		right: 0;
		top: 24px;
		animation-delay: 1.05s;
	  }

	  &#mprm-floating-circle-rotate-6 {
		right: 8px;
		bottom: 8px;
		animation-delay: 1.2s;
	  }

	  &#mprm-floating-circle-rotate-7 {
		left: 24px;
		bottom: 0;
		animation-delay: 1.35s;
	  }

	  &#mprm-floating-circle-rotate-8 {
		left: 8px;
		bottom: 8px;
		animation-delay: 1.5s;
	  }
	}
  }
  &.normal-preloader {
	width: 45px;
	height: 45px;
	z-index: 100;
	.mprm-floating-circle {
	  height: 8px;
	  width: 8px;
	  &#mprm-floating-circle-rotate-1 {
		left: 0;
		top: 18px;
		animation-delay: 0.45s;
	  }

	  &#mprm-floating-circle-rotate-2 {
		left: 6px;
		top: 6px;
		animation-delay: 0.6s;
	  }

	  &#mprm-floating-circle-rotate-3 {
		left: 18px;
		top: 0;
		animation-delay: 0.75s;
	  }

	  &#mprm-floating-circle-rotate-4 {
		right: 6px;
		top: 6px;
		animation-delay: 0.9s;
	  }

	  &#mprm-floating-circle-rotate-5 {
		right: 0;
		top: 18px;
		animation-delay: 1.05s;
	  }

	  &#mprm-floating-circle-rotate-6 {
		right: 6px;
		bottom: 6px;
		animation-delay: 1.2s;
	  }

	  &#mprm-floating-circle-rotate-7 {
		left: 18px;
		bottom: 0;
		animation-delay: 1.35s;
	  }

	  &#mprm-floating-circle-rotate-8 {
		left: 6px;
		bottom: 6px;
		animation-delay: 1.5s;
	  }
	}
  }
  &.small-preloader {
	width: 30px;
	height: 30px;

	z-index: 100;
	.mprm-floating-circle {
	  height: 6px;
	  width: 6px;

	  &#mprm-floating-circle-rotate-1 {
		left: 0;
		top: 12px;
		animation-delay: 0.45s;
	  }

	  &#mprm-floating-circle-rotate-2 {
		left: 4px;
		top: 4px;
		animation-delay: 0.6s;
	  }

	  &#mprm-floating-circle-rotate-3 {
		left: 12px;
		top: 0;
		animation-delay: 0.75s;
	  }

	  &#mprm-floating-circle-rotate-4 {
		right: 4px;
		top: 4px;
		animation-delay: 0.9s;
	  }

	  &#mprm-floating-circle-rotate-5 {
		right: 0;
		top: 12px;
		animation-delay: 1.05s;
	  }

	  &#mprm-floating-circle-rotate-6 {
		right: 4px;
		bottom: 4px;
		animation-delay: 1.2s;
	  }

	  &#mprm-floating-circle-rotate-7 {
		left: 12px;
		bottom: 0;
		animation-delay: 1.35s;
	  }

	  &#mprm-floating-circle-rotate-8 {
		left: 4px;
		bottom: 4px;
		animation-delay: 1.5s;
	  }
	}
  }
}

@keyframes mprm_floating_fade {
  0% {
	background-color: rgb(0, 0, 0);
  }
  100% {
	background-color: rgb(255, 255, 255);
  }
}