:root {
	--iconSize: 30px;
	--pathRadius: 275px;
	--animationSpeed: 2.5s;
}

#loadingModal {
	color: white;
	position: absolute;
	left: 50%;
	top: 50%;
	/*/padding-top: calc(var(--pathRadius) / 128 * 11);*/
	/*border: 1px solid white;
	border-radius: calc(var(--pathRadius) / 128 * 150);*/
	transform: translate(-50%, -50%);
	width: calc(var(--pathRadius) / 128 * 150);
	/*height: calc(var(--pathRadius) / 128 * 150);*/
	text-align: center;
	overflow: hidden;
	padding:0!important;
	height: auto;
}
#loadingModal h3 { font-size: 200%; letter-spacing: 0.05em; margin: 0; display: none; }
#loadingModal .logo { height: 60px; width: auto; position: absolute; 
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.lds-roller {
  display: inline-block;
  position: relative;
  width: var(--pathRadius);
  height: var(--pathRadius);
}
.lds-roller div {
  animation: lds-roller var(--animationSpeed) cubic-bezier(0.25, 0.05, 0.25, 0.85) infinite;
  transform-origin: calc(var(--pathRadius) / 2) calc(var(--pathRadius) / 2);
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: var(--iconSize);
  height: var(--iconSize);
  margin: calc(var(--iconSize) / -2) 0 0 calc(var(--iconSize) / -2);
  
  animation: lds-rotation var(--animationSpeed) cubic-bezier(0.25, 0.05, 0.25, 0.85) infinite;
}

.lds-roller.svg div:after { /* SVG icon version of loading animation */
  background-image: var(--loadingIconSVG);
  background-size: 100% 100%;
}

.lds-roller.css div:after { /* CSS clip-path shape version of loading animation */
  clip-path: var(--loadingIconCSS);
  background: var(--loadingIconColor);
}

.lds-roller div:nth-child(1) {
  animation-delay: calc(var(--animationSpeed) / 2 * -0.1);
}
.lds-roller div:nth-child(1):after {
  top: calc(var(--pathRadius) / 128 * 100);
  left: calc(var(--pathRadius) / 128 * 100);
  animation-delay: calc(var(--animationSpeed) / 2 * -0.1);
}
.lds-roller div:nth-child(2) {
  animation-delay: calc(var(--animationSpeed) / 2 * -0.2);
}
.lds-roller div:nth-child(2):after {
  top: calc(var(--pathRadius) / 128 * 108);
  left: calc(var(--pathRadius) / 128 * 90);
  animation-delay: calc(var(--animationSpeed) / 2 * -0.2);
}
.lds-roller div:nth-child(3) {
  animation-delay: calc(var(--animationSpeed) / 2 * -0.3);
}
.lds-roller div:nth-child(3):after {
  top: calc(var(--pathRadius) / 128 * 114);
  left: calc(var(--pathRadius) / 128 * 78);
  animation-delay: calc(var(--animationSpeed) / 2 * -0.3);
}
.lds-roller div:nth-child(4) {
  animation-delay: calc(var(--animationSpeed) / 2 * -0.4);
}
.lds-roller div:nth-child(4):after {
  top: calc(var(--pathRadius) / 128 * 116);
  left: calc(var(--pathRadius) / 128 * 64);
  animation-delay: calc(var(--animationSpeed) / 2 * -0.4);
}
.lds-roller div:nth-child(5) {
  animation-delay: calc(var(--animationSpeed) / 2 * -0.5);
}
.lds-roller div:nth-child(5):after {
  top: calc(var(--pathRadius) / 128 * 114);
  left: calc(var(--pathRadius) / 128 * 50);
  animation-delay: calc(var(--animationSpeed) / 2 * -0.5);
}
.lds-roller div:nth-child(6) {
  animation-delay: calc(var(--animationSpeed) / 2 * -0.6);
}
.lds-roller div:nth-child(6):after {
  top: calc(var(--pathRadius) / 128 * 108);
  left: calc(var(--pathRadius) / 128 * 38);
  animation-delay: calc(var(--animationSpeed) / 2 * -0.6);
}
.lds-roller div:nth-child(7) {
  animation-delay: calc(var(--animationSpeed) / 2 * -0.7);
}
.lds-roller div:nth-child(7):after {
  top: calc(var(--pathRadius) / 128 * 100);
  left: calc(var(--pathRadius) / 128 * 28);
  animation-delay: calc(var(--animationSpeed) / 2 * -0.7);
}
.lds-roller div:nth-child(8) {
  animation-delay: calc(var(--animationSpeed) / 2 * -0.8);
}
.lds-roller div:nth-child(8):after {
  top: calc(var(--pathRadius) / 128 * 90);
  left: calc(var(--pathRadius) / 128 * 20);
  animation-delay: calc(var(--animationSpeed) / 2 * -0.8);
}

