@font-face {
    font-family: "FreeSans";
    src: url(FreeSans.woff) format("woff");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "FreeSansBold";
    src: url(FreeSansBold.woff) format("woff");
    font-weight: normal;
    font-style: normal;
}

body {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  position: relative;
  
}

h1 {
  font-family: "FreeSansBold";
  font-weight: normal;
  font-style: normal;
  text-transform: uppercase;
  color: rgb(29, 29, 27);
  margin: 0;
  /* font-size: 100px; */
  font-size: 6.94vmin;
  line-height: 1.19;
}

h2 {
  font-family: "FreeSans";
  text-transform: uppercase;
  font-weight: normal;
  font-style: normal;
  color: rgb(29, 29, 27);
  margin: 0;
  /* font-size: 100px; */
  font-size: 6.94vmin;
  line-height: 1.19;
  margin-bottom: 4.25vmin;
}

h3,
h3.kontakt a {
  font-family: "FreeSansBold";
  text-transform: lowercase;
  color: #fff;
  margin: 0;
  margin-top: 3.75vmin;
  font-size: 4.25vmin;
}

p, 
a {
  font-family: "FreeSans";
  color: #fff;
  margin: 0;
  font-size: 1.43vmin;
  line-height: 1.25;
  text-transform: uppercase;
  text-decoration: none;
}

.bold {
  font-family: "FreeSansBold";
  font-size: 1.875vmin;
}

#content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#upperpart {
  flex: 0 0 50%;
  padding: 0 6%;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

#lowerpart {
  flex: 0 0 50%;
  padding: 0 6%;
  background-color: rgb(149,147,0);
  display: flex;
  transition-property: background-color;
  transition-duration: 1s;
}

#lowerpart p.bold {
  margin-bottom: 0.4vmin;
  margin-top: 3.75vmin;
}

#lowerpart .leftpart,
#lowerpart .rightpart {
  flex: 0 1 50%;
}

.rightpart {
  text-align: right;
}

.rightpart h3.kontakt a {
  transition-property: color;
  transition-duration: 1s;
}

#lowerpart p,
#lowerpart a {
  color: #fff;
  white-space: nowrap;
}

.hamburger {
  width: 66px;
  height: 33px;
  position: absolute;
  right: 6%;
  top: 30px;
  z-index: 1;
}

.hamburger img {
  width: 100%;
  height: 100%;
}

input.hamburger {
  opacity: 0;
  z-index: 3;
  margin: 0;
  cursor: pointer;
}

#burgerexpand {
  height: 0;
  color: #000;
  text-align: right;
  overflow: hidden;
  transition: all, 1s;
  text-transform: lowercase;
  font-size: 34px;
  width: 80px;
  margin-top: 20px;
  float: right;
  background-color: #fff;
}

input.hamburger:checked + label #burgerexpand {
  height: 170px;
}

input.hamburger:checked + label + #content #lowerpart,
#lowerpart:hover {
  background-color: #000;
}

input.hamburger:checked + label + #content #lowerpart .rightpart h3.kontakt a,
#lowerpart:hover .rightpart h3.kontakt a {
  color: rgb(149,147,0);
}

@media screen and (max-width: 767px) {
  p,
  a {
    font-size: 3.05vmin;
  }

  p.bold {
    font-size: 4vmin;
  }

  #lowerpart {
    flex-direction: column;
  }

  #lowerpart p.bold {
    margin-bottom: 0.9vmin;
  }
  
  #lowerpart .leftpart {
    order: 2;
    flex: 0 1 0;
  }

  #lowerpart .rightpart {
    flex: 0 1 0;
  }

  h3,
  h3.kontakt a {
    font-size: 6.5vmin;
  }

  .hamburger {
    width: 33px;
    height: 16.5px;
  }

  #burgerexpand {
    font-size: 17px;
    width: 40px;
    margin-top: 8px;
  }

  input.hamburger:checked + label #burgerexpand {
    height: 85px;
  }
}

@media screen and (min-width: 768px) {
  h1,
  h2 {
    font-size: 6.25vmin;
  }

  h3,
  h3.kontakt a {
    font-size: 4.45vmin;
  }

  p,
  a {
    font-size: 1.6vmin;
  }

  p.bold {
    font-size: 2.1vmin;
  }

  #upperpart,
  #lowerpart {
    padding: 0 12%;
  }
  .hamburger {
    right: 12%;
  }
}

@media screen and (min-width: 1440px) {
  h1,
  h2 {
    font-size: 6.25vmin;
  }

  h3,
  h3.kontakt a {
    font-size: 3.85vmin;
  }

  p,
  a {
    font-size: 1.3vmin;
  }

  p.bold {
    font-size: 1.7vmin;
  }

}

@media screen and (min-width: 1800px) {
  h1,
  h2 {
    font-size: 6.94vmin;
  }

  h3,
  h3.kontakt a {
    font-size: 4.25vmin;
  }

  p,
  a {
    font-size: 1.43vmin;
  }

  p.bold {
    font-size: 1.875vmin;
  }

  #upperpart,
  #lowerpart {
    padding: 0 18%;
  }
  .hamburger {
    right: 18%;
  }
}