:root {
  /** colors **/
  --gym-orange: #f8971d;
  --gym-black: #222;
  --gym-white: #fff;
  --gym-gray: #ccc;
  --gym-dark-gray: #444;
  --gym-light-gray: #a6a6a6;
  --gym-light-page-background: #ebebeb;

  /** typefaces */
  --gym-font-stack: brandon-grotesque, 'Helvetica Neue', Helvetica, sans-serif;
  --gym-font-stack-text: 'Helvetica Neue', Helvetica, sans-serif;
}

#contentinfo {
  font-size: 16px;
  color: var(--gym-white);
  background-color: var(--gym-black);
  padding: 5px 10px 30px 10px;
  margin: 0 auto;
}

#contentinfo h2 {
  font-family: var(--gym-font-stack);
  font-size: 1em;
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 0;
}

#contentinfo .all-caps {
  text-transform: uppercase;
}

#contentinfo .gym-brand {
  margin-bottom: 1em;
}

#contentinfo .gymnasium-logo {
  width: 12.5em;
  height: auto;
  margin-top: 0;
  margin-left: 0;
}

#contentinfo .gym-brand p {
  width: 95%;
  font-size: 1em;
  line-height: 1.55;
  margin-top: 1.2em;
}

#contentinfo .resources {
  clear: left;
}

@media (min-width: 62em) {
  #contentinfo .resources {
    clear: none;
  }
}

#contentinfo .footer-link-list {
  padding-top: 0.625em;
  margin-top: 0;
  margin-bottom: 1.2em;
}

#contentinfo ul {
  list-style-type: "";
  padding-left: 0;
  margin-top: 0.95em;
  margin-left: 0;
}

#contentinfo ul ::marker {
  color: transparent;
}

#contentinfo li {
  line-height: 1.35;
  height: auto;
  padding-right: 0;
  border-right: 0;
  margin-top: 0.6em;
}

#contentinfo li a {
  color: var(--gym-white);
}

#contentinfo a:hover,
#contentinfo a:focus,
#contentinfo a:active {
  color: var(--gym-orange);
  border-bottom: 0;
}

#social li {
  position: relative;
}

#social a[data-title] {
  display: inline-block;
}

#social a[data-title]:hover {
  padding-right: 6ch;
}

#social a[data-title]:hover::after,
#social a[data-title]:focus::after,
#social a[data-title]:active::after {
  display: inline;
  position: absolute;
  top: 0;
  left: 2em;
  content: attr(data-title);
  color: var(--gym-orange);
  line-height: 1.8;
}

#contentinfo .open-edx-logo {
  height: auto;
}

#contentinfo .copyright {
  text-align: left;
}

#contentinfo .copyright small {
  font-size: 80%;
}