* {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}

body {padding: 20px;}
a {outline: none}
img {max-width: 100%; height: auto;}
p {margin-top: 5px; margin-bottom: 20px}

h1,h2,h3 {margin-top: 20px; margin-bottom: 10px}
h1 {font-size: 30px;}
h2 {font-size: 24px;}
h3 {font-size: 20px;}
h4 {font-size: 16px; margin-top: 15px; margin-bottom: 0}
.logo {margin: 0 auto;}
.open .logo {}

.content {margin: 0 auto; position: relative}
.overlay {position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: #ccc; display: none}
.open .overlay {}
.open .footer-links,
.open .headline,
.open h1 {display: none}
h1, p.headline {text-align: center;}

ul.footer-links {display: block; list-style: none; margin: 0 auto; padding: 0; text-align: center}
ul.footer-links li {display: inline-block; margin: 0; padding: 0}
ul.footer-links li a {display: inline-block; padding: 0; margin: 0 10px 0 10px; text-decoration: none;  color: #666}
ul.footer-links li a:hover {color: #000; }

.close {position: absolute; top: 30px; right: 0; text-decoration: none; height: 32px; width: 32px; display: inline-block; color: #eee; padding: 0 10px}

.close:before, .close:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 33px;
    width: 2px;
    background-color: #333;
}
.close:before {
    transform: rotate(45deg);
}
.close:after {
    transform: rotate(-45deg);
}


.impressum,
.datenschutz {display: none;  top: 0; bottom: 0; padding: 30px 0}
.impressum h2,
.datenschutz h2 {margin-top: 0}

.impressum.active,
.datenschutz.active {
    display: block;
}

@media (min-width:768px) {
    body {padding: 0 30px;}
    .content {width: 640px;}
    p.headline {font-size: larger;}
    h1 {margin-top: 0}
    h2 {margin-bottom: 20px}
}

@media (min-width:940px) {
    .open .logo {max-width: 200px; margin-left: -200px;}
    .datenschutz,
    .impressum {position: absolute; width: 100%}
}