html {
	height: 100%;
	width: 100%;
	font-family: FFDin;
	font-size: 15pt;
}
@font-face {
	font-family: FFDin;
	src: url('../FF DIN light/ff_din_pro_light_italic-webfont.woff') format("woff");
}
body {
	height: 100%;
	width: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	background-color: #000;
}
#backgroundmap{
	position: absolute;
	top: 5%;
	left: 50%;
	transform: translate(-50%, 0%);
	height: 0;
	width: 75%;
	background-image: url('../pics/world_map_red.svg');
	background-repeat: no-repeat;
	background-size: contain;
	margin: 0 auto;
	padding-bottom: 45%;
}
#info_container{
	position: absolute;
	top: 70%;
	height: 30%;
	width: 25%;
	left: -10%;
}
#info_container * {
	padding: 0 0 0 10px;
	font-weight: bold;
}
#info_1{
	height: 30px;
	width: 230px;
	background-color: #b9c400;
}
#info_2{
	height: 30px;
	width: 220px;
	background-image: -webkit-linear-gradient(#e9cd76 20%, #c9961a 120%);
	background-image: -moz-linear-gradient(#e9cd76 20%, #c9961a 120%);
	background-image: -o-linear-gradient(#e9cd76 20%, #c9961a 120%);
	background-image: linear-gradient(#e9cd76 20%, #c9961a 120%);
	margin: 0 0 0 12%;
}
a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:hover{
    text-decoration:    none;
    color: #000;
}
#info_3{
	height: 30px;
	width: 230px;
	background-color: #b9c400;
	margin: 2px 0 0 0;
}
a[href^="mailto"]:link,
a[href^="mailto"]:visited,
a[href^="mailto"]:hover{
    text-decoration:    none;
    color: #000;
}

#info_4{
	height: 80px;
	width: 240px;
	color: #000;
	background-color: #fff;
	margin: 5px 0 0 0;
}



/*iPhone portrait*/
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait){
	html {
		font-size: 30pt;
	}
	#backgroundmap{
		top: 5%;
		left: 50%;
		width: 100%;
		padding-bottom: 55%;
	}
	#info_container{
		top: 120%;
		left: 50%;
		height: 65%;
		width: 70%;
		transform: translate(-45%, 0%);
	}
	#info_1{
		height: 15%;
		width: 80%;
	}
	#info_2{
		height: 15%;
		width: 80%;
	}
	#info_3{
		height: 15%;
		width: 80%;
	}
	#info_4{
		height: 45%;
		width: 85%;
	}
}

/*iPhone landscape*/
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape){
	#backgroundmap{ background-position: 80px 0; width: 90%; }
	#info_container{ left: -4%; }
}	

/*iPad portrait*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2){
	html {
		font-size: 30pt;
	}
	#backgroundmap{
		top: 5%;
		left: 50%;
		width: 100%;
		padding-bottom: 55%;
	}
	#info_container{
		top: 120%;
		left: 50%;
		height: 65%;
		width: 70%;
		transform: translate(-45%, 0%);
	}
	#info_1{
		height: 15%;
		width: 80%;
	}
	#info_2{
		height: 15%;
		width: 80%;
	}
	#info_3{
		height: 15%;
		width: 80%;
	}
	#info_4{
		height: 45%;
		width: 85%;
	}
}

/*iPad landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2){
	#backgroundmap{ background-position: 80px 0; width: 90%; }
	#info_container{ left: -4%; }
}