@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes lds-rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(calc(360deg * var(--loadingIconRotation)));
  }
}































:root {
	--starSize: 30px;
	--pathRadius: 275px;
	--animationSpeed: 2.5s;
}

#loadingModal {
	color: white;
	position: absolute;
	left: 50%;
	top: 50%;
	/*/padding-top: calc(var(--pathRadius) / 128 * 11);*/
	/*border: 1px solid white;
	border-radius: calc(var(--pathRadius) / 128 * 150);*/
	transform: translate(-50%, -50%);
	width: calc(var(--pathRadius) / 128 * 150);
	/*height: calc(var(--pathRadius) / 128 * 150);*/
	text-align: center;
	overflow: hidden;
	padding:0!important;
	height: auto;
}
#loadingModal h3 { font-size: 200%; letter-spacing: 0.05em; margin: 0; display: none; }
#loadingModal .logo { height: 60px; width: auto; position: absolute; 
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.lds-roller {
  display: inline-block;
  position: relative;
  width: var(--pathRadius);
  height: var(--pathRadius);
}
.lds-roller div {
  animation: lds-roller var(--animationSpeed) cubic-bezier(0.25, 0.05, 0.25, 0.85) infinite;
  transform-origin: calc(var(--pathRadius) / 2) calc(var(--pathRadius) / 2);
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: var(--starSize);
  height: var(--starSize);
  margin: calc(var(--starSize) / -2) 0 0 calc(var(--starSize) / -2);
  background-image: url(../images/star.svg); background-size: 100% 100%;
  color: green;
}
.lds-roller div:nth-child(1) {
  animation-delay: calc(var(--animationSpeed) / 2 * -0.1);
}
.lds-roller div:nth-child(1):after {
  top: calc(var(--pathRadius) / 128 * 100);
  left: calc(var(--pathRadius) / 128 * 100);
}
.lds-roller div:nth-child(2) {
  animation-delay: calc(var(--animationSpeed) / 2 * -0.2);
}
.lds-roller div:nth-child(2):after {
  top: calc(var(--pathRadius) / 128 * 108);
  left: calc(var(--pathRadius) / 128 * 90);
}
.lds-roller div:nth-child(3) {
  animation-delay: calc(var(--animationSpeed) / 2 * -0.3);
}
.lds-roller div:nth-child(3):after {
  top: calc(var(--pathRadius) / 128 * 114);
  left: calc(var(--pathRadius) / 128 * 78);
}
.lds-roller div:nth-child(4) {
  animation-delay: calc(var(--animationSpeed) / 2 * -0.4);
}
.lds-roller div:nth-child(4):after {
  top: calc(var(--pathRadius) / 128 * 116);
  left: calc(var(--pathRadius) / 128 * 64);
}
.lds-roller div:nth-child(5) {
  animation-delay: calc(var(--animationSpeed) / 2 * -0.5);
}
.lds-roller div:nth-child(5):after {
  top: calc(var(--pathRadius) / 128 * 114);
  left: calc(var(--pathRadius) / 128 * 50);
}
.lds-roller div:nth-child(6) {
  animation-delay: calc(var(--animationSpeed) / 2 * -0.6);
}
.lds-roller div:nth-child(6):after {
  top: calc(var(--pathRadius) / 128 * 108);
  left: calc(var(--pathRadius) / 128 * 38);
}
.lds-roller div:nth-child(7) {
  animation-delay: calc(var(--animationSpeed) / 2 * -0.7);
}
.lds-roller div:nth-child(7):after {
  top: calc(var(--pathRadius) / 128 * 100);
  left: calc(var(--pathRadius) / 128 * 28);
}
.lds-roller div:nth-child(8) {
  animation-delay: calc(var(--animationSpeed) / 2 * -0.8);
}
.lds-roller div:nth-child(8):after {
  top: calc(var(--pathRadius) / 128 * 90);
  left: calc(var(--pathRadius) / 128 * 20);
}

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