.hfsf {
  /* HTML5 display-role reset for older browsers */
}

.hfsf * {
  box-sizing: border-box;
}

.hfsf div, .hfsf span, .hfsf h1, .hfsf h2, .hfsf h3, .hfsf p, .hfsf a, .hfsf img, .hfsf ol, .hfsf ul, .hfsf li, .hfsf form, .hfsf label, .hfsf nav, .hfsf section, .hfsf button {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

.hfsf footer, .hfsf header, .hfsf nav, .hfsf section {
  display: block;
}

.hfsf ol,
.hfsf ul {
  list-style: none;
}

.hfsf a {
  outline: none;
  text-decoration: none;
  color: inherit;
}

@keyframes hfs-blinking-dot {
  0%,
  100% {
    opacity: 0;
  }
  40%,
  70% {
    opacity: 1;
  }
}

.hfsh,
.hfsf,
.hfs-amp {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: auto;
}

.hfsh,
.hfs-amp {
  color: #ccc;
}

.hfs-i::before {
  color: inherit;
  font-size: inherit;
}

.hfsDisableVerticalScroll {
  overflow-x: hidden;
  overflow-y: hidden;
}

.hfsf {
  background-color: #2a2a2a;
  color: #ccc;
  font-family: "FoundersGroteskMono", Courier, "Courier New", monospace;
  font-size: .75rem;
  letter-spacing: -0.5px;
  padding: 109px 20px 60px 20px;
  position: relative;
  text-transform: uppercase;
}

@media only screen and (min-width: 758px) {
  .hfsf {
    padding: 40px 40px 60px 140px;
  }
}

.hfsf::before, .hfsf::after {
  background-color: transparent;
  background-image: radial-gradient(#999 1px, transparent 1px);
  background-size: 5px 5px;
  background-position: 1px 1px;
  position: absolute;
  content: '';
  display: block;
  width: 40px;
  height: 40px;
}

.hfsf::before {
  height: 80px;
  right: 2px;
  top: 0;
}

.hfsf::after {
  bottom: 3px;
  left: 0;
}

.hfsf a:hover {
  opacity: 0.7;
}

.hfsf a:active {
  opacity: 0.5;
}

.hfsf .home {
  position: absolute;
  top: 40px;
  left: 20px;
  font-size: 22.5px;
  color: #fff;
}

@media only screen and (min-width: 758px) {
  .hfsf .home {
    left: 40px;
  }
}

.hfsf .links {
  margin-bottom: 24px;
}

.hfsf .links ul {
  position: relative;
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  justify-content: flex-start;
  /*
        The number of list elements is added as data attrbute in footer/default.ejs.
        This attribute will always be an even number.

        This is an attempt to combat the overflow caused
        by failing to update the widths and heights when links are modified.
      */
  height: 11rem;
}

.hfsf .links ul[data-li="10"] {
  height: 13.75rem;
}

.hfsf .links ul[data-li="12"] {
  height: 16.5rem;
}

.hfsf .links ul[data-li="14"] {
  height: 19.25rem;
}

.hfsf .links ul[data-li="16"] {
  height: 22rem;
}

@media only screen and (min-width: 758px) {
  .hfsf .links ul {
    height: 8rem;
  }
  .hfsf .links ul[data-li="10"] {
    height: 10rem;
  }
  .hfsf .links ul[data-li="12"] {
    height: 12rem;
  }
  .hfsf .links ul[data-li="14"] {
    height: 14rem;
  }
  .hfsf .links ul[data-li="16"] {
    height: 16rem;
  }
}

@media only screen and (min-width: 1000px) {
  .hfsf .links ul {
    align-content: flex-start;
    height: 6rem;
  }
  .hfsf .links ul[data-li="10"], .hfsf .links ul[data-li="12"] {
    height: 8rem;
  }
  .hfsf .links ul[data-li="14"] {
    height: 10rem;
  }
  .hfsf .links ul[data-li="16"] {
    height: 12rem;
  }
}

.hfsf .links li {
  height: 2.75rem;
}

@media only screen and (min-width: 758px) {
  .hfsf .links li {
    height: 2rem;
    width: 50%;
  }
}

@media only screen and (min-width: 1000px) {
  .hfsf .links li {
    height: 2rem;
    width: 30%;
    margin-right: 20px;
  }
  .hfsf .links li:nth-of-type(-n+4) {
    width: 20%;
  }
}

@media only screen and (min-width: 1240px) {
  .hfsf .links li {
    width: 20%;
  }
}

@media only screen and (max-width: 757px) {
  .hfsf .links ul li {
    width: 50%;
  }
  .hfsf .links ul[data-li="8"] li:nth-child(n + 5),
  .hfsf .links ul[data-li="10"] li:nth-child(n + 6),
  .hfsf .links ul[data-li="12"] li:nth-child(n + 7),
  .hfsf .links ul[data-li="14"] li:nth-child(n + 8),
  .hfsf .links ul[data-li="16"] li:nth-child(n + 9) {
    width: calc(50% - 10px);
  }
}

.hfsf .copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 24px;
  width: 100%;
  height: 50px;
}

@media only screen and (min-width: 758px) {
  .hfsf .copy {
    flex-direction: row;
    justify-content: flex-start;
    height: auto;
  }
}

.hfsf .copy .footerNBC {
  margin-bottom: 10px;
}

.hfsf .copy p {
  color: #999;
}

@media only screen and (min-width: 758px) {
  .hfsf .copy p {
    margin-right: auto;
  }
}

.hfsf .brands {
  display: flex;
  justify-content: space-between;
  color: #ebebeb;
  width: 100%;
}

@media only screen and (min-width: 758px) {
  .hfsf .brands {
    width: 362px;
  }
}

.hfsf .brands .hfs-i {
  font-size: 11px;
  opacity: 0.2;
}

@media only screen and (min-width: 758px) {
  .hfsf .brands .hfs-i {
    font-size: 13px;
  }
}

@media only screen and (min-width: 1000px) {
  .hfsf .brands .hfs-i {
    font-size: 15px;
  }
}