.hm-global-loader {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: #fff;
  justify-content: center;
  align-items: center;
  z-index: 999
}

.hm-global-loader--hidden {
  display: none;
}

.hm-global-loader__hm-logo {
  width: 18px;
  height: 30px;
  background-image:
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAZCAYAAAA8CX6UAAAABGdBTUEAALGPC/xhBQAAAulJREFUOBGNVEtIVGEUPufeO6OT2oNBRTJsUxuDsghKDDMflDW6KGfTKkJqEQi1KYMiIoJs1bJW0mPhC6YZBnVGB8pFhBAuXESERpAQYdBMOnrn/qfzT/2Xf5iZnAtzzznf+c53/8c5g7DFM5JIVELSvm6a5vD5s+1fitGxWELi45Nv6jKb6WkktIO9nYf/xzWKJYkInc30MBAcIKCPxXgKLyo0Fo5fI4JOSUTEalUQjb7brnzdFhSan5/38IpuacTW8WiiXsYpO/lqIh73a7msmyc0srjo/fxt9QIB1Ckyi1pOJvNiNDzTxdgp57e4p3LK5giNhGMt1tL3/Qh4WRGUZbFWIZwpPi8fIQQ5zql1by0UitemkRZMNPoFiRAT3ZwS0y16jEZ0sL4v0D4tcVd1A8UDIKp1hPN6K5GsoC1eknCeT4RnD7pCMuAbupQllPjiMzzEv5qMyNx2hWxyBjhwV1eiVpZGiIHQ3FwVyld6dW2FG68iXwBtBFrkRlrnPK+AfPkc7jMDLxr26npXIRE+6TH0lO0O9nY1BXs6m6G6wm8gPCkoJOCERYBHgZVyH0z09XQEuaPdRLC5eZ05A6OhmE8A9et8XmmTIYiO6KD0LYRBXUTPlxvWoB5nfcR6Xi3U6gmOHZ+194OO6X4g0PaD42Ud4w1VGoT0Swd5L2YKVgoOpuTJHuPO36nXMLpmsNrXXJCjTPp0HvYPGI3MHOMzyRFi6S8GmBjLKyJ4rKZdz8lWARLPdEz6BlIMI5G3u9ac9BJ/ZUcOAeEn/zPeAQ/Ogm1uAtrHuWPu89YadJ48U/BajWwBeOpvkqCHOqFUn2/3KffZlb9jca5jiL82VWqxy0NYgCrrhoyzQtx5Trnf18fqEZe0hcNX997ylp8JtrWlJDW7NVXD+zfGwjNXicRdboMaheuWrz7J0zBU5Wl41N29b0PlcoQUGI1+KkuJ5Q4UcJIF93DzGLwCOdhzXv+2yd6WlqTiKvsHCFQcgJgP8XMAAAAASUVORK5CYII=');
  background-size: 100% auto;
  background-repeat: no-repeat;
  margin: auto;
  transition: opacity .2s ease .2s;
}

.hm-global-loader::before, .hm-global-loader::after {
  content: '';
  display: block;
  background: transparent;
  border: 1px white solid;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 50;
  pointer-events: none;
  border-radius: 50%;
  transition: opacity .2s ease .2s;
  animation-name: spin;
  animation-duration: 500ms;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite
}

.hm-global-loader::before {
  width: 50px;
  height: 50px;
  border-top-color: #dce0e3;
  border-left-color: #dce0e3;
  animation-direction: normal;
}

.hm-global-loader::after {
  width: 40px;
  height: 40px;
  border-top-color: #A9B1BA;
  border-left-color: #A9B1BA;
  animation-direction: reverse;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}