@font-face {
    font-family: 'dinprobold';
	src: url('fonts/dinprobold.eot');
    src: url('fonts/dinprobold.eot') format('embedded-opentype'),
         url('fonts/dinprobold.woff2') format('woff2'),
         url('fonts/dinprobold.woff') format('woff'),
         url('fonts/dinprobold.ttf') format('truetype'),
         url('fonts/dinprobold.svg#dinprobold') format('svg');
}

@font-face {
    font-family: 'dinpromedium';
	src: url('fonts/dinpromedium.eot');
    src: url('fonts/dinpromedium.eot') format('embedded-opentype'),
         url('fonts/dinpromedium.woff2') format('woff2'),
         url('fonts/dinpromedium.woff') format('woff'),
         url('fonts/dinpromedium.ttf') format('truetype'),
         url('fonts/dinpromedium.svg#dinpromedium') format('svg');
}

@font-face {
    font-family: 'dinproregular';
	src: url('fonts/dinproregular.eot');
    src: url('fonts/dinproregular.eot') format('embedded-opentype'),
         url('fonts/dinproregular.woff2') format('woff2'),
         url('fonts/dinproregular.woff') format('woff'),
         url('fonts/dinproregular.ttf') format('truetype'),
         url('fonts/dinproregular.svg#dinproregular') format('svg');
}

html,body { width: 100%; height: 100%; }
body { 
	background-image: url("bg.jpg");
	background-repeat: no-repeat;
	background-position: 0% 0%;
	background-size: cover;
	position: relative;
	margin: 0;
	padding: 0;
}
header { 
	margin: 0px auto;
	padding: 20px 0;
	width: 38%;
	}
header img { width: 100%; }
header > h2 { 
	color: #fff;
	font-weight: normal;
	margin: 0 auto;
	font-family: 'dinproregular';
	text-align: center;
	}

div.content {
	position: relative;
	margin: 0px auto;
	padding: 20px 0;
	top: 130px;
	width: 38%;
	background-image: url("infobg.png");
	}
div.content img { width: 100%; }
div.content .info { position: relative; width: 100%; text-align: center; }
div.info > h1  {
	color: #fff;
	font-family: 'dinprobold';
	text-align: center;
}
div.info > div.text  {
	position: relative;
	margin: 0 auto;
	width: 80%;
	color: #fff;
	font-family: 'dinpromedium';
	font-size: 1.5em;
	text-align: center;
}

div.info > div.phone  {
	position: relative;
	background-image: url("phone.png");
	background-repeat: no-repeat;
	background-position: 0% 0%;
	margin: 15px auto;
	width: 50%;
	color: #fff;
	font-family: 'dinprobold';
	font-size: 2em;
	text-align: center;
	padding-left: 30px;
}

div.info > div.phone > a { color: #FFF; text-decoration: none; }

@media screen and (max-width: 768px){
	body { 
		background-image: url("bgmob.jpg");
		background-repeat: no-repeat;
		background-position: 0% 0%;
		background-size: cover;
		position: relative;
		margin: 0;
		padding: 0;
	}
	header { 
	margin: 0px auto;
	padding: 20px 0;
	width: 100%;
	}
	header > h2 { font-size: 0.8em; }
	header img { width: 100%; }

	div.content {
		position: absolute;
		top: 40%;
		left: 0;
		margin: 0px auto;
		padding: 20px 0;
		width: 100%;
		}
	div.content img { width: 100%; }
	
	div.info > h1  {
		font-size: 1.2em;
	}
	div.info > div.text  {
		font-size: 1em;
	}

	div.info > div.phone  {
		width: 220px;
		font-size: 1.6em;
		line-height: 1.6em;
		padding-left: 30px;
	}


}