﻿/* iefix.css */
/* IE 6 */
* html {
   width : 27em;
}
/* IE 7 */
* + html {
   width : 29em;
}

img {
	border: 0px white none;
}
/* iefix.css Ende */
body {
	background: 	url(pictures/background.jpg)!important;
	font: 			14px/1.5 sans-serif;
	color: 			#6B6A6A;
}

.bodyWrapper {
	padding-top: 		21px;
	padding-bottom: 	30px;
	margin: 				30px  auto 0px auto;

	background-color:	#FFF;
	border-radius: 		20px;
}

/*container start*/
.container_24 {
    margin-left: 		15px;
    margin-right: 	15px;
	clear: 				both;
}

/*Responsive start*/
@media (max-width: 480px) {
    .container_24 {
        width: 250px;
    }
	.bodyWrapper {
		width: 280px;
	}
}

@media (min-width: 480px) and (max-width: 767px) {
    .container_24 {
        width: 410px;
    }
	.bodyWrapper {
		width: 440px;
	}
	.logoSAP {
		margin-right: 5%!important;;
	}
}

@media (min-width: 768px) {
	.container_24 {
		width: 670px;
	}
	.bodyWrapper {
		width: 	700px;
	}
}
/*Responsive ende*/
/*container ende*/



/* Allgemeines start*/
p, h1, h2, h5, h6, ol, ul {
	margin-bottom: 15px;
	font-weight: 	normal;
}

a{
	color: 				#006BB4;
	text-decoration: none;
}

h1{
	font-size: 		22px;
	text-align: 		center;
	color: 				#6B6A6A;
}

h2 {
	margin-bottom: 20px;
	font-size: 		22px;
	color: 				#006BB4;
}

.last{
	float: 				right!important;
}

/* Allgemeines ende*/

/* Schatten start*/
@media (min-width: 361px){ 
	.wrapperShadow
	{
		position:relative;       
		-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
		   -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
				box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	}

	.wrapperShadow:before, .wrapperShadow:after
	{
		content:"";
		position:absolute; 
		z-index:-1;
		-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
		-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
		box-shadow:0 0 20px rgba(0,0,0,0.8);
		top:10px;
		bottom:10px;
		left:0;
		right:0;
		-moz-border-radius:100px / 10px;
		border-radius:100px / 10px;
	} 
	.wrapperShadow:after
	{
		right:10px; 
		left:auto;
		-webkit-transform:skew(8deg) rotate(3deg); 
		   -moz-transform:skew(8deg) rotate(3deg);     
			-ms-transform:skew(8deg) rotate(3deg);     
			 -o-transform:skew(8deg) rotate(3deg); 
				transform:skew(8deg) rotate(3deg);
	}  
}
/* Schatten ende*/

/*LogoArea start*/
.logoArea {
	margin: 0px auto 15px auto;
}

.tele {
    padding-top: 	35px;
    font-size: 		10px;
    color: 				#9E9E9E;
}

.tele b {
    font-size: 13px;
}

.tele a{
    text-decoration: none;
}

.tele p{
	margin: 0;	
}

.img{
	vertical-align: middle;
}

.logo img{
	height: 55px;	
	margin-top: -12px;
}

.header .logo img {
	max-width: 	340px;
}

.logoSAP {
	float: 			left;
}

.logoCIB {
	float: 			right;
	text-align: center;
}

.skyline {
	float: 			left;
	margin: -30px auto 20px;

}

.skyline .left {
	float: 			left;
	margin-left: 	12px;
	margin-right: 	12px;
	width: 53%;
}

.skyline .left img{
	margin-top: 5px;
	width: 100%;
}

.skyline .right
{
	padding-top: 21px;	
}

@media (max-width: 500px) {
	.skyline {
		display:none;
	}
}

@media (min-width:768px) and (max-width: 800px) {
	.skyline{
        width:55%!important;
    }
}
	
