body {
  padding: 0px;
  margin: 0px;
  font-family: Work Sans, Helvetica, Arial, sans-serif; }
  body.containedImage {
    background-color: #363b3d; }

.sidebar {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 80px;
  height: 100%;
  background-color: #464C4F; }
  .sidebar .section {
    width: 80px;
    height: 80px;
    display: block; }
    .sidebar .section img {
      opacity: 0.7; }
    .sidebar .section .active img, .sidebar .section:hover img {
      opacity: 1; }

.height100 {
  max-height: 100%; }

body, html, #app {
  height: 100%;
  overflow: hidden; }

#app {
  font-family: Work Sans, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50; }

.pageImageBackground {
  background: url(images/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: absolute;
  top: 0px;
  left: 80px;
  width: calc(100% - 80px);
  height: 100%;
  background-color: #666;
  z-index: 1; }

.topbar {
  width: 100%;
  height: 4px;
  position: relative;
  z-index: 1200; }

.topbar_label {
  width: auto;
  padding: 6px 20px;
  display: inline-block;
  color: #ffff;
  font-weight: 700;
  letter-spacing: 0.1px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1205;
  font-size: 16px;
  max-width: calc(50% - 80px);
  word-break: break-word; }
  @media (min-width: 900px) {
    .topbar_label {
      font-size: 20px; } }
  @media (min-width: 1900px) {
    .topbar_label {
      font-size: .8vw; } }

.pageName {
  background-color: RGBA(32, 49, 79, 0.7);
  color: #ffffff;
  position: absolute;
  top: 4px;
  left: 80px;
  z-index: 101;
  padding: 0em 0.3em 0em 0.5em;
  max-width: calc(60% - 80px);
  word-break: break-word; }
  .pageName.bigFont {
    font-size: 18px;
    font-weight: 700; }
    @media (min-width: 500px) {
      .pageName.bigFont {
        font-size: 25px; } }
    @media (min-width: 700px) {
      .pageName.bigFont {
        font-size: 4vw; } }
    @media (min-width: 1440px) {
      .pageName.bigFont {
        font-size: 3.5vw; } }

.bgblueGray {
  background-color: RGBA(32, 49, 79, 0.7);
  color: #fff; }

.inline-block {
  display: inline-block;
  padding: 0.1em 0.5em 0.2em 0.5em; }

.bigFont, h1 {
  font-size: 24px;
  font-weight: 700; }
  @media (min-width: 500px) {
    .bigFont, h1 {
      font-size: 35px; } }
  @media (min-width: 700px) {
    .bigFont, h1 {
      font-size: 6vw; } }
  @media (min-width: 1440px) {
    .bigFont, h1 {
      font-size: 4.5vw; } }

a {
  cursor: pointer; }

.mediumFont, h2 {
  font-size: 18px;
  line-height: 1.3em;
  font-weight: 700; }
  @media (min-width: 500px) {
    .mediumFont, h2 {
      font-size: 25px; } }
  @media (min-width: 700px) {
    .mediumFont, h2 {
      font-size: 3vw; } }
  @media (min-width: 1440px) {
    .mediumFont, h2 {
      font-size: 2.5vw; } }

.smallMediumFont, h2 {
  font-size: 18px;
  line-height: 1.3em;
  font-weight: 700; }
  @media (min-width: 500px) {
    .smallMediumFont, h2 {
      font-size: 22px; } }
  @media (min-width: 700px) {
    .smallMediumFont, h2 {
      font-size: 2.5vw; } }
  @media (min-width: 1440px) {
    .smallMediumFont, h2 {
      font-size: 2vw; } }

.pageContent {
  position: relative;
  z-index: 600;
  margin-left: 80px;
  height: 100vh; }

.arrow_down, .arrow_up {
  background-color: RGBA(32, 49, 79, 0.7);
  background-image: url(../images/arrow.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 80%;
  width: 110px;
  height: 72px;
  position: fixed;
  left: 50%;
  margin-left: 5px;
  bottom: 20px;
  z-index: 1001; }

.arrow_up {
  margin-left: -115px;
  transform: rotate(180deg); }

.mainwrapper {
  max-height: 100vh; }

.disciplines .discipline {
  width: 20px !important; }
  @media (min-width: 1200px) {
    .disciplines .discipline {
      width: 30px !important; } }

.location h4 {
  font-size: 14px; }
  @media (min-width: 1200px) {
    .location h4 {
      font-size: 16px; } }

.discipline {
  width: 30px;
  background-color: RGBA(255, 255, 255, 0.7);
  border: 4px solid #fafafa; }
  .discipline.active {
    background-color: #81d5fc;
    border: 4px solid #1b83da; }
  .discipline img {
    max-width: 100%; }

/*# sourceMappingURL=style.css.map */
