body{
    background-color:#FFFFFF;
    font-size:100%;
    margin:0em;
    padding:0em;
    height:auto;
}

img {
    width:80%;
    height:auto;
    max-width:100%;
}

h1 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight:100;
    font-size:2.5em;
    line-height:3.8em;
    color:#4C4948;
    margin:0em;
    text-align:center;
}

h2 {
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight:100;
    font-size:1.563em;
    line-height:1.8em;
    color:#4C4948;
    margin:0em;
    padding:1.25em;
    text-align:left;
}

h3 {
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight:100;
    font-size:1.313em;
    line-height:1.8em;
    color:#4C4948;
    margin:0em;
    padding:2.188em;
    text-align:left;
}

p{
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight:100;
    line-height:1.75em;
    color:#4C4948;
    margin:0em;
    padding:2.188em;
    text-align:justify;
}

.q{
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight:100;
    line-height:1.25em;
    color:#4C4948;
    margin:0em;
    padding:0em;
    text-align:justify;
    margin-left:10%;
}

#menu {
    display:block; 
}

#menu ul {
    display:block;
    width:5em;
    padding:0.9em;
}

#menu ul li {
    display:inline;
}

#menu ul li a.menubutton {
    display:none;
}

nav {
    display:block;
    height:2.5em;
    background-color:#FFFFFF;
    text-align: center;
}

ul {
    margin:0px;
    padding:0px;
}

li {
    list-style:square;
    margin:0.313em 0em 0.313em 0em;
    padding:0.25em;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight:100;
    color:#4C4948;
}

a {
    text-decoration:none;
}

nav ul {
    display:block;
}

nav ul li {
    display:inline;
    margin:0em 0.188em 0em 0.188em;
}

nav ul li a {
    color:rgb(55, 55, 55);
    font-size:1.125em;
    line-height:3.5em;
    padding:0.563em 0.938em 0.563em 0.938em;
}

nav ul li a:hover {
    background-color:rgb(241, 241, 241);
    border-bottom:0.188em solid #4C4948;
}

nav ul li a.active {
    border-bottom:0.188em solid #4C4948;
}

header {
    display:block;
    width:80%;
    max-width:980px;
    margin: 1.25em auto;
    padding:0em;
}

header img {
    display:inline-block;
    width:12.5em;
    background-color:#FFFF;
    margin:0em 20em 0em 25em;
}

#booktable{
    padding-top: 0rem;
    padding-bottom: 3rem;
    margin-left:auto; 
    margin-right:auto;
    border-spacing: 5rem 3rem;
    
}

td {
    padding-top: 1rem/*TOCHANGE*/;
    padding-bottom:1rem/*TOCHANGE*/;
    padding-right:1rem/*TOCHANGE*/;   
  }
  
td:first-child {
    padding-left:1rem/*TOCHANGE*/;
    padding-right:0;
}

.bilder img {
    width:220px;
    height:auto;
    float:left;
}

#books img{
    display: inherit;
    float:left;
}

#books h3 {
    text-align:left;
    float:left;
}

#books p {
    text-align:left;
    float:left;
}

#hintergrund {
    width:46em;
    height:27em;
    padding:0.188em 1.875em 0em 3.125em;
    margin-left:19em;
}

#textbox {
    width:25em;
    height:13em;
}

#contentcontact{
    display:block;
    width:80%;
    max-width:980px;
    margin-left: 24em;
    margin-right: auto;
    padding:0em;
}

#content img {
    display:block;
    width:10.5em;
    height:25em;
    margin:3.125em;
}

#content {
    display:block;
    width:80%;
    max-width:980px;
    margin:1.25em auto;
    padding:0em;
}

.thumbnail img {
    width:50%;
    margin:0em;
    padding:0em;
}

footer {
    text-align:center;
    background-color:rgb(55, 55, 55);
    height:2.75em;
    clear:left;
}

footer ul li {
    display: inline;
}

footer ul li a {
    color:white;
    font-size:0.813em;
    line-height:0.938em;
    padding-bottom:0.375em;
}

@media screen and (max-width:800px){
    body {
        font-size:90%;
    }

    header img {
        display:block;
        margin:0em 10em 0em 15em;
    }
}

@media screen and (max-width:600px) {
    body {
        font-size:88%;
    }

    #content {
        width:100%;
        display:block;
        margin:0.625em 0em 0.625em 0em;
    }
}

@media screen and (min-width:550px){
    nav {
        display:block !important;
    }
}

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

body {
    font-size:86%;
    width:85%;
    height:auto;
}

#hintergrund img {
    display:inline-block;
    width:70%;
    height:auto;
    margin:0em;
}

#menu ul li a.menubutton {
    display:block;
}

nav {
    display:none;
    height:auto;
}

nav ul li {
    display:block;
    margin:0.5em 0em 0.5em 0em;
}

header img {
    display:block;
    margin:0em 1.5em 0em 5em;
}

footer {
    width:38em;
}


form {
    width: 360px;
    margin: 45px auto;
  }

  form h1 {
    text-align: center;
  }

  form h5 {
    text-align: center;
    text-transform: uppercase;
    color: #c6c6c6;
  }

  form hr.sep {
    box-shadow: none;
    border: none;
    height: 2px;
    width: 25%;
    margin: 0px auto 45px auto;
  }

  form .emoji {
    font-size: 1.2em;
  }
}

.group {
    position: relative;
    margin: 0 0 45px 0;
}
  
textarea {
    resize: none;
}
  
input,
textarea {
    background: none;
    color: #4c4948;
    font-size: 18px;
    padding: 10px 10px 10px 5px;
    display: block;
    width: 320px;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #c6c6c6;
}
input:focus,
textarea:focus {
    outline: none;
}

input:focus ~ label, input:valid ~ label,
textarea:focus ~ label,
textarea:valid ~ label {
    top: -14px;
    font-size: 12px;
    color: #4C4948;
}

input:focus ~ .bar:before,
textarea:focus ~ .bar:before {
    width: 320px;
}
  
input[type="password"] {
    letter-spacing: 0.3em;
}
  
label {
    color: #c6c6c6;
    font-size: 16px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 10px;
    -webkit-transition: 300ms ease all;
    transition: 300ms ease all;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
  
.bar {
    position: relative;
    display: block;
    width: 320px;
}
  
.bar:before {
    content: '';
    height: 2px;
    width: 0;
    bottom: 0px;
    position: absolute;
    background: #4C4948;
    -webkit-transition: 300ms ease all;
    transition: 300ms ease all;
    left: 0%;
}
  
.btn {
    background: #fff;
    color: #959595;
    border: none;
    padding: 10px 20px;
    border-radius: 3px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn:hover {
    color: #8b8b8b;
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12);
}

.btn.btn-link {
    background: #4C4948;
    color: #d3eafd;
}

.btn.btn-link:hover {
    background: #4C4948;
    color: #deeffd;
}

  .btn.btn-submit {
    background: #4C4948;
    color: #bce0fb;
  }
  .btn.btn-submit:hover {
    background: #4C4948;
    color: #deeffd;
  }
  .btn.btn-cancel {
    background: #eee;
  }
  .btn.btn-cancel:hover {
    background: #e1e1e1;
    color: #8b8b8b;
  }
  
.btn-box {
text-align: center;
margin: 50px 0;
}