@media (max-width: 800px) {
    .skyline .left{
        display:none;
    }
    .skyline .right{
        margin: 0 auto;
        text-align: center;
    }
    .skyline{
        /*width:55%!important;
		margin-right:3%;*/
    }/*
    .logo{
		/*width:122px;
		margin: 0 30px;
    }*/
	.logoArea{
       margin-top: 5px;
    }
	.logoSAP {
		margin-right: 8%;
	}
} 


@media (min-width: 801px)  {
	.skyline{
		width:72%!important;
		margin-bottom: 0px!important;
	}
}
/* Ende LogoArea /Leiste*/

/* MainPic start*/
.mainPic{
	margin:			0 auto;
/*	width: 950px;
	height: 350px;*/
	position: relative;
	text-align: center;
}

.mainPicPag {
	background: url(pictures/slider-pag.png) center no-repeat;
	height: 37px;
	margin-top: -23px;
	z-index: 999;
	position: relative;
}

.mainPicText{
	z-index: 999;
	background: rgba(50,50,50,0.6);
	color:		#FFF;
	text-align: left;
	/*font: 16px/1.5 sans-serif;*/
	margin-top: 3px;
	line-height: normal;
	margin: 0px;
	text-align: justify;
}

.mainPicText .from{
	margin-left: 20px;
}

@media (max-width: 480px) {
	.mainPicText{
		width: 92%;
		padding: 10px 4%;
		display: block;
		font-size: 14px;
		margin-top: -5px;
	}
	.mainPicText .from{
		display: none;
	}
	.mainPic img{
		width: 100%;
		height: 100%;
	}
	.mainPicPag{
		display: none!important;
	}
}

@media (min-width: 480px) and (max-width: 767px) {
	.mainPic img{
		width: 100%!important;
		height: 80%!important;
	}
	.mainPicPag{
		display: none!important;
	}	
	.mainPicText{
		bottom: 5px;
	}
}

@media (min-width: 481px) and ( max-width: 800px) {
	.mainPicText{
		font-size: 17px;
		height: 100px;
	}
	.mainPicText .from{
		font: 13px/1.5 sans-serif;
	}
}

@media (min-width: 481px) {
	.mainPicText{
		padding: 10px 12px;
		right: 0;
		position: absolute;
	}
}

@media (min-width: 801px) {
	.mainPicText{
		font-size: 22px;
		height: 100px;
	}
	.mainPicText .from{
		font: 14px/1.5 sans-serif;
	}
}

@media (min-width: 979px) {
	.mainPicText{
		bottom: 19px;
	}
}

@media (min-width: 768px) and (max-width: 978px) {
	.mainPicText{
		bottom: 19px;
	}
	.mainPic img{
		width: 100%!important;
	}
}

/* MainPic ende*/

/* Content start*/
.content{
	margin-bottom: 40px;
}

.content p{
	text-align: justify;
	margin-top: 0px;
	margin-bottom: 5px;
	clear: both;
}

.content h2{
	text-align: left;
	margin-bottom: 0;
	margin-top: 0px;
}
	
.mehr{
	font-size: 14px;
	color: #006BB4;
}

.text{
	font-size:14px;
}

.quote {
	font-size: 16px;
	clear: both;
	margin-top: 50px !important;
	margin-bottom: 15px !important;
}

.qouter{
	font-size: 14px;
	text-align: left!important;
}

.firstContentWrapper{
	margin-top: 20px;
}

.home_text p{
	text-align: justify;
	line-height: 150%;
	font-size: 14px;
	padding-bottom: 5px;
}

@media (max-width: 767px) {
	.contentImgHolder{
		width: 70%;
		margin: 0px auto;
	}
	.mehr{
		float: right;
	}
}

