/* Style Document */

html {
	background-image: url(../images/design/marmor.png);
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	color: #171717;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 150%;
	/*background-image: url(../images/design/marmor.png);*/
}

a {
	color: #171717;
	text-decoration: none;
}
a:hover {
	color: #e5130b;
	text-decoration: none;
}

a span {
	display: none;
}

.clearbox {
	clear: both;
}



/* --------------------------------------------------------------------------- WRAPPER ----------- */
#wrapper {
	position: relative;
	width: 980px;
	min-height: 100%;
	/*height: auto !important;*/
	/*height: 100%;*/
	margin: 0 auto;
	text-align: left;
	background: url(../images/design/nav.png) 0 0 no-repeat;
	z-index: 2;
}

#page {
	position: relative;
	top: 0px;
	left: 0px;
	width: 980px;
	margin: 0 auto;
	text-align: left;
}

#foot {
	position: absolute;
	left: 0;
	bottom: 10px;
	width: 250px;
	line-height: 150%;
	text-align: center;
	font-size: 10px;
	color: #f2f2f2;
}
		#foot a {
			color: #f2f2f2;
		}
		#foot a:hover {
			color: #e5130b;
		}
.bull { display: none; }
br.mbr { display: none; }
 
/* --------------------------------------------------------------------------- WRAPPER ----------- */



/* --------------------------------------------------------------------------- START ------------- */
#home_images {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
	z-index: 1;
}

#superbgimage {
	display: none;
}
/* --------------------------------------------------------------------------- START ------------- */



/* --------------------------------------------------------------------------- LOGO -------------- */
#logo {
	/*position: absolute;
	top: 5px;
	left: 0px;*/
	float: left;
	width: 250px;
	height: 125px;
	margin: 0 0 5px 0; 
	padding: 0; 
}
		#logo #k-konzept {
			margin: 40px 0 0 17px;
		}
		#logo #krekels {
			margin: 15px 0 0 17px;
		}
		#logo a {
			display: block;
			position: absolute;
			top: 0px;
			left: 0px;
			width: 250px;
			height: 120px;
			margin: 5px 0 0 0;
		}
		#mobilenav {
			display: none;
		}

/* --------------------------------------------------------------------------- LOGO -------------- */



/* --------------------------------------------------------------------------- NAV --------------- */
#nav {
	/*position: absolute;
	top: 130px;
	left: 0px;*/
	float: left;
	width: 250px;
	height: 100%;
	margin: 0px 0 0px 0; 
}

#nav #mainnav {
	width: 200px;
	padding: 40px 0 0 40px;
}
		#nav #mainnav li {
			margin: 0 0 5px 0;
			padding: 0 0 0 0;
			width: 180px;
			font-size: 14px;
			text-transform: uppercase;
			list-style-type: none;
		}
				#nav #mainnav li a {
					color: #f2f2f2;
				}
				#nav #mainnav li.nav_active a {
					font-weight: normal;
					color: #e5130b;
				}
						#nav #mainnav li.nav_active ul li a {
							font-weight: normal;
							color: #FFFFFF;
						}
						#nav #mainnav li.nav_active ul li.nav_active a {
							font-weight: normal;
							color: #e5130b;
						}
				#nav #mainnav li a:hover, #nav #mainnav li ul li a:hover {
					font-weight: bold;
					/*color: #e5130b;*/
				}

				#nav ul#mainnav li ul {
					display: none;
				}
				#nav ul#mainnav li.nav_active ul {
					display: block;
					color: #FFF;
				}
						#nav #mainnav li ul li {
							margin: 0 0 0px 0;
							padding: 2px 0 2px 20px;
							width: 145px;
							font-size: 14px;
							text-transform: none;
							list-style-type: none;
							background: url(../images/design/list.png) 0px 7px no-repeat;
						}

#slogan {
	display: block;
	width: 155px;
	height: 64px;
	margin: 40px 0 0px 47px;
}
/* --------------------------------------------------------------------------- NAV --------------- */



/* --------------------------------------------------------------------------- CONTENT ----------- */
/* ---------------------------------------- SUBPAGE HEAD IMAGES */
#subpage_header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 400px;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
	z-index: 1;
}
		#subpage_header img {
			position: absolute;
			bottom: -35%;
			left: 0;
			width: 100%;
		}
		#subpage_header img.top {
			top: -55%;
		}
/* ---------------------------------------- SUBPAGE HEAD IMAGES */

