@font-face {
	font-family: 'Blanch Caps';
		src: url('../font/blanch_caps-webfont.eot');
		src: url('../font/blanch_caps-webfont.eot?#iefix') format('embedded-opentype'),
			url('../font/blanch_caps-webfont.woff2') format('woff2'),
			url('../font/blanch_caps-webfont.woff') format('woff'),
			url('../font/blanch_caps-webfont.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	}
@font-face {
	font-family: 'Source Sans Light';
	src: url('../font/sourcesanspro-light-webfont.eot');
	src: url('../font/sourcesanspro-light-webfont.eot?#iefix') format('embedded-opentype'),
		url('../font/sourcesanspro-light-webfont.woff') format('woff'),
		url('../font/sourcesanspro-light-webfont.ttf') format('truetype'),
		url('../font/sourcesanspro-light--webfont.svg#source_sans_prolight') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'MeteoconsRegular'; font-style: normal; font-weight: normal;
	src: url('../font/meteocons-webfont.eot');
	src: url('../font/meteocons-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../font/meteocons-webfont.woff') format('woff'),
		 url('../font/meteocons-webfont.ttf') format('truetype'),
		 url('../font/meteocons-webfont.svg#MeteoconsRegular') format('svg');
}
@font-face {
	font-family: 'Blanch Caps';
	src: url('../font/blanch_caps-webfont.eot');
	src: url('../font/blanch_caps-webfont.eot?#iefix') format('embedded-opentype'),
		url('../font/blanch_caps-webfont.woff2') format('woff2'),
		url('../font/blanch_caps-webfont.woff') format('woff'),
		url('../font/blanch_caps-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Source Sans Light';
	src: url('../font/sourcesanspro-light-webfont.eot');
	src: url('../font/sourcesanspro-light-webfont.eot?#iefix') format('embedded-opentype'),
		url('../font/sourcesanspro-light-webfont.woff') format('woff'),
		url('../font/sourcesanspro-light-webfont.ttf') format('truetype'),
		url('../font/sourcesanspro-light--webfont.svg#source_sans_prolight') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'MeteoconsRegular'; font-style: normal; font-weight: normal;
	src: url('../font/meteocons-webfont.eot');
	src: url('../font/meteocons-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../font/meteocons-webfont.woff') format('woff'),
		 url('../font/meteocons-webfont.ttf') format('truetype');
}	

* { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }

html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	font-size: 25%;
}

body { overflow: hidden; }
#languageselect { 
	position: fixed; left: 0; right: 15px; top: 15px;
	text-align: right;
}
#languageselect > * {
	border-radius: 50%;
	display: inline-block;
	width: 45px;
}
#languageselect > * img {
	height: auto;
	vertical-align: middle;
	width: 100%;
}

.box  {
	color: #FFF;
	float: left;
	font-family: 'Source Sans Light', Arial, Sans-Serif;
	width: 50%;
	height: 50%;
	text-align: center; text-decoration: none;
	vertical-align: middle;
	border: 5px solid #fff;
	padding: 50px 10px;
}
.box h2 { padding: 0 10px;}

