body {
  font-family: "Open Sans Condensed";
  /* font-family: "Avenir Next", "Avenir", sans-serif; */
}

#menuToggle {
  display: block;
  width: 33px;
  height: 27px;
  position: absolute;
  top: 50px;
  left: 50px;

  cursor: pointer;

  opacity: 0;
  z-index: 2;

  -webkit-touch-callout: none;
}

#menuButton {
  display: block;
  position: absolute;
  top: 50px;
  left: 50px;
}

#menuButton span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;

  background: #000000;
  border-radius: 3px;

  z-index: 1;

  transform-origin: 4px 0px;

  transition: transform 0.75s cubic-bezier(0.77, 0.2, 0.05, 1),
    background 0.75s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.75s ease;
}

#menuButton span:first-child {
  transform-origin: 0% 0%;
}

#menuButton span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

#menuToggle:checked ~ #menuButton span {
  opacity: 1;
  transform: rotate(45deg) translate(2px, -1px);
  background: #ffffff;
}

#menuToggle:checked ~ #menuButton span:nth-last-child(2) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle:checked ~ #menuButton span:nth-last-child(1) {
  transform: rotate(-45deg) translate(-4px, 1px);
}

#menuToggle:checked ~ ul {
  transform: none;
  transition: all 0.75s ease;
  width: 300px;
}

#menuToggle:not(:checked) ~ ul {
  transition: all 0.75s ease;
  width: 0px;
}

.nav.mobile {
  background: rgb(50, 50, 50);
}

.nav.desktop {
  width: 300px;
  padding: 30px;
  padding-top: 125px;
}

#navToggle ul {
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */

  transform-origin: 0% 0%;
  transform: translate(-300px, 0);

  transition: transform 0.75s cubic-bezier(0.77, 0.2, 0.05, 1);
}

footer {
  font-size: small;
}

.img-responsive {
  max-height: 100vh;
  max-width: 100%;
  margin: -113px 0;
  padding: 113px 0;
}

/* Overwrite Bootstrap */
.bg-dark {
  background-color: #000 !important;
}

.text-white a {
  color: #fff;
}

.text-white a:hover {
  color: darkgoldenrod;
}

.btn-dark {
  background-color: #000;
  color: #fff;
  text-decoration: none;

  transition: color 0.3s ease;
}

.btn-dark:hover {
  color: darkgoldenrod;
}

.nav-link {
  background: #000000;
  color: #fff;
  text-decoration: none;
  font-size: x-large;
  display: block;
  margin-top: 1px;

  transition: color 0.3s ease;
}

.nav-link.active {
  font-weight: bold;
  color: darkgoldenrod;
}

.nav-link:hover {
  color: darkgoldenrod;
}