/**********************************
* Umsetzung 2015: Niels Weber     *
* trimart | multi-media-services  *
* Internet: http://www.trimart.de *
***********************************/

* {
	margin: 0;
	padding: 0;
	outline: 0;
}
.align-left   { text-align: left;   }
.align-center { text-align: center; }
.align-right  { text-align: right;  }

body {
	background-color: #E7ECF0;
	color: #707070;
	font-family: 'Exo 2', arial, helvetica, sans-serif;
	font-size: 101%;
	font-weight: 400;
	text-align: center;
}
.container {
	width: auto;
	max-width: 1020px;
	margin: 0 auto 0 auto;
	background-color: #FFFFFF;
	overflow: hidden;
	-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
	   -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
	        box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
	text-align: left;
}
/* HEADER
 **************************************************/
.header {
	width: 100%;
	height: 70px;
	margin: 0;
	padding: 0;
	position: relative;
}
.header .logo {
	position: absolute;
	top: 18px;
	left: 40px;
}
.header NAV.main {
	position: absolute;
	top: 30px;
	right: 40px;
}
.header NAV.main SPAN {
	width: 20px;
	display: inline-block;
	visibility: hidden;
}
.header NAV.main A {
	color: #AAAAAA;
	font-size: 0.875em;
	text-transform: uppercase;
	text-decoration: none;
}
.header NAV.main A:hover {
	color: #666666;
}
.header NAV.main A.active {
	color: #004F5C;
}
@media screen and (max-width: 600px) {
	.container .header .logo {
		top: 10px;
		left: 20px;
	}
	.container .header .logo IMG {
		width: 80px;
	}
	.container .header NAV.main {
		height: auto;
		left: 20px;
		line-height: 30px;
	}
	.header NAV.main SPAN {
		width: 5px;
	}
}
/* RUBPIC
 **************************************************/
.rubpic {
	width: 100%;
	height: auto;
	margin-bottom: 3em;
}
.rubpic IMG {
	width: 100%;
	height: auto;
	text-align: center;
	vertical-align: middle;
}
/* CONTENT
 **************************************************/
.content-container {
	margin-top: 2em;
}
.content-container.first {
	margin-top: 0;
}
.content IMG {
	width: 100%;
	height: auto;
	text-align: center;
	vertical-align: middle;
}
.content H2 {
	margin: 1em 0 0.5em 0;
	padding: 0;
	color: #004F5C;
	font-weight: 600;
	font-size: 1.6em;
	font-style: italic;
}
.content H2.first {
	margin-top: 0;
}
.content H3 {
	margin: 0.5em 0 0.25em 0;
	padding: 0;
	color: #004F5C;
	font-weight: 600;
	font-size: 1.25em;
	font-style: italic;
}
.content H4 {
	margin: 1em 0 0.75em 0;
	padding: 0;
	color: #707070;
	font-weight: 600;
	font-size: 0.875em;
	line-height: 1.375em;
}
.content H4.first {
	margin-top: 0;
}
.content P {
	padding: 0 0 0.75em 0;
	font-size: 0.875em;
	line-height: 1.375em;
}
.content SMALL {
	margin: 0;
	padding: 0 0 0.25em 0;
	font-size: 0.625em;
	line-height: 0.25em;
}
.content UL {
	margin: 0.75em 0 0.75em 0;
	list-style-position: inside;
}
.content UL LI {
	padding: 0 0 1em 0;
	font-size: 0.875em;
	line-height: 1.375em;
}
.content A {
	color: #004F5C;
	text-decoration: underline;
}
.content A:hover {
	color: #000000;
	text-decoration: none;
}
.content A.tel {
	color: #AAAAAA;
	text-decoration: none;
}
.content A.tel:hover {
	color: #004F5C;
	text-decoration: underline;
}
@media screen and (max-width: 600px) {
	.content-container .content {
		width: auto;
		padding: 0 20px 0 20px;
	}
}
/* MARGINAL
 **************************************************/
.marginal {
}
.marginal IMG {
	width: 100%;
	max-width: 270px;
	height: auto;
	margin: 0 0 20px 0;
	text-align: center;
	vertical-align: middle;
}
.marginal AUDIO {
	width: 100%;
	margin: 10px 0 10px 0;
}
@media screen and (max-width: 600px) {
	.content-container .marginal {
		width: auto;
		padding: 0 20px 0 20px;
	}
}
/* FOOTER
 **************************************************/
.footer {
	margin-top: 50px;
	clear: both;
}
.footer NAV.main {
	height: 60px;
	border-top: 1px solid #DDDDDD;
	text-align: center;
	line-height: 50px;
}
.footer NAV.main SPAN {
	width: 10px;
	display: inline-block;
	visibility: hidden;
}
.footer NAV.main A {
	color: #DDDDDD;
	font-size: 0.75em;
	text-transform: uppercase;
	text-decoration: none;
}
.footer NAV.main A:hover {
	color: #333333;
}
.footer NAV.main A.active {
	color: #AAAAAA;
}
@media screen and (max-width: 600px) {
	.container .footer {
		width: 100%;
		margin: 0 0 20px 0;
		padding: 0;
	}
	.container .footer NAV.main {
		height: auto;
		padding: 0 20px 0 20px;
		line-height: 20px;
	}
}
/* OTHER
 **************************************************/
IMG.desaturate {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: url(desaturate.svg#greyscale);
	filter: gray;
	-webkit-filter: grayscale(1);
}
IMG.desaturate:hover {
	filter: none;
}