body {
	margin:0;
	padding:0 0 100px 0;
	font-family: 'Conto-Light';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	font-size:17px;
	line-height:1.33em;
	position:relative;
}

h1,h2 {
	color:#E21B2A; 
	font-family:'Conto-Bold';
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
	line-height:1.33em;
}

h1,h2,h3 {margin:0 0 1em 0}

p {
	margin:0 0 0.8em 0;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

h3 {
    font-family: "Conto-Bold";
    font-size: 19px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

a { color:#000; text-decoration: underline;}
a:hover { color:#000; }

ul {
    margin-bottom: 1em;
    margin-top: 0;
	padding-left:18px;
}

strong {
	font-family: 'Conto-Bold';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.content-container {
	margin: 0 auto;
	padding:0 20px;
}

.interlayer {position:absolute;top:0;left:0;width:100%;height:500px;z-index:-1}

.arrow-black,.arrow-red {display:block;width:26px;height:26px}
.arrow-black {background:url('../images/nav-down.svg') top left no-repeat}
.arrow-red {background:url('../images/nav-down-red.svg') top left no-repeat}

/*** top & bottom bar ***/
.top-bar, .bottom-bar { 
	position:fixed; 
	left:0;
	right:0;
	background:#E21B2A; 
	width:100%;
}
.top-bar {top:0;height:32px}
.bottom-bar {bottom:0;height:50px}

#nav-container {
	width:100%;
	height:32px;
}

#bottom-container {
	width:100%;
	height:50px;
	position:relative;
}

#bottom-container .logo-bottom {
	padding:7px 0 7px 20px;
	display:none;
}

#bottom-container span {
	display:none;
}

#bottom-container .back2top {
	position:absolute;
	top:12px;
	right:0;
	margin:0 20px 0 0;
	width:26px;
	height:26px;
	background:url('../images/nav-up.svg') top left no-repeat;
	display: none;
}


/*** navigation ***/

#nav-container {
	position:relative;
}

#nav-container .nav-logo {
	height:26px;
	margin-top: 4px;
}

#nav-container ul {
	background:#E21B2A;
	list-style:none;
	padding:0 0 10px 0;
	margin:0;
	text-align:center;
	overflow: visible;
	display: none;
}

#nav-container ul li:first-child {
	line-height: 40px;
}



#nav-container ul li a {
	font-family:'Conto-Regular';
	font-size:21px ;
	line-height:30px;
	text-decoration:none;
	color:#FFF;
	position:relative;
	display:inline-block;
	height:30px;
}

#nav-container ul li.active a {
	font-family:'Conto-Bold';
}

.nav li.active a:before {
	position:absolute;
	left:-15px;
	top:0px;
	height:30px;
	width:15px;
	content:" - ";
}

.nav li.active a:after {
	position:absolute;
	right:-15px;
	height:30px;
	width:15px;
	top:0px;
	content:" - ";
}


#nav-container .toggle {
	background: url('../images/nav-close.svg') center center no-repeat;
	background-size:18px 18px;
	width:15px;
	height:15px;
    position: absolute;
	left:8px;
	top:9px;
	cursor: pointer;
}

#nav-container .closed {
    background: url('../images/nav-select.svg') center center no-repeat;
	background-size:18px 9px;
	width:18px;
	height:18px;
	top:6px;
}

#nav-container .nav-brand {
	position: absolute;
	top:10%;
	left:10%;
	width:80%;
	height:26px;
	background: url('../images/nav-logo200.png') center center no-repeat;
	background-size: 100px auto;
}


/*** helper classes ***/
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {clear: both}
.clearfix {*zoom: 1}


/*** media queries ***/

@media (min-width: 440px) { 
	.content-container {padding:0 5%}

	#nav-container ul li a {
		height:21px;
	}

}

@media (min-width: 680px) { 

	body{font-size:19px}
	.content-container {padding:0 20px;max-width:640px}

	#nav-container,
	#bottom-container {
		width:640px;
		margin:0 auto;
	}

	#bottom-container span {
		display:inline;
	}

	#nav-container ul {
		text-align:left;
		display: block !important;
		padding-bottom: 0;
	}

	#nav-container ul li {
		float:left;
		height:32px;
	}

	#nav-container ul li:first-child {
		display:none;
	}

	#nav-container ul li a {
		margin:5px 0;
		padding:0 12px;
		line-height:1;
		display:inline-block;
		background:transparent url('../images/nav-line.png') top right repeat-y;
	}

	#nav-container ul li:nth-child(2) a {
		padding:0 12px 0 0;
	}
	
	#nav-container ul li:last-child a {
		background:none;
	}	
	
	.nav li.active a:before,
	.nav li.active a:after {
		display:none;
	}
	
	#nav-container .toggle {
		display:none;
	}
	
	#bottom-container .logo-bottom {
		padding:7px 0;
	}
	
	#bottom-container .back2top {
		margin:0;
	}

	#nav-container .nav-brand {
		    opacity: 0;
    		filter: alpha(opacity=0);
			z-index:-10;
	}

	.vita #bottom-container .logo-bottom,
	.elemente #bottom-container .logo-bottom,
	.angebot #bottom-container .logo-bottom,
	.kontakt #bottom-container .logo-bottom,
	.bestaetigung #bottom-container .logo-bottom {
		display:block;
	}


}