/*:root {
  color-scheme: light dark; /* both supported if uncommented*/
}*/

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0px;
}

body {
  font-family: Verdana;
  color: #000000;
  background-color: white;
}

body a {
  color: #7d4747;
}

img {
  background-color: transparent;
}


#page_container {
  position: relative;
  min-height: 100vh;
}

#logged_bar {
  background-color: darkslateblue;
  font-size: small;
  color: #efefef;
  text-align: right;
  padding: 4px;
}

#logged_bar p {
  margin: 0px;
}

#logged_bar a {
  color: #efefef;
}

.header {
  background-image: url("hilbert.png");
  //background-size: 80%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.top_img {
  //width: 200%;
  min-height: 100px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.top_img a {
  align-content: center;
  display: flex;
  justify-content: center;
}

.top_logo {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#top_logo {
  width: 80%;
}

.menu {
  list-style-type: none;
  //margin: 0;
  padding: 0;
  width: 90%;
  flex-shrink: 1;
  text-align: center;
}

.menu li {
  display: inline;
  width: 7%;

}

.menu li a {
  display: inline;
  //display: block;
  color: black;
  text-align: center;
  padding: 0px 16px 14px;
  text-decoration: none;
}

.submenu_wrapping {
  position: relative;
  display: inline-block;
  padding: 0px 16px 14px;
}

.submenu {
  display: none;
  position: absolute;
  z-index: 1;
  background-color: #f1f1f1;
  min-width: 160px;
}

.submenu a {
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  display: block;
}

#submenu_hardware {
  display: none;
  position: absolute;
  z-index: 1;
  background-color: #f1f1f1;
  min-width: 160px;
}

#submenu_hardware a {
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#submenu_hardware_wrapping:hover #submenu_hardware {
  display: block;
}

#submenu_software_wrapping:hover #submenu_software {
  display: block;
}

#submenu_interfaces_wrapping:hover #submenu_interfaces {
  display: block;
}

#submenu_scanning_wrapping:hover #submenu_scanning {
  display: block;
}




.main_wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: 2.5rem;
}

.main {
  //margin: 4%;
  text-align: justify;
  width: 60%;
}


.bottom {
  position: absolute;
  //left: 0;
  bottom: 0;
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  //background-color: gray;
}

.partner_logos {
  //width: 10%;
  //background-color: gray;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  
}

.partner_logo {
  width: 10%;
  margin: 0.4%;
}

.empir_logo_holder {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.copyright {
  width: 100%;
  background-image: url("backcut.png");
  background-size: 2.5%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.copyright p {
  font-size: small;
}

#btn_darkmode {
  //float: right;
  //background-color: green;
  position: absolute;
  right: 1.5%;
  opacity: 0;
}

#btn_darkmode:hover {
  //float: right;
  opacity: 1;
  transition: opacity 2s;
}


/*
@media (prefers-color-scheme: dark) {		//dark mode currently implemented in a different, JS-based way
  body {
    color: #efefef;
    background-color: #121212;
  }

  .menu li a {
    color: #efefef;
  }

  .header {
    background-image: url("backcut_dark.png");
  }

  .copyright {
    background-image: url("backcut_dark.png");
  }

  .copyright p {
    font-size: small;
  }


  .partner_logos {
    background-color: #424242;  
  }

  .empir_logo_holder {
    background-color: #424242;
  }

  .main {
    background-color: #424242;
  }


  img {
    filter: brightness(.8) contrast(1.2);
  }

  #top_logo {
    //max-height: 20%;
    background-color: transparent;
  }
}
*/

@media only screen and (max-width: 596px) {
  /* For mobile phones: */
  .main, .partner_logos, .empir_logo_holder {
    width: 90%;
  }

  .menu li {
    width: 100%;
    display: block;
    //background-color: gray;
    //padding: 12px;
    margin-top: 5px;
  }

  .menu li a {
    width: 100%;
    //background-color: gray;
    padding: 8px;
    margin-top: 7px;
  }

  .partner_logo {
    width: 13%;
    margin: 1%;
  }

  .copyright {
    font-size: 3vw;
  }

  .top_img {
    min-height: 145px;
  }

  .top_img a {
    text-align: center;
  }

  #top_logo {
    width: 80%;
  }

  #empir_logo {
    max-width: 90vw;
    //filter: brightness(.8);
  }

  #btn_darkmode {
    //position: static;
    font-size: 3vw;
  }

}





//for contenttools
/* Alignment styles for images, videos and iframes in editable regions */

/* Center (default) */
[data-editable] iframe,
[data-editable] image,
[data-editable] [data-ce-tag=img],
[data-editable] img,
[data-editable] video {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

/* Left align */
[data-editable] .align-left {
    clear: initial;
    float: left;
    margin-right: 0.5em;
}

/* Right align */
[data-editable].align-right {
    clear: initial;
    float: right;
    margin-left: 0.5em;
}

/* Alignment styles for text in editable regions */
[data-editable] .text-center {
    text-align: center;
}

[data-editable] .text-left {
    text-align: left;
}

[data-editable] .text-right {
    text-align: right;
}
​