@media (min-width: 768px)  {
	.content{
		width: 48%;
		float: left;
		text-align: justify;
		margin-bottom: 30px;
		text-align: center;
	}
	
	.content .contentImgHolder{
		width: 322px; 
		background-size: 100% ;
	}

	.contentImgHolder{
		height: 220px;
		display: table-cell;
		vertical-align: middle;
		padding-top: 10px;
	}	
	
	.mehr{
		float: right;
	}
	
	.text{
		height: 225px;
	}
	
	#net-components{
		background:  url(pictures/net-components-gmbh.jpg)no-repeat;
	}
	
	#koeppen{
		background:  url(pictures/drahtspleisserei-koeppen-gbr.jpg)no-repeat;
	}
	
}

/* Content ende*/



/* Footer start*/
.footerGlow {
	background: url(pictures/footerLine.png) repeat-x;
	height: 2px;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 40px;
}

.copyright {
	margin-right: 15px;
	margin-bottom: 0px;
}

.copyright a{
	color: #FFF;
	text-decoration: none;
}

#firstPipe{
	margin-left:3px;
}

@media (max-width: 480px) {
	.copyright{
		margin-left: 10px!important;
		display: block;
	}
	.copyright a{
		margin-left:2px;
	}
	#firstPipe {
		display: inline;
	}
	#cpyR{
		display: inline;
	}
	.linkHolder {
		display: inline;
	}
	.footerGlow {
		position: relative!important;
		bottom: -30px;
		margin-top: -70px;
	}
	.footer {
		background: url(pictures/footerBg.png);
		color: #FFF;
		clear:left;
		bottom: -30px;
		position: relative;
		height: 90px;
		width: 100%;
		left: 0;
		border-bottom-left-radius: 19px;
		border-bottom-right-radius: 19px;
	}
}

@media (min-width: 481px) {
	.footer {
		background: url(pictures/footerBg.png);
		color: #FFF;
		clear:left;
		bottom: 0px;
		position: absolute;
		height: 40px;
		width: 100%;
		left: 0;
		border-bottom-left-radius: 19px;
		border-bottom-right-radius: 19px;
	}
	.copyright {
		float: right;
		padding: 5px 0 5px 0;
		margin-top: 6px;
	}
	.linkHolder{
		float: right;
	}
}

/*Footer passt nicht mehr auf eine Zeile*/
@media (min-width: 485px) and (max-width: 800px) {
	.copyright{
		margin-left: 10px!important;
		display: block;
	}
	.copyright a{
		margin-left:2px;
	}

	#cpyR{
		display:block;
	}
	.footer{
		height: 60px!important;
	}
	.footerGlow {
		bottom: 60px!important;
	}
	#firstPipe{
		display: none;
	}
}

/* Footer ende*/

/*Trennlinie start*/
hr {
	border: 0 #ccc dotted;
	border-top-width: 1px;
	clear: both;
	height: 0;
	display: block;
	-webkit-margin-before: 0.5em;
	-webkit-margin-after: 0.5em;
	-webkit-margin-start: auto;
	-webkit-margin-end: auto;
	padding-bottom: 10px;
}

#lastHr{
	margin-bottom: 40px;
	margin-top: 20px;
}
/*Trennlinie ende*/

/*Button start*/
.button{
	margin-bottom: 20px;
	 text-align:left;
	 border:1px solid #cacaca; 
	 -webkit-border-radius: 3px; 
	 -moz-border-radius: 3px;
	 border-radius: 3px;
	 font-size:12px;
	 font-family: sans-serif; 
	 padding: 7px 10px 7px 10px; 
	 text-decoration:none; 
	 font-weight: bold; 
	 color: #FFF;
	 background-color: #a5b8da; 
	text-align: center;
	font-size: 14px;
	margin-bottom: 20px;
	background-image: linear-gradient(to bottom, #a5b8da, #7089b3);
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
}

.button:hover{
	 border:1px solid #5d7fbc;
	 background-color: #819bcb; background-image: linear-gradient(to bottom, #819bcb, #536f9d);
}

@media (min-width: 481px) {
	.button{
		width: 45%;
		float:right;
	}
}

@media (max-width: 480px) {
	.button{
		width: 70%;
		
	}
}
/*Button ende*/

/**************************************************
++++++++++Responsive+++++++++++++
**************************************************/
