:root {
  --metop-brand-blue: #0028a0;
  --metop-brand-orange: #fb5c03;
  --metop-blue: #0028a0;
  --metop-blue-soft: rgba(0, 40, 160, 0.06);
  --metop-blue-line: rgba(0, 40, 160, 0.22);
}

.metop-brand img,
.metop-footer-brand img {
  object-fit: contain !important;
  height: auto !important;
}

.metop-brand img {
  max-height: 34px;
  max-width: 204px !important;
  width: auto !important;
}

.metop-footer-brand img {
  max-height: 40px;
  max-width: 220px !important;
  width: auto !important;
}

.metop-site-header .metop-brand::after {
  color: #0028a0;
}

/* The supplied reverse mark is designed for dark surfaces. The light variant
 * is used in the header; the footer keeps the reverse artwork. */
.metop-footer-brand > a {
  background-image: none !important;
}

@media (max-width: 767px) {
  .metop-brand img {
    max-height: 27px;
    max-width: 164px !important;
  }

  .metop-footer-brand img {
    max-height: 34px;
    max-width: 190px !important;
  }
}