#percentage {
	  font-size:1em;
	  font-family:sans-serif;
	  color: gray;
	  text-transform:uppercase;
}


.pre-content {
	position:absolute;
	top:50%;
	left: 50%;
	width: 33%;
	height: auto;
	margin: -16.5% 0 0 -16.5%;
	text-align:center;
}

@media only screen and (min-width: 992px) {
.pre-content {max-width:250px;
			 margin: -125px 0 0 -125px;
			 }
	
}

.lds-ring {
	position:relative;
	width:calc((var(--width) * 5/100 + var(--width))*1px);
	height:auto;
}

.logo {
	
	padding:30px;
	  animation: wh-anim 5s cubic-bezier(0.5, 0, 0.5, 1) infinite;

		 }

@keyframes wh-anim {
 0%,
	50%,
	100% {
		opacity: 1;
	}

	25%,
	75% {
		opacity: .5;
	}
}


.lds-ring img {max-width:100%;}

.lds-ring div {
  box-sizing: border-box;
  display: block;
  width:100%;
  height:100%;
  border-radius: 50%;
  animation: lds-ring 5s cubic-bezier(.5, 0, .5, 1) infinite;
  border-color: gray transparent transparent transparent;
}


@keyframes lds-ring {
    0% {
      transform: rotate(0turn);

    }
    25% {
      transform: rotate(1turn);
    }
    50% {
      transform: rotate(3turn);
    }
    75% {
      transform: rotate(6turn);
    }
    100% {
      transform: rotate(8turn);
	}
	
}