body {
  background-color: #333;
}

#loader {
    background: rgba(0,0,0,0.75);
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  /*background-color: #333;*/
  left: 50%;
  /* margin-left: -40px; */
  top: 50%;
  /* margin-top: -40px; */
  transform: translate(-50%,-50%);
}

.loading:before {
  content: '';
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  top: 50%;
  /* margin-top: -18px; */
  left: 50%;
  /* margin-left: -18px; */
  /* border-radius: 50%; */
  /* border-width: 10px 0px; */
  border-style: solid;
  /* border-color: #a9a9a9 rgb(216 33 33 / 0.0); */
  -webkit-animation: spin 3s infinite;
  -moz-animation: spin 3s infinite;
  animation: spin 3s infinite;
  /* transform: translate(-50%,-50%); */
  top: 0;
  left: 0;
  border: 0px;
  border-top: 10px solid #b7babd;
  border-bottom: 10px solid #0b0b0c;
  border-left: 10px solid #0a0c0c;
  border-right: 10px solid #0d0d0e;
  border-radius: 50%;
}
.loading:after {
  content: '';
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  top: 50%;
  /* margin-top: -3px; */
  left: 50%;
  /* margin-left: -3px; */
  border-radius: 50%;
  background-color: #d82121;
  -webkit-animation: pulse 6s infinite, borderPulse 6s infinite;
  -moz-animation: pulse 6s infinite, borderPulse 6s infinite;
  animation: pulse 6s infinite, borderPulse 6s infinite;
  transform: translate(-50%,-50%);
  opacity: 0;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(1080deg);
  }
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  50% {
    -moz-transform: rotate(360deg);
  }
  100% {
    -moz-transform: rotate(1080deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(1080deg);
    -moz-transform: rotate(1080deg);
    -ms-transform: rotate(1080deg);
    -o-transform: rotate(1080deg);
    transform: rotate(1080deg);
  }
}
@-webkit-keyframes pulse {
  0% {
    background-color: rgba(216, 33, 33, 0.2);
  }
  13% {
    background-color: rgba(216, 33, 33, 0.2);
  }
  15% {
    background-color: rgba(216, 33, 33, 0.9);
  }
  28% {
    background-color: rgba(216, 33, 33, 0.9);
  }
  30% {
    background-color: rgba(216, 33, 33, 0.2);
  }
  43% {
    background-color: rgba(216, 33, 33, 0.2);
  }
  45% {
    background-color: rgba(216, 33, 33, 0.9);
  }
  70% {
    background-color: rgba(216, 33, 33, 0.9);
  }
  74% {
    background-color: rgba(216, 33, 33, 0.2);
  }
  100% {
    background-color: rgba(216, 33, 33, 0.9);
  }
}
@-moz-keyframes pulse {
  0% {
    background-color: rgba(216, 33, 33, 0.2);
  }
  13% {
    background-color: rgba(216, 33, 33, 0.2);
  }
  15% {
    background-color: rgba(216, 33, 33, 0.9);
  }
  28% {
    background-color: rgba(216, 33, 33, 0.9);
  }
  30% {
    background-color: rgba(216, 33, 33, 0.2);
  }
  43% {
    background-color: rgba(216, 33, 33, 0.2);
  }
  45% {
    background-color: rgba(216, 33, 33, 0.9);
  }
  70% {
    background-color: rgba(216, 33, 33, 0.9);
  }
  74% {
    background-color: rgba(216, 33, 33, 0.2);
  }
  100% {
    background-color: rgba(216, 33, 33, 0.9);
  }
}
@keyframes pulse {
  0% {
    background-color: rgba(216, 33, 33, 0.2);
  }
  13% {
    background-color: rgba(216, 33, 33, 0.2);
  }
  15% {
    background-color: rgba(216, 33, 33, 0.9);
  }
  28% {
    background-color: rgba(216, 33, 33, 0.9);
  }
  30% {
    background-color: rgba(216, 33, 33, 0.2);
  }
  43% {
    background-color: rgba(216, 33, 33, 0.2);
  }
  45% {
    background-color: rgba(216, 33, 33, 0.9);
  }
  70% {
    background-color: rgba(216, 33, 33, 0.9);
  }
  74% {
    background-color: rgba(216, 33, 33, 0.2);
  }
  100% {
    background-color: rgba(216, 33, 33, 0.9);
  }
}
@-webkit-keyframes borderPulse {
  0% {
    box-shadow: 0 0 0 0 #333, 0 0 0 1px rgba(216, 33, 33, 0.8);
  }
  40% {
    box-shadow: 0 0 0 1px #333, 0 0 0 2px rgba(216, 33, 33, 0.8);
  }
  80% {
    box-shadow: 0 0 0 3px #333, 0 0 1px 3px rgba(216, 33, 33, 0.8);
  }
}
@-moz-keyframes borderPulse {
  0% {
    box-shadow: 0 0 0 0 #333, 0 0 0 1px rgba(216, 33, 33, 0.8);
  }
  40% {
    box-shadow: 0 0 0 1px #333, 0 0 0 2px rgba(216, 33, 33, 0.8);
  }
  80% {
    box-shadow: 0 0 0 3px #333, 0 0 1px 3px rgba(216, 33, 33, 0.8);
  }
}
@keyframes borderPulse {
  0% {
    box-shadow: 0 0 0 0 #333, 0 0 0 1px rgba(216, 33, 33, 0.8);
  }
  40% {
    box-shadow: 0 0 0 1px #333, 0 0 0 2px rgba(216, 33, 33, 0.8);
  }
  80% {
    box-shadow: 0 0 0 3px #333, 0 0 1px 3px rgba(216, 33, 33, 0.8);
  }
}