body {
    margin: 0;
    font-family: "Times New Roman", Times, serif;
    color:black;
    background: #e8eded;
}
header {
    position: relative;
    background-image: url("images/titel.jpg");
    background-size: cover;
}
main {
    position: relative;
}
article {
    position: relative;
}
td {
    padding: 1vw;
    vertical-align: top;
}
.spacer {
    width: 100%;
    height: 5vw;
}
.placeholder {
    vertical-align: top;
    width: 100%;
    opacity: 0;
}
.name {
    font-size: 125%;
}
#logo {
    position: absolute;
    right: 4vw;
    top: 4vw;
    width: 20vw;
}
#title {
    position: absolute;
    color: rgb(78, 137, 209);
    font-weight: bold;
    font-size: 5vw;
    left: 5vw;
    top: 25vw;
}
#philosophie {
    background-image: url("images/philosophie.jpg");
    background-size: cover;
}
#philosophie-content {
    position: absolute;
    color: rgb(72, 74, 71);
    font-size: 2.6vw;
    left: 2vw;
    top: 6vw;
}
#person, #ort {
    font-size: 2.3vw;
}
#ort-content {
    padding: 2vw;
}
#downloads, #downloads2, #infos {
    font-size: 2.3vw;
    padding: 2vw;
    background: #ffffff;
    border-top: 1vw solid darkgray;
}
.downloads-title {
    font-weight: bold;
    margin-bottom: 2vw;
}
.downloads-list img {
    height: 3vw;
    width: 3vw;
}
.download-link {
    display: inline-block;
    color: black;
    text-decoration:none;
    margin: 2vw;
    height: 3vw;
}
.download-link:hover {
    background: #e8eded;
}
#impressum {
    font-size: 2.3vw;
    padding: 2vw;
    border-top: 1vw solid darkgray;
}

.accordion > input[type="checkbox"] {
  position: absolute;
  left: -100vw;
}

.accordion .content {
  overflow-y: hidden;
  height: 0;
  transition: height 0.3s ease;
}

.accordion > input[type="checkbox"]:checked ~ .content {
  height: auto;
  overflow: visible;
}

.accordion label {
  display: block;
}

.accordion > input[type="checkbox"]:checked ~ .content {
}

.accordion .handle {
  margin: 0;
}

.accordion label {
  cursor: pointer;
  padding: 15px;
  background: #e8e8e8;
}

.accordion label:hover,
.accordion label:focus {
  background: #d8d8d8;
}

#nav_arrow{
    display:inline-block;
    width:1em;
    height:0.8em;
}
.bar {
    display:inline-block;
    position:relative;
    background-color: rgb(37,14,68);
    width: 50%;
    height: 10%;
    border-radius: 5%;
    margin: 25% auto;
}
.left {
    -webkit-transform: rotateZ(36deg);
    -moz-transform: rotateZ(36deg);
    -ms-transform: rotateZ(36deg);
    -o-transform: rotateZ(36deg);
    transform: rotateZ(36deg);
}
.right {
    -webkit-transform: rotateZ(-36deg);
    -moz-transform: rotateZ(-36deg);
    -ms-transform: rotateZ(-36deg);
    -o-transform: rotateZ(-36deg);
    transform: rotateZ(-36deg);
    left:-12%;
}

.accordion > input[type="checkbox"]:checked ~ .handle .left {
    -webkit-transform: rotateZ(-36deg);
    -moz-transform: rotateZ(-36deg);
    -ms-transform: rotateZ(-36deg);
    -o-transform: rotateZ(-36deg);
    transform: rotateZ(-36deg);
}
.accordion > input[type="checkbox"]:checked ~ .handle .right {
    -webkit-transform: rotateZ(36deg);
    -moz-transform: rotateZ(36deg);
    -ms-transform: rotateZ(36deg);
    -o-transform: rotateZ(36deg);
    transform: rotateZ(36deg);
}