:root {
  --night: #eef2f6;
  --cyan: #0046a8;
  --yellow: #000080;
}

body {
  color: #00205b;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #e8edf3;
  background-image:
    radial-gradient(circle at 8% 17%, #8aa1bb 0 1px, transparent 1.5px),
    radial-gradient(circle at 29% 74%, #b8c4d0 0 1px, transparent 1.5px),
    radial-gradient(circle at 67% 21%, #9eb0c1 0 1px, transparent 1.5px),
    radial-gradient(circle at 89% 61%, #b8c4d0 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 45%, #8fa9c2 0 1px, transparent 1.5px);
}

.portal {
  color: #00205b;
  background: #fff;
  border-color: #8b8b8b;
  box-shadow: 0 10px 35px #20344d2b;
}

.wordmark-logo { background: transparent; }
.company-name { color: #001d5b; }
.panel { background: #fbfdff; }
.rates h3,
.panel h2,
.rates h2,
.contact h2,
.meter-box h3,
.masthead h1,
.company-name { color: #00205b; }
.meter-box { background: #eef4ff; }
.contact { background: #fff; }
.surcharge,
.established { color: #00205b; }
.small-print { border-color: #abb6c2; }
footer { color: #00205b; border-color: #7a8794; }
footer a,
.panel a,
.rates a,
.contact > p a,
.contact-links a { color: #00205b; }

.red-button,
.blue-button { color: #fff !important; }
.gray-button { color: #00205b !important; }

/* buttons follow the logo: red, white, blue */
.pixel-nav a,
.cta,
.contact-links a {
  background: #e00022;
  color: #fff !important;
}

.pixel-nav a:nth-child(2),
.contact-links a:nth-child(2),
.cta-stack .cta:nth-child(2) {
  background: #fff;
  color: #016aab !important;
}

.pixel-nav a:nth-child(3),
.contact-links a:nth-child(3),
.cta-stack .cta:nth-child(3) {
  background: #016aab;
  color: #fff !important;
}