@font-face {
    font-family: FSJoey;
    src: url(sources/FS-Joey-Medium.otf) format('opentype');
}

@font-face {
    font-family: FSJoeyLight;
    src: url(sources/FS-Joey-LightItalic.otf) format('opentype');
} 

@media (min-width: 1200px) { 
    body    {
    }
	
	.bg {
	position: absolute;
	margin-left: -0.5em;
	margin-top: -0.5em;
    width: 51%;
    height: auto;
	z-index: 0;
	}

	.logo {
		position: absolute;
		margin-top: -0.4em;
		margin-left: 60em;
		width: 10%;
		height: 10%;
		z-index: 1;
	}
	
	.Imp {
		position: absolute;
		margin-top: 2em;
		margin-left: 0em;
		font-family: FSJoey;
		font-size: 0.5em;
		z-index: 2;
	}

	.Daten {
		position: absolute;
		margin-top: 3.4em;
		margin-left: 0em;
		font-family: FSJoey;
		font-size: 0.5em;
		z-index: 2;
	}

	h1 {
		position: absolute;
		margin-top: 8em;
		margin-left: 11.5em;
		font-family: FSJoey;
		font-size: 1.7em;
		z-index: 2;
	}

	h2 {
		position: absolute;
		margin-top: 1.4em;
		margin-left: 5em;
		font-family: FSJoeyLight;
		color: #ffffff;
		z-index: 2;
	}

	.werb {
		font-family: FSJoey;
		font-size: 0.55em;
		z-index: 2;
	}
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 1199px) { 
    body    {
    }
	
	.bg {
	position: absolute;
	margin-left: -0.5em;
	margin-top: -0.5em;
    width: 51%;
    height: auto;
	z-index: 0;
	}

	.logo {
		position: absolute;
		margin-top: -0.2em;
		margin-left: 45em;
		width: 10%;
		height: auto;
		z-index: 1;
	}

	.Imp {
		position: absolute;
		margin-top: -3em;
		margin-left: -17em;
		font-family: FSJoey;
		font-size: 0.4em;
		z-index: 2;
	}

	.Daten {
		position: absolute;
		margin-top: -4.5em;
		margin-left: -17em;
		font-family: FSJoey;
		font-size: 0.4em;
		z-index: 2;
	}

	h1 {
		position: absolute;
		margin-top: 6em;
		margin-left: 8em;
		font-family: FSJoey;
		font-size: 1.7em;
		z-index: 2;
	}

	h2 {
		position: absolute;
		margin-top: 1.4em;
		margin-left: 7em;
		font-family: FSJoeyLight;
		color: #ffffff;
		font-size: 1em;
		z-index: 2;
	}

	.werb {
		font-family: FSJoey;
		font-size: 0.55em;
		z-index: 2;
	}
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
    body    {
    }
	
	.bg {
		position: absolute;
		margin-left: -0.5em;
		margin-top: -0.5em;
		width: 100%;
		height: auto;
		z-index: 0;
	}

	.logo {
		position: absolute;
		margin-top: -0.2em;
		margin-left: 45em;
		width: 10%;
		height: auto;
		z-index: 1;
	}

	.Imp {
		position: absolute;
		margin-top: -3em;
		margin-left: -17em;
		font-family: FSJoey;
		font-size: 0.4em;
		z-index: 2;
	}

	.Daten {
		position: absolute;
		margin-top: -4.5em;
		margin-left: -17em;
		font-family: FSJoey;
		font-size: 0.4em;
		z-index: 2;
	}

	h1 {
		position: absolute;
		margin-top: 6em;
		margin-left: 8em;
		font-family: FSJoey;
		font-size: 1.7em;
		z-index: 2;
	}

	h2 {
		position: absolute;
		margin-top: 2em;
		margin-left: 10em;
		font-family: FSJoeyLight;
		color: #ffffff;
		font-size: 1em;
		z-index: 2;
	}

	.werb {
		font-family: FSJoey;
		font-size: 0.55em;
		margin-top: 4em;
		z-index: 2;
	}
}

/* Landscape phones and down */
@media (max-width: 480px) { 
    body    {
    }
	.bg {
		position: absolute;
		margin-left: -2em;
		margin-top: -1em;
		width: 100%;
		height: auto;
		z-index: 0;
	}

	.logo {
		position: absolute;
		margin-top: 3em;
		margin-left: 11em;
		width: 0%;
		height: auto;
		z-index: 1;
	}

	.Imp {
		position: absolute;
		margin-top: 4em;
		margin-left: 0em;
		font-family: FSJoey;
		font-size: 0.4em;
		z-index: 2;
	}

	.Daten {
		position: absolute;
		margin-top: 4em;
		margin-left: 5.5em;
		font-family: FSJoey;
		font-size: 0.4em;
		z-index: 2;
	}

	h1 {
		position: absolute;
		margin-top: 7em;
		margin-left: 2.5em;
		font-family: FSJoey;
		font-size: 1em;
		color: #000000;
		z-index: 2;
	}

	h2 {
		position: absolute;
		margin-top: 0.2em;
		margin-left: 2em;
		font-family: FSJoeyLight;
		color: #ffffff;
		font-size: 0.7em;
		z-index: 2;
	}

	.werb {
		font-family: FSJoey;
		font-size: 0.55em;
		margin-top: 3em;
		color: #000000;
		z-index: 2;
	}
}