#content {
	margin: 0;
	padding: 300px 0 30px 0;
	float: right;
	width: 700px;
	text-align: left;
}
#content_none {
	display: none; 
}

		#ticker {
			width: 700px;
			border-bottom: 1px solid #171717;
			margin: 0 0 30px 0;
		}
				#ticker h1 {
					color: #e5130b;
					font-weight: bold;
					text-transform: uppercase;
					font-size: 24px;
					padding: 0 0 5px 0;
				}
		
		#content h2 {
			font-size: 14px;
			font-weight: bold;
			color: #e5130b;
			margin: 0 0 0px 0;
		}
		#content h3 {
			font-size: 14px;
			font-weight: bold;
			margin: 0 0 0px 0;
		}
		#content p, #content div {
			margin: 0 0 20px 0;
		}
		#content p strong, ul li strong, div strong {
			font-weight: bold;
		}
		#content ul {
			margin: 0 0 20px 0;
		}
				#content ul li {
					margin: 0 0 0 10px;
					padding: 0px 0 0px 15px;
					background: url(../images/design/list_ct.png) 0px 7px no-repeat;
				}
		#content a {
			text-decoration: underline;
		}
		#content a:hover {
			text-decoration: none;
			color: #e5130b;
		}
				
				#leistungen {
					margin: 0 0 20px 0;
				}
				#leistungen h3 {
					position: relative;
					width: 100%;
					margin: 5px 0 0 0;
				}
				#leistungen h3:hover {
					width: 100%;
					color: #e5130b;
				}
						#leistungen h3 span {
							position: absolute;
							right: 0;
							font-weight: normal;
							cursor: pointer;
						}
				#leistungen p {
					display: none;
				}
				#leistungen div {
					display: none;
					margin: 0 0 20px 0;
				}
		
		
		#content .null {
			margin: 0 0 0px 0;
		}
		
		#content .line {
			width: 700px;
			border-bottom: 1px dotted #171717;
		}
		
		#content table {
			margin: 0 0 20px 0;
		}
				#content table tr .stats_col1 {
					width: 50px;
					font-weight: bold;
				}
				#content table tr .stats_col2 {
					width: 150px;
					font-weight: bold;
				}
				#content table tr .stats_col3 {
					width: 50px;
					font-weight: bold;
				}
				
				#content table tr .contact_col1 {
					width: 100px;
					vertical-align: top;
				}
				#content table tr .imprint_col1 {
					width: 120px;
					vertical-align: top;
				}
				
				#content table tr .stories_col1 {
					width: 525px;
					padding: 2px 20px 2px 15px;
				}
				#content table tr .stories_col2 {
					width: 140px;
					vertical-align: top;
					text-align: right;
					padding: 2px 0px 2px 0px;
				}
						#content table tr .stories_col2 a {
							display: block;
							background: url(../images/design/list.png) 125px 5px no-repeat;
							text-decoration: none;
							padding: 0px 20px 0px 0px;
						}
				#content table.stories tr:hover,
				#content table.dates tr:hover {
					color: #e5130b;
				}
				#content table.dates tr.dates_head:hover {
					color: #171717;
				}
				
				#content table tr .clients_col1 {
					width: 180px;
					font-weight: bold;
				}
				#content table tr .clients_col2 {
					width: 100px;
					font-weight: bold;
				}

				#content table tr .dates_col1 {
					width: 150px;
					font-weight: bold;
				}
				#content table tr .dates_col2 {
					width: 200px;
					font-weight: bold;
				}
				#content table tr .dates_col3 {
					width: 200px;
					font-weight: bold;
				}

		
		#content ul table {
			margin: 0 0 0px 0;
		}
		
		#content .stories_div {
			margin: 0;
		}

img.right {
	float: right;
	margin: 0 0 20px 20px;
}

#content div.partner_profile {
	margin: 10px 0 10px 0;
}	
		#content div.partner_profile .partner_image {
			width: 302px;
			float: left;
			margin: 0 25px 0 0;
		}
		#content div.partner_profile .partner_image img {
			border: 1px solid #171717;
		}
		#content div.partner_profile .partner_info {
			width: 370px;
			float: left;
			margin: 0;
		}
		#content div.partner_profile .partner_info a {
			font-style: italic;
		}

		
/* ---------------------------------------- NEWS */
#content #news .news_entry .news_head, 
#content #news .news_entry .news_content, 
#content #news .news_entry .news_links {
	margin: 0;
}

#content #news .news_devider,
#content .devider {
	width: 700px;
	border-bottom: 1px dotted #171717;
}

#content #news .news_entry .news_head {
	margin: 0 0 10px 0;
}

/*#content #news .news_entry .news_content img {
	width: 250px;
	height: auto;
	float: right;
	margin: 0 0 20px 20px;
}*/

