style.css.save.1

/* style.css */

body {font-family: Arial, Helvetica, sans-serif; background-color: #333;
}
.content {position: absolute; z-index:-1; top: 60px; left: 0; right: 0; bottom: 0; background-color: #333; }
.content iframe {display: block; width: 100%; height: 100%; border: none; }


.navbar {
  overflow: hidden;
  background-color: #333;
}


.navbar a {
  float: left;
  display: block;
  color: #fff;
  text-align: center;
  padding: 12px 8px;
  text-decoration: none;
  font-size: 16px;
}


.navbar .icon {
  display: none;
}


.navbar a:hover {
  background-color: #616161;
  color: #fff;
}

.navbar a.pcr:active  {
  background-color: #FF8300;
  color: white;
}

.navbar a.pcr:hover  {
  background-color: #FF8300;
  color: white;
}


.navbar a.antigen:active {
  background-color: #11bae8;
  color: white;
}

.navbar a.antigen:hover {
  background-color: #11bae8;
  color: white;
}


.navbar button {
  float: left;
  display: block;
  color: #fff;
  background-color: #333;
  text-align: center;
  padding: 12px 8px;
  text-decoration: none;
  font-size: 16px;
  border: none;
  line-height: 1.1em;
}

.navbar button:hover {
  background-color: #616161;
  color: #fff;
}


.HR::before {
  content: url(img/hr.png);
  line-height: 1em;
}

.EN::before {
  content: url(img/en.png);
  line-height: 1em;
}

.DE::before {
  content: url(img/de.png);
  line-height: 1em;
}

.IT::before {
  content: url(img/it.png);
  line-height: 1em;
}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 50px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: scroll; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  font-size: 14px
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: 25px;
    padding: 20px;
    border: 1px solid #888;
    max-width: 400px;
}

/* Press */

.box {
  float: left;
  height: 15px;
  width: 15px;
  margin: 0 5px 0 0;
  clear: both;
}
.green{
  background-color: #41c074;
}
.orange{
  background-color: #ff8300;
}
.teal{
  background-color: #11bae8;
}
.press {
  max-height: 35px;
  opacity: 0.25;
  margin: 5px 10px 0 0;
}
.press:hover {
  opacity: 1.0;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .navbar a:not(:nth-child(-n+2)) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .navbar.responsive {position: relative;}
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

#myModal.modal a {
  float: none;
  color: blue;
  background-color: transparent;
  text-align: initial;
  padding: 0px;
  text-decoration: none;
  font-size: 14px;
  display: inline;
}


/** LIGHTBOX MARKUP **/

.lightbox {
  /* Default to hidden */
  display: none;

  /* Overlay entire screen */
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* A bit of padding around image */
  padding: 1em;

  /* Translucent background */
  background: rgba(0, 0, 0, 0.8);
}

/* Unhide the lightbox when it's the target */
.lightbox:target {
  display: block;
}

.lightbox span {
  /* Full width and height */
  display: block;
  width: 100%;
  height: 100%;

  /* Size and position background image */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}