html, body {
  margin: 0;
  top: 0;
  height: 0;
  min-height: 100%;
  overflow: hidden; }

a {
  color: inherit;
  text-decoration: none; }

.tabs-list a:active, .social-media-element:active, .navbar-element:active {
  outline: 0;
  border: none;
  -moz-outline-style: none; }

.navbar-element {
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease; }
  .navbar-element:link {
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease; }
  .navbar-element:visited {
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease; }
  .navbar-element:active {
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease; }
  .navbar-element:hover {
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
    color: #FFC98A; }

.social-media-element {
  -webkit-transition: fill 0.3s ease;
  -moz-transition: fill 0.3s ease;
  -ms-transition: fill 0.3s ease;
  -o-transition: fill 0.3s ease;
  transition: fill 0.3s ease; }
  .social-media-element:link {
    -webkit-transition: fill 0.3s ease;
    -moz-transition: fill 0.3s ease;
    -ms-transition: fill 0.3s ease;
    -o-transition: fill 0.3s ease;
    transition: fill 0.3s ease; }
  .social-media-element:visited {
    -webkit-transition: fill 0.3s ease;
    -moz-transition: fill 0.3s ease;
    -ms-transition: fill 0.3s ease;
    -o-transition: fill 0.3s ease;
    transition: fill 0.3s ease; }
  .social-media-element:active {
    -webkit-transition: fill 0.3s ease;
    -moz-transition: fill 0.3s ease;
    -ms-transition: fill 0.3s ease;
    -o-transition: fill 0.3s ease;
    transition: fill 0.3s ease; }
  .social-media-element:hover {
    -webkit-transition: fill 0.3s ease;
    -moz-transition: fill 0.3s ease;
    -ms-transition: fill 0.3s ease;
    -o-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
    fill: #FFB865; }

.tabs-list a {
  color: #1f84b6;
  -webkit-transition: color 0.1s ease;
  -moz-transition: color 0.1s ease;
  -ms-transition: color 0.1s ease;
  -o-transition: color 0.1s ease;
  transition: color 0.1s ease; }
  .tabs-list a:link {
    -webkit-transition: color 0.1s ease;
    -moz-transition: color 0.1s ease;
    -ms-transition: color 0.1s ease;
    -o-transition: color 0.1s ease;
    transition: color 0.1s ease; }
  .tabs-list a:visited {
    -webkit-transition: color 0.1s ease;
    -moz-transition: color 0.1s ease;
    -ms-transition: color 0.1s ease;
    -o-transition: color 0.1s ease;
    transition: color 0.1s ease; }
  .tabs-list a:active {
    -webkit-transition: color 0.1s ease;
    -moz-transition: color 0.1s ease;
    -ms-transition: color 0.1s ease;
    -o-transition: color 0.1s ease;
    transition: color 0.1s ease; }
  .tabs-list a:hover {
    -webkit-transition: color 0.1s ease;
    -moz-transition: color 0.1s ease;
    -ms-transition: color 0.1s ease;
    -o-transition: color 0.1s ease;
    transition: color 0.1s ease;
    color: #FFB865; }

@font-face {
  font-family: 'default';
  src: url(../fonts/default.otf); }

@font-face {
  font-family: 'default-bold';
  src: url(../fonts/default-bold.otf); }

@font-face {
  font-family: 'default-light';
  src: url(../fonts/default-light.otf); }

.general-layout {
  font-family: 'default';
  font-size: 16px;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  background-color: #111111;
  color: black; }
  @media only screen and (max-width: 820px) and (orientation: portrait) {
    .general-layout {
      flex-direction: column; } }
  @media only screen and (max-width: 820px) and (orientation: portrait) {
    .general-layout {
      justify-content: start; } }
.header {
  width: 12%;
  min-width: 12%;
  align-self: start;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  margin: calc(2% + 0.5rem);
  text-align: center;
  overflow: hidden;
  -webkit-transition: max-height 1s, margin 1s;
  -moz-transition: max-height 1s, margin 1s;
  -ms-transition: max-height 1s, margin 1s;
  -o-transition: max-height 1s, margin 1s;
  transition: max-height 1s, margin 1s; }
  @media only screen and (max-width: 820px) and (orientation: portrait) {
    .header {
      flex-direction: row; } }
  @media only screen and (max-width: 820px) and (orientation: portrait) {
    .header {
      align-self: center; } }
  @media only screen and (max-width: 820px) and (orientation: portrait) {
    .header {
      width: 80%;
      min-width: 0; } }
  @media only screen and (max-width: 820px) and (orientation: portrait) {
    .header {
      max-height: 20%;
      height: 13%; } }
.logo {
  min-width: 0;
  object-fit: contain;
  width: 100%;
  height: 100%; }

.header-separator {
  width: 70%;
  margin: calc(10% + 1rem) 0; }
  @media only screen and (max-width: 820px) and (orientation: portrait) {
    .header-separator {
      margin: 0 calc(10% + 1rem);
      width: 0;
      height: 70%; } }
.social-media {
  display: flex;
  flex-wrap: wrap;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  align-content: center;
  color: #1f84b6;
  max-height: 100%;
  width: 100%;
  height: 100%;
  margin: 0; }

.social-media-element {
  fill: #1f84b6;
  width: calc(13% + 0.8rem);
  margin: calc(1% + 0.15rem); }
  @media only screen and (max-width: 820px) and (orientation: portrait) {
    .social-media-element {
      margin: auto; } }
  .social-media-element a {
    width: 100%;
    height: 100%; }
  .social-media-element img {
    object-fit: contain;
    margin: 0;
    width: 100%; }
  .social-media-element .svg {
    width: 100%;
    height: 100%; }

.main-content {
  background: url(../images/background.png) fixed;
  display: flex;
  flex-direction: column;
  justify-content: start;
  min-height: 0;
  align-self: start;
  height: 100%;
  min-width: 0;
  flex: 1; }
  @media only screen and (max-width: 820px) and (orientation: portrait) {
    .main-content {
      width: 100%; } }
  @media only screen and (max-width: 820px) and (orientation: portrait) {
    .main-content {
      align-self: center; } }
.main-content-window {
  flex: 1;
  overflow: auto;
  overflow-x: hidden; }
  .main-content-window * {
    overflow: auto;
    max-width: 100%;
    word-wrap: break-word; }

.tabs-list {
  margin: 0 1.2rem; }
  .tabs-list h1 {
    color: #5863b8; }
  .tabs-list h2 {
    color: #505792; }
  .tabs-list h3 {
    color: #464c7d; }
  .tabs-list p, .tabs-list h1, .tabs-list h2, .tabs-list h3, .tabs-list a {
    overflow: visible; }

.hugo-logo {
  display: block;
  margin: 7% auto; }
  @media only screen and (max-width: 820px) and (orientation: portrait) {
    .hugo-logo {
      margin: auto; } }
.index-content {
  margin: 5%;
  flex: 0; }

.navbar {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  text-align: center;
  min-height: 1.3rem;
  overflow: hidden;
  background-color: #474747;
  -webkit-transition: max-height 0.7s;
  -moz-transition: max-height 0.7s;
  -ms-transition: max-height 0.7s;
  -o-transition: max-height 0.7s;
  transition: max-height 0.7s; }
  @media only screen and (max-width: 820px) and (orientation: portrait) {
    .navbar {
      min-height: 0; } }
  @media only screen and (max-width: 820px) and (orientation: portrait) {
    .navbar {
      width: 100%; } }
.navbar-element {
  color: white;
  font-family: 'default';
  font-weight: 700;
  margin: 1.2rem 0 0.6rem 0;
  font-size: calc(1.3rem); }
  @media only screen and (max-width: 820px) and (orientation: portrait) {
    .navbar-element {
      margin: 0.3rem 0; } }
  @media only screen and (max-width: 820px) and (orientation: portrait) {
    .navbar-element {
      font-size: calc(1.2rem); } }
.collapsible-menu {
  fill: white;
  align-self: center;
  width: 1.5rem;
  height: 1.5rem; }
  .collapsible-menu .svg {
    width: 100%;
    height: 100%; }