.loader-bar {
	width: 80%;
    height: 24px;
    margin: 10px 20px 40px 10px;
    text-align: left;
    padding: 2px;
}

.loader-bar input {
	display: none;
}

.loader-bar label {
	position: relative;
	display: block;
	width: 100%;
	height: 60px;
	background: #313131;
	border-radius: 0.4rem;
	border: 6px solid #313131;
	overflow: hidden;
	box-shadow: -2px 0 8px 0 #313131;
}
.loader-bar label div {
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(to bottom, #ff7600 35%, #ff4700);
	height: 100%;
	width: 0%;
	box-shadow: 0 0 8px 1px white inset;
}
.loader-bar label div:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(loader-gears.gif);
	mix-blend-mode: overlay;
	opacity: 0.5;
}
.loader-bar label:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(loader-gears.gif);
    mix-blend-mode: overlay;
    opacity: 0.1;
}

.loader-bar span {
  display: inline-block;
  color: #313131;
  font-size: 25px;
  text-transform: uppercase;
  margin-top: 0.7rem;
  font-family: "Voice-In-My-Head";
}
#cws-progress-bar-percent {
  float: right;
}


/* loading dots */

.loading-text:after {
	font-family: "Voice-In-My-Head";
	color: #313131;
	font-size: 25px;
	content: ' .';
	animation: dots 1s steps(5, end) infinite;
}

@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: #313131;
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 #313131,
      .5em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .25em 0 0 #313131,
      .5em 0 0 #313131;}
}