* { 
	margin:0; 
	padding: 0; 
	box-sizing: border-box;
} 

::before, ::after { 
	box-sizing: inherit; 
}

:root {
	--hgrd_html: #112;
	--hintergrund: #234;
	--brot: #cce;
}

html {
	background: var(--hgrd_html);	
}

body{
    font-family: 'DejaVu Sans', Verdana, Helvetica, sans-serif, Segoe UI Symbol;
	font-size: 1rem;
	background: var(--hintergrund);
	color: var(--brot);
	margin: 0 auto;
	width: 100%;
	max-width: 150em;
	height: auto;
	max-height: 100%;
}

h1,h2,h3,h4,h5,h6 {
	font-family: "YanoneKaffeesatz-Regular", Helvetica, sans-serif;
    color: var(--brot);
    margin: 0 0 1rem 0;
}

h1 {
	font-size: 4rem;
	font-weight: normal;
	line-height: 1.4;
	padding: 0 0 0.5rem 0;
}

h2 {
	font-size: 3rem;
	font-weight: normal;
	line-height: 1.4;
	padding: 0 0 0.5rem 0;
}

h3 { font-size: 2.5rem; }
h4 { font-size: 2rem; }
h5 { font-size: 1.6rem; }
h6 { font-size: 1.1rem; }

p { 
	font-size: 1.2rem;
	line-height: 1.6; 
	padding-bottom: 0.8rem;
}

header{
	background: var(--hintergrund) url("../backimages/calidris_dev_logo1_small.png") repeat-x scroll -2rem -0.5rem;
}

#logo {
	padding-right: 2rem;
	font-family: "YanoneKaffeesatz-Regular", Verdana, Helvetica, sans-serif;
	font-size: 3.6rem;
	line-height: 2.0;
}
#logo a {
	text-decoration: none;
	color: #fff;
}
	
main {
	background: var(--hintergrund);
	color: var(--brot);
	width: 100%;
	padding: 0 2rem;
}

main a {
	color: #8be;
	text-decoration: none;
}
 	
#sublinks {
	margin-bottom: 2rem;
}

#sublinks a:hover {
	color: #bbf;
}

#as {
	padding: 0 1rem 1rem 0;
}

#mc {
	padding: 0 1rem 1rem 0; 
}

#as p { 
	font-size: 1.2rem; 
}

#mc p { 
	font-size: 1.4rem; 
}

#m1 h1 {
	font-family: /*'DejaVu Sans',*/ "YanoneKaffeesatz-Regular", Helvetica, sans-serif;
	font-size: 2.8rem;
	font-weight: normal;
	margin: 0 0 2rem 0;
}

#m1 a {
	font-family: /*'DejaVu Sans',*/ "YanoneKaffeesatz-Regular", Helvetica, sans-serif;
	font-size: 2.4rem;
	font-weight: normal;
	text-decoration: none;
	color: #66bbff;
	margin: 0 1.6rem 0.4rem 0;
	display: inline-block;
}

#m1 span{
	font-size: 1.5rem;
	padding: 0 .25rem 0 0;
	color: #6688bb;
}

#m1 .breadcrumbs a {
	font-size: 2rem;
}

#m2 {
}

footer{
	background: #020202;
	height: 6rem;
	padding: 1rem;
}
footer p{
	font-size: 1.2rem;
	line-height: 1.4;
	color: var(--brot);
	text-align:center;
	padding: 0.3rem 1rem;
}
footer a{
	color: #d99;
	text-decoration: none;
}

.teaser {
	margin: 0 0 2rem 0;
	max-width: 100em;
}
.teaser img {
	margin-bottom: .7rem;
	width: 100%;
}
.teaser figcaption {
	font-size: 0.9rem;
	padding-left: 0;
}




	.videos figure {
		padding: 0;
		margin-bottom: 0;
	}

								.videos figure a {
									margin: 0;
									padding: 0;
								}
								
	.videos video {
		margin: 0;
					height: 15rem;
	}

								
								.videos figcaption {
									font-size: 0.8rem;
									padding-right: 1rem;
								}



#logo {
	padding-right: 3rem;
	font-size: 6rem;
	line-height: 1.5;
}


/* ******************************************************* */


@media (min-width: 80rem) 
{
	body {
		font-size: 1rem;
	}

	header{
		background: var(--hintergrund) url("../backimages/calidris_dev_logo1.png") repeat-x scroll -2.3rem 0;
	}

	#logo {
		padding-right: 5rem;
		font-size: 8rem;
		line-height: 1.5;
	}

	main {
		padding: 1rem 4rem;
	}

	#as {
		padding: 0 2rem 2rem 2rem; 
	}
	#mc {
		padding: 0 2rem 2rem 0; 
	}

	#as p { 
 		font-size: 1rem; 
	}
	#mc p { 
 		font-size: 1.2rem; 
	}

	.teaser {
		margin: 0 0 2rem 0;
					max-width: 100rem;
	}
	
	footer p{
		font-size: 0.8rem;
		line-height: 1.2;
	}

	.videos figure {
		padding: 0;
		margin-bottom: 0;
	}

													.videos figure a {
														margin: 0;
														padding: 0;
													}
													
	.videos video {
		margin: 0;
									height: 12rem;
	}
	
	.videos figcaption {
		font-size: 0.8rem;
		padding-right: 1rem;
	}


}