/* source-sans-3-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  src: url('../images/source-sans-3-v9-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  src: url('../images/source-sans-3-v9-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  src: url('../images/source-sans-3-v9-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  src: url('../images/source-sans-3-v9-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



body {
	font-family: 'Source Sans 3', arial, sans-serif;
	font-weight: 400;
	font-style: normal;
	
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	
	font-size: 20px;
	line-height: 1.6;
	color: #fff;
	
	letter-spacing: 0;
	
	text-align: center;
	background: #fff;
	
	padding: 0;
}

#bodybg {
	position: fixed;
	left: 	50px;
	top: 	50px;
	right:  50px;
	bottom: 50px;
	
	width: 100%;
	height: 100%;
	
	height: calc( 100vh - 100px );
	width:  calc( 100vw - 100px );
	
	background-image: url('../images/bild_crop_sw.jpg');
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	
	overflow: scroll;
}


#container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	
	width: 460px;
	height: auto;
	padding: 80px 80px 25px 80px;
	
	max-width: 100%;
	margin: 0 auto;	
	
	background-color: rgba(238,117,74,0.7);
}

#container h1 {
	font-size: 37px;
	line-height: 1;
	font-weight: 800;
}

#container h1 span {
	font-size: 60px;
	font-weight: 800;
}

#container p {
	margin: 0 0 10px 0;
	padding: 0;
	
	margin-bottom: 20px;
}

#container p strong {
	font-weight: 600;
}

#container p.subline {
	margin-bottom: 80px;
}

#container p.nomargin {
	margin-bottom: 0;
}

#container img {
	width: 100%;
	margin: 0 auto;
	margin-bottom: 10px;
}

a {
	color: #fff;
	text-decoration: none;
}

a:hover {
	color: #fff;
	text-decoration: underline;
}


#bodybg {
	height: calc( 100vh - 100px );
	background-position: center top;
}

#container {
	top: 	100px;
	width: 	460px;
	padding: 80px 80px 15px 80px;
}

@media (max-width: 768px) {
	body {
		font-size: 18px;
	}
	#bodybg {
		left: 	20px;
		top: 	20px;
		right:  20px;
		bottom: 20px;
		
		width:  100%;
		height: 100%;
		
		height: calc( 100vh - 40px );
		width:  calc( 100vw - 40px );
	}	
	#container {
		top: 	40px;
		width: 	280px;
		padding: 50px 50px 30px 50px;
	}
	#container p.subline {
		font-size: 12px;
		margin-bottom: 20px;
	}
}

@media (min-width: 768.01px) and (max-width: 1024px) {
    body {
		
	}
	#bodybg {
		left: 	30px;
		top: 	30px;
		right:  30px;
		bottom: 30px;
		
		width:  100%;
		height: 100%;
		
		height: calc( 100vh - 60px );
		width:  calc( 100vw - 60px );
	}	
	#container {
		top: 	60px;
		width: 	400px;
		padding: 50px 50px 30px 50px;
	}
}

@media (min-width:1024.01px) and (max-width: 1420px) {
	body {
	}
	#bodybg {
		left: 	30px;
		top: 	30px;
		right:  30px;
		bottom: 30px;
		
		width:  100%;
		height: 100%;
		
		height: calc( 100vh - 60px );
		width:  calc( 100vw - 60px );
	}	
	#container {
		top: 	60px;
		width: 	460px;
		padding: 50px 50px 30px 50px;
	}
}

@media (min-width:1420.01px) {
	#bodybg {
		left: 	50px;
		top: 	50px;
		right:  50px;
		bottom: 50px;
		
		width: 100%;
		height: 100%;
		
		height: calc( 100vh - 100px );
		width:  calc( 100vw - 100px );
	}	
	#container {
		top: 	100px;
		width: 	460px;
		padding: 80px 80px 40px 80px;
	}
}