* {
    
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}


/* Preloader */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f5f5f5;
  /* change if the mask should have another color then white */
  z-index: 99;
  /* makes sure it stays on top */
}

#status {
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  /* is width and height divided by two */
}

.spinner-sm {
  width: 50px;
  height: 50px;
  background-image: url(../dist/images/icon_darmas_white.png);
  background-size: 40%;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #214577;
  border-radius: 50%;
}
.spinner-sm:after,
.spinner-sm:before {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.spinner-sm-1:after {
  position: absolute;
  top: -4px;
  left: -4px;
  border: 4px solid transparent;
  border-top-color: #214577;
  border-bottom-color: #214577;
  animation: spinny 0.8s linear infinite;
}
@keyframes spinny {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(90deg) scale(1.2);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
@keyframes spinny {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(90deg) scale(1.2);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}