.logoContainer {
  font-family: heading;
  font-size: 2.5rem;
  margin: 0;
  padding: 0 1rem;
  grid-area: logoContainer;
  display: flex;
  align-items: center;
  background-color: var(--comp);
  color: var(--neutral);
}
.logoContainer * {
  margin: 0;
}
.logo {
  flex: 7;
    font-family: logo;
    letter-spacing: -6px;
    font-size: 3rem;
    text-shadow: 1px 1px 1px var(--light);
  }
  .logoplace {
    font-family: body;
    font-size: 70%;
    letter-spacing: 6px;
  }
  .fullstop {
    padding: 0 .5rem;
  }

.tel,
.email {
  font-family: body;
  flex: 1;
  font-size: 1.5rem;
  text-align: right;
}
#show-menu {
  margin-left: -9999px;
  display: none;
}
[for="show-menu"] {
  display: none;
}
.site {
    font-size: 1.5rem;
    color: white;
    position: fixed;
    top: 50vh;
    transform: translateY(-50%);
    width: var(--fixedWidth);
    text-transform: lowercase;
}
.site ul {
  list-style: none;
  margin-top: 0;
}
.site li {
  padding: 1rem;
  margin: 1rem 0;
  background-color: var(--main);
  box-shadow: 1rem 0 0 0 var(--comp);
  transition: .3s;
  /*width: 12rem;*/
}
.site li:hover {
    box-shadow: 2rem 0 0 0 var(--comp);
}
.site li:hover:has(.active) {
    box-shadow: 1rem 0 0 0 var(--comp);
}
.site a {
  color: inherit;
  display: block;
}
a.active {
    opacity: .5;
    pointer-events: none;
}
li:has(ul) {
    position: relative;
}
ul ul {
  margin-left: -9999px;
  height: 0;
  overflow: hidden;
  transition:  margin .3s;
}
ul li:hover ul {
  margin-left: 0;
  height: auto;
  overflow: initial;
}
ul ul {
  position: absolute;
  right: -100%;
  top: -48px;
}
.site ul ul li {
    background-color: var(--comp);
    box-shadow: 1rem 0 0 0 var(--main);
    display: block;
    padding: .25rem 0 .25rem .25rem;
    margin: .25rem;
}
.site ul ul li:hover {
    box-shadow: 2rem 0 0 0 var(--neutral);
}
@media only screen and (max-width: 1500px) {
  .logo {
    flex: 5;
  }
}
@media only screen and (max-width: 1200px) {
  .logo {
    flex: 3;
  }
}
@media only screen and (max-width: 870px) {
  .logo {
    flex: 2.5;
  }
  .site li {
    width: 10rem;
    padding: .5rem;
  }
}
@media only screen and (max-width: 800px) {
  .logoContainer {
    display: block;
    padding-top: 1rem;
  }
  .logowebdesign {
      border-bottom: 5px solid var(--main);
  }
  .place {
      letter-spacing: 4px;
  }
  .tel,
  .email {
    text-align: left;
  }
  [for="show-menu"] {
    display: block;
    position: absolute;
    top: 1rem;
    right: 1rem;
    height: 25px;
    width: 36px;
    cursor: pointer;
    background-image: url(../graphics/hamburger.png);
    background-size: cover;
  }
  .site {
      flex-direction: column;
      width: 0;
      overflow: hidden;
      transition: width .3s;
      color: transparent;
      padding: 0;
      height: 0;
      transform: none;
  }
  #show-menu:checked+label+.site ul ul {
      display: block!important;
      visibility: visible!important;
      position: static;
      border: none;
      left: 0; 
      transform: none; 
  }
  #show-menu:checked+label+.site {
      width: 100%;
      min-height: 150%;
      background-color: var(--neutral);
      color: white;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 15;
      padding-bottom: 11rem;
      margin-top: 0;
  }
  #show-menu:checked+label+.site li {
    padding: .5rem 1rem;
    padding: 1rem;
    width: 100%;
    background-color: transparent;
    border-bottom: var(--main) 2px solid;
  }
  #show-menu:checked+label+.site ul ul li:last-of-type {
      padding-bottom: 0;
  }
  #show-menu:checked+label+.site ul ul li {
      padding-left: 2rem;
  }
  #show-menu:checked+label+.site .submenu {
      padding-bottom: 0;
  }
  #show-menu:checked+label+.site>ul {
      display: block;
      margin-top: 3rem;
  }

  #show-menu:checked+[for="show-menu"] {
      background-image: url(../graphics/hamburgerClose.png);
      width: 41px;
      height: 42px;
      top: 1rem;
      right: 1rem;
      position: fixed;
      z-index: 20;
  }
}
@media only screen and (max-width: 390px) {
    .logoContainer {
        display: block;
        padding: 2rem .5rem 0 .5rem;
    }
    .logo {
        font-size: 2.5rem;
    }
}