body{
  font-family: Helvetica;
  font-weight: bold;
  line-height: 18px;
  /*kerning: 10px;*/
  margin: 0 8px 0 8px;

}
header {
  margin:0 0 45px 0;
}
footer  {
  position: fixed;  /* Sticks the element to the viewport */
  bottom: 5px;
  left: 8px;
  width: calc(100% - 16px);     /* Optional: stretches across the screen */
  height: 20px;
}
a{
  text-decoration:none;
  color: black;
}
.back{
float:none;
}

h1 {
  font-size:12pt;
  padding:0px;
  margin:5px 0 5px 0;
}
h2 {
  font-size:12pt;
  margin:0 0 10px 0;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
}
.bildtext{
font-size: 10pt;
font-style: italic;
}

img{
max-width: 100%;
/*max-height: calc(100vh - 146px);*/
max-height: calc(100vh - 112px);
width:auto;
margin-bottom: 5px;
}
#top{
max-width: 100%;
max-height: 87vh;
width:auto;
}


nav #dots{
  text-align:right;
  font-size: 32px;
}

p {
  margin: 0 0 5px 0px;
}

#last {
margin-bottom:20px;
}

.work{
/*width: 33%;*/
}

.right_right{
    text-align:right;
    margin: 5px 0 0 0;
  }

a:active {
     color: lightblue;
     background-color: lightblue;
   }
.description {
  margin-right:10px;
}

.active a{
  color:red;
  font-weight:bold;
}
#navseparated {
color:blue;
}
.header_left {
  float: left;
  width: 33%;
}
.header_right_half {
  float: left;
  width: 33%;
}
.header_right {
  float: right;
  width: 67%;
}
.left {
  float: left;
  width: calc(33% - 5px);
  margin-bottom: 0px;
}
section {
}

/* Active */
.right {
  max-height: 100vh;
  float: right;
  width: calc(67% - 5px);
  padding-left: 8px;
  margin-bottom: 0px;

}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.row {
  max-height: 100vh;
  margin-bottom: 20px;
}
header .row {
  margin-bottom: 8px;
}
/*Media-queries*/
  @media(max-width: 768px)
  {
    .left {
      float: none;
      width: 100%;
      height: 100%;
    }
    .right {
      float: none;
      width: 100%;
      padding-left: 0px;
    }
    .header_left {
      float: left;
      width: 70%;
    }
    .header_right {
      float: right;
      width: 30%;
    }
    .back{
      float:right;
    }
    footer  {
      position: relative;  /* Sticks the element to the viewport */
      bottom: 0px;        /* Aligns the element to the bottom */
      left: 0px;          /* Optional: aligns to the left edge */
      width: 100%;  /* Optional: stretches across the screen */
      height: 20px;
    }
  }

  #content-desktop {display: block;}
  #content-mobile {display: none;}

  @media screen and (max-width: 768px) {

  #content-desktop {display: none;}
  #content-mobile {display: block;}

  }