html, body  {
	background: #920000 url(/assets/images/background.jpg?v=9411237) no-repeat;
	background-size: cover;
	width: 100%;
	min-height: 100%;
}
.pure-menu {
	background: white;
}
.pure-menu-horizontal.pure-menu-scrollable {
	padding: 0;
}

.banner {
	text-align: center;
	background-size: cover;

	height: 40vh;
	width: 100%;
	margin-top: 1vh;
	margin-bottom: 0;
	position: relative;
	overflow: hidden;
}

@keyframes LANDSCAPE {
	from {
		transform: translate(calc(40vh / 432.896 * 2000 * -1), 0);
		transform-origin: 50% 50%;
	}
	to { 
		transform: translate(0, 0);
		transform-origin: 50% 50%;
	}
}

#background, #midground, #foreground, #topground {
	height: 40vh;
	position: absolute;
	width: 200%;
	min-width: calc(40vh / 432.896 * 2000 * 2);
	overflow: hidden;
}

@keyframes SNIFFER {
        from {
                transform: rotate(4deg);
        }
        50% {
                transform: rotate(-4deg);
        }
        to { 
                transform: rotate(5deg);
        }
}
#sniffer-container svg {
        position: relative;
        animation: SNIFFER 3s infinite linear;
        transform-origin: 71px 184px;
}

#background {
	background: url(/assets/images/marburgo/marburgo3.svg?v=9411237) repeat-x left bottom;
	background-size: auto 100%;
	z-index: 100;
	
	animation: LANDSCAPE 15s infinite linear;
}

#midground {
	background: url(/assets/images/marburgo/marburgo2.svg?v=9411237) repeat-x left bottom;
	background-size: auto 100%;
	z-index: 200;
	
	animation: LANDSCAPE 10s infinite linear;
}

#foreground {
	background: url(/assets/images/marburgo/marburgo1.svg?v=9411237) repeat-x left bottom;
	background-size: auto 100%;
	z-index: 300;
	
	animation: LANDSCAPE 5s infinite linear;
}

#topground-container {
	position: absolute;
	height: 40vh;
	width: calc(100% - 40vh / 367.12405 * 150);
	overflow: hidden;
	border-radius: 0 0 4vh 0;
}
#topground {
	background: url(/assets/images/line.svg?v=9411237) repeat-x left bottom;
	background-size: auto 100%;
	z-index: 500;
	
	animation: LANDSCAPE 10s infinite linear;
}

#sniffer-container {
	position: absolute;
	height: 40vh;
	width: 100%;
	text-align: right;
	z-index: 400;
}
#sniffer-container svg {
	height: 100%;
	width: auto;
}

#adak-container {
	position: absolute;
	height: 40vh;
	width: 100%;
	text-align: left;
	z-index: 250;
	background: url(/assets/images/addiktive_aktion.svg?v=9411237) no-repeat 50% 50%;
	background-size: auto 30vh;
}

h1, h2 {
	text-transform: uppercase;
	font-family: Coolvetica;
	font-size: 10vh;
	letter-spacing: 0.3vh;
	color: white;
	margin: 0;
	margin-top: 1vh;
	width: calc(100% - 4vh);
	/*word-break: break-all;*/
	hyphens: manual;
	font-variant-ligatures: none;
}

h1 span {
	line-height: 12.1vh;
	padding-left: 2vh;
	padding-right: 2vh;
	margin: 2vh;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	background: black;
}

hr {
    border: 0;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
    height: 0.5vh;
    margin: 0;
}

section, footer {
	font-family: 'Fjalla One';
	text-align: center;
	color: white;
	max-width: 768px;
	margin: 0 auto;
}

section.byline {
	text-transform: uppercase;
	font-size: 3.5vh;
	margin-top: 4vh;
	margin-bottom: 5vh;
	padding: 2vh;
}

section.text {
	text-align: left;
	font-size: 3vh;
	margin-top: 4vh;
	margin-bottom: 5vh;
	padding: 2vh;
}

h2 {
	font-size: 5vh;
	letter-spacing: 0.3vh;
	margin-top: 1vh;
	hyphens: manual;
}

h2 span {
	line-height: 6.2vh;
	padding-left: 2vh;
	padding-right: 2vh;
	margin: 2vh;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	background: black;
}

p {
	margin: 2vh;
	padding-left: 2vh;
	line-height: 1.5;
}

footer {
	font-size: 3vh;
	margin-top: 4vh;
	margin-bottom: 10vh;
	padding: 2vh;
}

p.link {
	padding: 0;
	margin: 0;
	line-height: 1.5;
}

p.link span {
	line-height: 3.2vh;
	padding-left: 2vh;
	padding-right: 2vh;
	margin: 2vh;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	background: black;
}

a {
	color: white;
}

a:hover {
	color: #c8b7b7;
}
