* {
--topheight:53px;
--secondtopheight:83px;
}

.logo {
	position: relative;
  width: 226px;
  height:100%;
	max-width: calc(100% - 60px);
	float: left;
  overflow: hidden;
}
/* Styles for smaller screens (e.g., mobile devices) */
@media (max-width: 540px) {
  .logo {
    height: 50%;
    clear:both;
  }
}

/* Styles for smaller screens (e.g., mobile devices) */
@media (max-width: 1067px) {
  .topbar {
    position: fixed;
    height: var(--secondtopheight);
    width: 100%;
    background-color: #000000;
    color: white;
    //text-align: center;
    padding: 0 32px;
    z-index: 999;
    transition: top 0.2s;
    }
  
  .menu-button {
      background: none;
      border: none;
      height: 100%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      position: absolute;
      right: 30px;
      float: right;
  }
  
  .hamburger-icon,
  .arrow-icon {
      fill: #FFF;
      transition: opacity 0.3s ease;
      position: absolute;
      width:42px;
      height:42px;
  }
  
  .arrow-icon {
      fill: #E1BB8C;
      opacity: 0;
  }
  
  .menu {
      display: none;
      background-color: #000;
      position: absolute;
      top: var(--secondtopheight);
      left: 0;
      width: 100%;
      height: calc(100vh - var(--secondtopheight) );
      padding: 0 0 0 0;
      overflow-y: scroll;
  }
  
  .menu div {
    width: 100%;
  }
  
  .menu ul {
      list-style: none;
      padding: 0 20px;
      width: 100%;
      text-align: left;
      border-bottom: 1px solid #E1BB8C;
  }
  
  .menu li {
    padding: 20px 0;
  }
  
  .menu a {
    text-decoration: none;
    color: #EEE;
  }
  
  .menu-active .hamburger-icon {
      opacity: 0;
  }
  
  .menu-active .arrow-icon {
      opacity: 1;
  }
  
  .menu-active .menu {
      display: block;
  }
  
  .topnavlang {
    position: relative;
    height: 60px;
    padding: 0 40vw 0 0;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #E1BB8C;
  }  
  
  .topnavlang span {
    float: right;
    padding: 15px;
    font-size: 0.9em;
  }
  /* Language selection menu */
  .topnavlang .language {
    color: white;
    cursor: pointer;
  }
  .topnavlang .selected_language {
    color: black;
    background-color: #e1bb8c;
  }
  
  /* hides other language text classes, added 26-07-2022, Jelmer */
  .topnavlang .EN, .topnavlang .DE, .topnavlang .NL {
    display:none; 
  }
  .callout {
    display: none;
    position: relative;
    background-color: black;
    right:0px;
    text-align: left;
    padding: 0 0 0 20px;
    top:0;
  }

}

/* Styles for bigger screens (e.g., tables and monitors) */
@media (min-width: 1068px) {
  .topbar {
    position: fixed;
    height: calc(var(--secondtopheight) + var(--topheight));
    width: 100%;
    background-color: #000000;
    color: white;
    text-align: right;
    padding: 0 32px;
    z-index: 999;
    transition: top 0.3s;
  }

  .logo {
   padding-top: var(--topheight);
   overflow: hidden;
  }
   
  .menu-button,
  .hamburger-icon,
  .arrow-icon {
    display: none;
  }

  .mainnavmenu {
    position: absolute;
    display: flex;
    right: 0;
    bottom: 0;
    /border: 1px solid green;
    height: var(--secondtopheight);
    white-space: nowrap;
    padding:0;
    margin:0;
  }
  .topnavmenu {
    position: absolute;
    display: inline-block;
    left: 0;
    width: 100%;
    top: 0;
    border-bottom: 1px solid #444444;
    height: var(--topheight);
    white-space: nowrap;
    padding-right: 20px; 
    font-size: 0.8em;
  }
  
/* Language selection menu */
  .topnavlang {
    position: absolute;
    left: 0;
    top: 0;
    padding: 15px 10px; 
    height: var(--topheight);
    z-index: 3;
    font-size: 0.8em;
  }
  .topnavlang span {
    padding: 10px;
  }
  .topnavlang .language {
     cursor: pointer;
   }
  .topnavlang .selected_language {
     color: black;
     background-color: #e1bb8c;
   }
  
  /* hides other language text classes, added 26-07-2022, Jelmer */
  .topnavlang .EN, .topnavlang .DE, .topnavlang .NL {
     display:none; 
   }


.mainnavmenu ul {
    display: flex;
    list-style: none;
    padding:0;
    margin:0;
  }
.topnavmenu ul {
    display: flex;
    list-style: none;
    padding:0;
    margin:0;
    float: right;
  }
  
  .mainnavmenu li {
    height: var(--secondtopheight);
    padding: 30px 1vw;
    backdrop-filter: blur(2px);
    //background-color: rgba(5, 5, 5, 0.25);
    background-color: black;
  }
  .topnavmenu li {
    height: var(--topheight);
    padding: 15px 20px;
  }
  
  .mainnavmenu li:hover {
    color: #e1bb8c;
    color: white;
    background-color: #999;
  }
  .mainnavmenu .active {
    color: #e1bb8c;
  }
  .topnavmenu li:hover {
    //background-color: #e1bb8c;
    text-decoration: underline;
  }
  
  .menu a {
    position: relative;
    text-decoration: none;
    color: #EEE;
  }
  
  .menu-active .hamburger-icon {
      opacity: 0;
  }
  
  .menu-active .arrow-icon {
      opacity: 0;
  }

  .callout {
    display: none;
    position: absolute;
    background-color: black;
    right:0px;
    text-align: right;
    top:var(--secondtopheight);
  }
}

.login_logo {
  transform: translateY(-9px);
  height: 40px;
  padding: none;
  vertical-align: top;
}
.callout a {
  display: list-item;
  clear: both;
  padding: 20px;
}
.callout a:hover {
  background-color: #4D4D4D;
}
.callout.open {
  display: block;
}
  

@media (orientation: portrait) and (min-device-pixel-ratio: 2), 
       (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2), 
       (orientation: portrait) and (min--moz-device-pixel-ratio: 2), 
       (orientation: portrait) and (-o-min-device-pixel-ratio: 2/1) {
    /* Styles for high-DPI screens */
  * {
    --topheight:106px;
    --secondtopheight: 166px;
  }
  .hamburger-icon,
  .arrow-icon {
    transform: scale(2);
    transform-origin: center right;
  }
  .logo {
    transform: scale(2);
    padding: 0;
    height: 50%;
    clear: both;
    transform-origin: center left;
  }
  .topnavlang {
    height: 120px;
  }  
  .topnavlang span {
    padding: 30px;
  } 
}