#content #news .news_entry .news_links a {
	padding: 0 0 0 15px;
	background: url(../images/design/list_ct.png) 0px 3px no-repeat;
}
/* ---------------------------------------- NEWS */



/* ---------------------------------------- CONTACT FORM */
#form1 {
	margin: 0px 0 30px 0;
	position: relative;
}

#form1 label {
	float: left;
	width: 130px;
	height: 26px;
	margin: 0 0 4px 0;
	font-weight: bold;
}

#form1 input.contact_form, #form1 input.form_error {
	float: left;
	width: 280px;
	height: 18px; /*+8*/
	margin: 0 200px 4px 0;
	padding: 4px 4px 4px 4px;
	color: #DDDDDD;
	border: 0;
	background-color: #171717;
}
		#form1 input.contact_form:hover, #form1 input.contact_form:active, #form1 input.contact_form:focus {
			border: 0;
		}

#form1 textarea.contact_form, #form1 textarea.form_error {
	float: left;
	width: 500px;
	height: 150px;
	padding: 4px 4px 4px 4px;
	color: #DDDDDD;
	border: 0;
	background-color: #171717;
	resize: none;
}
		#form1 textarea.contact_form:hover, #form1 textarea.contact_form:active, #form1 textarea.contact_form:focus {
			border: 0;
		}
	
.contact_error {
	position: absolute;
	right: 40px;
	width: 220px;
	height: 44px;
	padding: 10px 0 0 0;
	font-weight: bold;
	color: #FF0000;
}

#form1 input.form_error, #form1 textarea.form_error {
	background-color: #e5130b;
	color: #171717;
}

#form1 #buttons {
	padding: 20px 0 0 130px;
}

.contact_formbu {
	clear: both;
	margin: 4px 4px 0 0;
	padding: 3px;
	width: 100px;
	color: #e5130b;
	border: 0;
	background-color: #171717;
	font-weight: bold;
}
		.contact_formbu:hover, .contact_formbu:active, .contact_formbu:focus {
			color: none;
		}
#form1 span {
	font-weight: bold;
	color: #e5130b;
}
/* ---------------------------------------- CONTACT FORM */
#content div.fb-like-box {
	margin: 0 0 0 20px;
	float: right;
}

div.nlt2 {
	background-color: none;
}

/* ---------------------------------------- COOKIES */
#cookienote {z-index: 10000;}

#cookienote a {color:#e5130b; text-decoration:underline;font-weight:bold;}
#cookienote a:hover {text-decoration:none;}

#cookienote div {
	margin: auto;
	padding:25px 120px 25px 15px;
	width: 40%;
	position: relative;}