.events, .events h2 { background-color: #143347; }
/*.rad, .rad h2, */.mediabox, .mediabox h2 { background-color: #8cb566; }
.bikekarte, .bikekarte h2 { background-color: #ffef26; }
.wetter, .wetter h2 { background-color: #3ec6ff; }
.bikekarte ul, .bikekarte h2, .bikekarte div { color: #585858; }

h2, h3/*, .rad.box p */{ margin: 0; }
h2, strong, #grad td {
	font-family: 'Blanch Caps', Georgia, Serif;
	font-weight: lighter;
}
h2 { font-size: 80px; }
strong { font-size: 120px; }
#grad td { 
	font-size: 80px; 
	line-height: 65%;
}

h3, ul, td, /*.rad.box p*/ .mediabox p {
	font-size: 25px;
	line-height: 180%;
}
/*.rad.box p */ .mediabox p { font-weight: bold; }
.mediabox p { 
	margin-top: 100px;
	padding: 0 2em;
}
html[lang="it"] .mediabox p  { margin-top: 120px; }
/*.rad.box .number {
	display: block;
	font-family: 'Blanch Caps', Georgia, Serif; font-size: 80px; font-weight: lighter;
	line-height: 85%;
}*/

ul { 
	list-style: none;
	padding: 0;
}
.bikekarte .with { margin-top: 10%; }
.bikekarte ul { margin-top: 10%; }
.bikekarte .with ~ ul { margin-top: 5px; }
#grad span {
	font-family: 'Source Sans Light';
	font-size: 60px;
}
#weather td { 
	font-family: 'MeteoconsRegular';
	font-size: 100px; 
	line-height: 180%;
	padding-top: 5%;
}
#tempmin > td { font-size: 16px; }
table { width: 100%; }
div.title {
	background-image: url("/grafik/point_white.svg?2"); background-repeat: repeat-x; background-position: 50% 50%;
	text-align: center;
}
.bikekarte div.title { background-image: url("/grafik/point_dark.svg?2"); }
.title h2 { display: inline-block; }

@media screen and (max-width: 1280px) {
	.mediabox p { margin-top: 15%; }
}

@media screen and (max-width: 1090px) {
	#weather td { font-size: 80px; }
	#grad td { font-size: 60px; }
	h2 { font-size: 70px; }
	h3, ul, td { font-size: 20px; }
	strong { font-size: 100px; }
}

@media screen and (max-width: 870px) {
	#weather td { font-size: 60px; }
	#grad td { font-size: 40px; }
	#grad span { font-size: 30px; }
	.bikekarte h2 { font-size: 60px; }
	h3, ul, td { font-size: 20px; }
}

@media screen and (max-width: 768px) {
	h3, ul, table, strong/*, .box.rad p, .box.rad .details*/, .mediabox p { display: none;}
	.title { background-image: none!important; }
	.box { 
		height: 25vh; 
		width: 100%;
		border: 3px solid #FFF;
	}
	.header { 
		position: relative;
		top: 23.333%;
		padding: 0 10px;
	}
}

@media screen and (max-width: 450px) {
	.header img { display: none; }
}
@media screen and (max-width: 300px) {
	.title h2 { font-size: 45px; }
	.bikekarte h2 { font-size: 40px; }
	html[lang="it"] .header img { display: none; }
}
@media screen and (max-width: 240px) {
	.bikekarte h2 { font-size: 35px; }
}

@media screen and (max-height: 1200px) { 
	.events ul { line-height: 150%; }
	/*.box.rad .details { display: none; }*/
}

@media screen and (max-height: 1050px) { 
	h2 { font-size: 70px; }
	html[lang="it"] h2 { font-size: 50px; }
	h3, ul, td { font-size: 22px; }
	strong { font-size: 100px; }
	#weather td { padding-top: 0; }
	.box { padding: 25px 0;}
}

@media screen and (max-height: 920px) { 
	#weather td { font-size: 80px; }
	#grad td { font-size: 60px; }
	#grad span { font-size: 40px; }
	strong { font-size: 70px; }
	h2 { font-size: 60px; }
	html[lang="it"] h2 { font-size: 40px; }
	h3, ul, td { font-size: 20px; }
	.events ul { font-size: 18px; }
}

@media screen and (max-height: 870px) {
	html[lang="de"] .mediabox p { margin-top: 10%;}
}

@media screen and (max-height: 800px) {
	h3, ul, table, strong/*, .box.rad p, .box.rad .details */, .mediabox p { display: none;}
	.title { background-image: none!important; }
	
	.header { 
		position: relative;
		top: 23.333%;
	}
	.box { 
		margin: 0;
		padding: 0;
	 }
}
@media screen and (max-height: 650px) {
	.title h2 { font-size: 45px; }
	.bikekarte h2 { font-size: 40px; }
	.header img { height: 40px; width: auto; }
}

@media screen and (max-height: 500px) {
	.title h2 { font-size: 40px; }
	.header img { display: none; }
	.header { 
		position: relative;
		top: 35%;
	}

}
@media screen and (max-height: 300px) {
	.header img { display: none; }
	.header { 
		position: relative;
		top: 35%;
	}
}