/* Header logo mark supplied by the client. The wordmark remains unchanged. */
.site-header .brand {
  padding-left: 50px;
}

.site-header .brand .brand-mark {
  width: 38px;
  height: 46px;
  background: url("/assets/alario-mark-v17.png") center / contain no-repeat;
  transform: translateY(-50%);
}

.site-header .brand .brand-mark::before,
.site-header .brand .brand-mark::after,
.site-header .brand .brand-mark i {
  display: none;
}

/* The same mark replaces the former decorative icon in the fixed footer. */
.compact-footer .footer-brand {
  padding-left: 42px;
}

.compact-footer .footer-brand .brand-mark {
  width: 31px;
  height: 38px;
  background: url("/assets/alario-mark-v17.png") center / contain no-repeat;
  filter: brightness(0) invert(1);
  transform: translateY(-50%);
}

.compact-footer .footer-brand .brand-mark::before,
.compact-footer .footer-brand .brand-mark::after,
.compact-footer .footer-brand .brand-mark i {
  display: none;
}

@media (max-width: 620px) {
  .site-header .brand {
    padding-left: 42px;
  }

  .site-header .brand .brand-mark {
    width: 32px;
    height: 39px;
    transform: translateY(-50%);
  }

  .compact-footer .footer-brand {
    padding-left: 36px;
  }

  .compact-footer .footer-brand .brand-mark {
    width: 27px;
    height: 33px;
  }
}