#cookienote { 
   text-align:left;
   color: #f2f2f2;
   background: #000; 
   background: -moz-linear-gradient(top, #000 0%, #171717 100%); 
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(100%,#171717)); 
   background: -webkit-linear-gradient(top, #000 0%,#171717 100%); 
   background: -o-linear-gradient(top, #000 0%,#171717 100%);
   background: -ms-linear-gradient(top, #000 0%,#171717 100%); 
   background: linear-gradient(to bottom, #000 0%,#171717 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient(   startColorstr='#000', endColorstr='#171717',GradientType=0 ); 
   opacity: 0.96; 
   position:fixed;
   bottom:0px; 
   z-index:10000; 
   width:100%; 
   font-size:14px; 
   line-height:18px;}

#cookienoteCloser {
   color: #000;
   background-color: #e5130b;
   font: 14px/100% arial, sans-serif;
   font-weight: bold;
   position: absolute;
   top: 35px;
   right: 15px;
   text-decoration: none;
   cursor:pointer;
   padding:10px;
   opacity: 1.0; 
 }

#cookienoteCloser:hover {border-bottom:1px solid #000; border-right:1px solid #000; border-top:1px solid #7b92a9; border-left:1px solid #7b92a9;}
/* ---------------------------------------- COOKIES */



/* --------------------------------------------------------------------------- ------ ----- ----------- */
/* --------------------------------------------------------------------------- MOBILE BOLOW ----------- */
/* --------------------------------------------------------------------------- ------ ----- ----------- */


@media all and (max-width: 1030px) { /* kleiner Desktop und Tablet Landscape */
/*html {
	background-image: none;
	background-color: blue;
}*/

#wrapper { width: 95%; margin: 0 auto; background: none; }
#page { width: 100%; margin: 0 auto; }

#foot { position: absolute; bottom: 25px; width: 100%; background: rgba(0, 0, 0, 0.9); margin: 0; padding: 10px 0;}
.break { display: none; }
.bull { display: inline; }

#logo { width: 220px; height: 90px; margin: 5px 0 5px 0px; padding: 0; background: rgba(0, 0, 0, 0.9); }
	#logo #k-konzept { width: 180px; height: auto; margin: 20px 0 0 17px; }
	#logo #krekels { width: 180px; height: auto; margin: 15px 0 0 17px; }
	#logo a { width: 220px; height: 90px; margin: 5px 0 5px 0px; }	

	#mobilenav {display: block; background: url(../images/design/mobile-menu.png) 0 0 no-repeat; background-size: contain; width: 80px; height: 25px; margin: 20px auto 20px auto; }
		
#nav { background: rgba(0, 0, 0, 0.9); width: 220px; height: auto; margin: 0 0 0 0px; position: absolute; z-index: 1000; }
	#nav #mainnav { width: 190px; margin: 50px 0 0 0; padding: 20px 0 0 20px; display: none; }
	#nav:hover #mainnav { display: block; }
	#nav:hover #mobilenav { display: none; }
	#nav:hover #slogan { display: block; }

#slogan { display: none; width: 145px; height: auto; margin: 30px 0 30px 30px; }
	#slogan img { width: 145px; height: auto;}
	
#subpage_header { height: 300px; }
	#subpage_header img { bottom: -20%; }
	#subpage_header img.top { top: -35%; }
	
#content { margin: 0; padding: 250px 0 80px 0; float: left; width: 100%; }
	#ticker { width: 100%; margin: 0 0 30px 0; }
		#ticker h1 {line-height: 130%;}
	#content .line { width: 100%; }
#content_none {	display: block; height: 550px;}

#content #news .news_devider, #content .devider { width: 100%; }

#nav #mainnav li { margin: 0 0 5px 0; padding: 0 0 0 0; width: 160px; }
	#nav #mainnav li a { display: inline-block; width: 100%; height: 25px; }

#form1 input.contact_form, #form1 input.form_error { width: 97%; margin: 0 0px 4px 0; }
#form1 textarea.contact_form, #form1 textarea.form_error { width: 97%; }
#form1 #buttons { padding: 20px 0 0 0px; }
.contact_error { position: relative; top: 0px; left: 0px; width: 97%; padding: 10px 0 15px 0; }
#content div.fb-like-box {
	float: none;
	margin: 0 auto 15px auto;
}


	
		
}/*close media*/			


@media all and (max-width: 679px) { /* Smartphone Portrait */ 
/*html {
	background-image: none;
	background-color: red;
}*/

#logo { width: 190px; height: 80px; }
	#logo #k-konzept { width: 150px; height: auto; margin: 20px 0 0 17px; }
	#logo #krekels { width: 150px; height: auto; margin: 10px 0 0 17px; }
	#logo a { width: 190px; height: 70px; margin: 5px 0 5px 0px; }	

	#mobilenav { width: 80px; height: 25px; margin: 20px auto 20px auto; }
		
#nav { width: 190px; height: auto; margin: 0 0 0 0px; }
	#nav #mainnav { width: 170px; padding: 20px 0 0 15px; }

#slogan { width: 125px; height: auto; margin: 30px 0 30px 30px; }
	#slogan img { width: 125px; height: auto;}

#subpage_header { height: 200px; }
	#subpage_header img { bottom: -10%; }
	#subpage_header img.top { top: -20%; }

#content { margin: 0; padding: 150px 0 80px 0;}

#leistungen h3 span { float: right; width: 100px; text-align: right;}
br.mbr { display: inline; }

img.right { float: none; display: block; margin: 0 auto 10px auto; }


#cookienote div { padding:25px 15px 25px 15px; width: 90%; position: relative; }
#cookienote div span { display: block; }
	#cookienoteCloser { text-align: center;width: 100px; position: static; top: 0; right: 0; margin: 25px auto 0 auto; }



} /*close media*/
	
	
@media all and (max-width: 500px) { /* small */ 


} /*close media*/


@media all and (max-width: 320px) { /* Smartphone Portrait */ 
#subpage_header { height: 175px; }
#content { margin: 0; padding: 110px 0 80px 0;}

} /*close media*/


@media all and (max-width: 668px) and (orientation: landscape) { /*iphone 6 landscape*/
}/*close media*/


@media all and (max-width: 569px) and (orientation: landscape) { /*iphone 5 landscape*/
}/*close media*/


@media only screen and (min-device-width: 480px) 
                   and (max-device-width: 640px) 
                   and (orientation: landscape) {

/*#nav { width: 90%; height: auto; margin: 0 0 0 0px; }
	#nav #mainnav { width: 100%; padding: 20px 0 0 15px; }
	#nav #mainnav li { float: left;  }*/

				   
}/*close media*/