@font-face {
  font-family: "nexa_lightregular";
  src: url("nexa_light-webfont.eot");
  src: url("nexa_light-webfont.eot?#iefix") format("embedded-opentype"),
       url("nexa_light-webfont.woff") format("woff"),
       url("nexa_light-webfont.ttf") format("truetype"),
       url("nexa_light-webfont.svg#nexa_lightregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

* {
  padding: 0;
  margin: 0;
  outline: none;
  font-size: 24px;
}
html {
  font-family: "nexa_lightregular";
  scroll-behavior: smooth;
}

h1 {
  font-size: 2em;
}
p {
  margin: 1.5em;
}
q {
  font-style: italic;
}

a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  padding: 0.3em;
  margin: 0.3em;
  border: 0.1em solid #209dcf;
  border-radius: 6px;
}
a:hover {
  background-color: #209dcf;
}
  a img {
    vertical-align: middle;
    height: 1.4em;
  }
  a > * + * {
    padding-left: 0.3em;
  }

ul {
  list-style-type: none;
  display: flex;
}
  li + li {
    margin-left: 0.3em;
  }
    li a {
      margin: 0;
      padding: 0;
    }
    nav li a {
      border-color: rgba(32, 157, 207, 0.5);
    }
      li a img {
        padding: 0.3em;
      }
      nav li a img {
        height: 1em;
        background-color: rgba(32, 157, 207, 0.5);
      }
      li a span {
        display: inline-block;
        padding: 0.3em;
      }

nav#topleft {
  position: fixed;
  margin: 4.5vh;
}
  nav#topleft li.jsonly,
  nav#topleft li.jsonly {
    display: none;
  }

section {
  text-align: center;
  height: 94vh;
  overflow: hidden auto;
  color: #fafafa;
/*  margin: 3vh;*/
  border: 3vh solid #fff;
  border-radius: 4.5vh;
}
  section > div {
    margin: 3vh;
    height: 82vh;
    overflow: hidden auto;
    padding: 3vh;
    background-repeat: no-repeat;
    background-position: 95% 0%;
    background-size: 10vw;
    background-attachment: local;
  }


section.main {
  background-color: #007daf;
}
  section.main > div {
    background-image: url("../logos/mobuto_1024.png");
    background-size: 18vw;
  }


section.fx {
  background-color: #af9b05;
}
  section.fx > div {
/*    background-image: url("../logos/mobuto_fx_1024.png");*/
  }
  section.fx a {
    border-color: #d2be28;
  }
  section.fx a:hover {
    background-color: #d2be28;
  }
.fx nav li a {
  border-color: rgba(210, 190, 40, 0.5);
}
.fx li a img,
.fx a:hover {
  background-color: #d2be28;
}
.fx nav li a img {
  background-color: rgba(210, 190, 40, 0.5);
}


section.tm {
  background-color: #91235a;
}
  section.tm > div {
/*    background-image: url("../logos/mobuto_tm_1024.png");*/
  }
  section.tm a {
    border-color: #b4467d;
  }
  section.tm a:hover {
    background-color: #b4467d;
  }
.tm nav li a {
  border-color: rgba(180, 70, 125, 0.5);
}
.tm li a img,
.tm a:hover {
  background-color: #b4467d;
}
.tm nav li a img {
  background-color: rgba(180, 70, 125, 0.5);
}


section.med {
  background-color: #3ca5a5;
}
  section.med > div {
/*    background-image: url("../logos/mobuto_med_1024.png");*/
  }
  section.med a {
    border-color: #5fc8c8;
  }
  section.med a:hover {
    background-color: #5fc8c8;
  }
.med nav li a {
  border-color: rgba(95, 200, 200, 0.5);
}
.med li a img,
.med a:hover {
  background-color: #5fc8c8;
}
.med nav li a img {
  background-color: rgba(95, 200, 200, 0.5);
}


section.bill {
  background-color: #007daf;
}
  section.bill > div {
/*    background-image: url("../logos/mobuto_bill_1024.png");*/
  }
  section.bill a {
    border-color: #209dcf;
  }
  section.bill a:hover {
    background-color: #209dcf;
  }
.bill nav li a {
  border-color: rgba(32, 157, 207, 0.5);
}
.bill li a img,
.bill a:hover {
  background-color: #209dcf;
}
.bill nav li a img {
  background-color: rgba(32, 157, 207, 0.5);
}


@media print {
  nav {
    display: none;
  }
  section > div {
    background-image: none !important;
  }
}