@import url("https://fonts.googleapis.com/css?family=Droid+Serif:400,400i,700,700i|Roboto+Condensed:300,400,700" );
@import url("http://fonts.googleapis.com/css?family=Oswald:400,300,700");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");

  /* RESET ##############################################  */
*, html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin:0;
    padding:0;
    border:0;
    outline:0;
  /*  font-size:100%;  */
    vertical-align:baseline;	
	-moz-box-sizing:border-box; 
  	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	-webkit-text-size-adjust:100%;
}

  /* CONTENT ##############################################  */	
body{
	margin:0;
	font-family:'Droid Serif';
	font-size:100%;
	font-weight:400;
	background-image: url(../img/bgnoise_lg##.png);
	}
	
.wrapper { /* Content Wrapper */
	height:auto;
	margin:20px 10%;
	max-width:1600px;
	overflow:hidden;  
 /*	background-color:rgba(255,255,255,0.01);	 korrigiert einen Fehler im Menü bei mouse over */
	}

p, li {
	text-align:justify;
	font-size:1.1em;
	font-weight:400;
	line-height:1.5em;
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
		}
.team p {
	text-align:left;
}
		
p strong {
	font-family: 'Droid Serif', serif;
	font-size:1.1em;
	font-weight:700;
	text-align:left; !important
}
p span {
	font-family: 'Roboto Condensed', sans-serif;
	font-size:1.7em;
	font-weight:300;
	letter-spacing:0;
}
p i {
	vertical-align:0; 
	color:#688400; 
	margin-right:10px
}
	
h1 {
	color:#000;
	font-family:'Roboto Condensed', serif;
	font-size:2.7em;
	font-weight:300;
	margin:0 30px 30px 30px;
	border-bottom:#B0AEAE dashed 1px;
	text-transform: uppercase
	
	}
h2 {
	color:#000;
	font-family:'Roboto Condensed', serif;	
	font-size:2em;
	font-weight:300;
	padding:0 0 10px 0;
	margin:0 0 50px 0;
	border-bottom:#B0AEAE dashed 1px
	}
	
h3{
	font-size:0.84em;
	font-weight:normal;
	}

ul {margin:0 0 0 16px;
}

sup { vertical-align:super} 

.center {text-align:center}
	hr {
	border: 0px; 
	border-bottom:#B0AEAE dashed 1px;
	margin:20px 0;
	width:100%;
	}

header {
		width:100%;
		height:180px;
		padding:0;
		text-align: right;
		background-image: url(../img/headerSmal.jpg);
		background-repeat:no-repeat;
		background-position:left;
		background-size:cover;
}
header .background-image { /* Header mit zentriertem Hintergrundbild */
		width:100%;
		height:500px;
		padding:0;
		text-align:center;
		background-image: url(../img/header.jpg);
		background-repeat:no-repeat;
		background-position:center;
		background-size:cover;
		z-index:1;
	}
	
.flagge { padding:10px}
blockquote {
	padding:300px 0 0 0; 
	position: relative;
	margin:0 auto; 
	color:#FFF;
	font-family:'Roboto Condensed', serif;	
	font-size:1.6em;
	font-weight:400;
	text-align: center;
	max-width:800px;
		
	}

cite {
	font-family:'Roboto Condensed', serif;
	font-size:1.5em;
	font-weight:300;
	text-align:center;
	margin:40px auto;
	padding:0 14%;
	width:100%;
	min-height:80px;
	color:#22849D;
	font-style:normal;
	position:relative;
	display:block;
}
cite span {
	font-size:0.6em; 
	display:block;
	letter-spacing:2px
	}
	
.col {  /* 3 Spalten */
		width:33%; 
		float:left;  
		padding:40px;
	}
	
 @media screen and (max-width:1000px) { 	
		footer .col, .main .col { width:100%; float: none; margin:10px 0 0 0;}
 }
	
.combined-col {
	padding:40px;
		-moz-column-count: 2;
		-moz-column-gap: 60px;
		-webkit-column-count: 2;
		-webkit-column-gap: 60px;
		column-count: 2;
		column-gap: 60px;
}

.content-wrapper {
	width:100%;
	margin:60px 0
}
.content-wrapper a { color:#000000}
.content-wrapper a:hover {color:rgba(220,64,4,1.00)}
section {  
		width:50%;
		float:left;
		padding:60px 30px;
		
	}	

article { /* breite Spalte links */
		width:60%;
		float:left;
		padding:40px 70px 40px 30px;
	}
aside {  /* schmale Spalte recht */
		width:40%;
		float:left;
		padding:30px;
	}

	/* "WEITERLESEN" Button ##############################
button {
	font-family: 'Roboto Condensed', serif;
	font-size:1em;
	padding: 4px 16px;
	position: relative;
	letter-spacing: 1px;
	border: solid 1px #fff;
	background-color:#50849C;
	color: #fff;
	text-align: center;
	transition-property: all;
	transition-duration: .75s;
	cursor: pointer;
}
button:hover {
	background-color:#106C83;
}*/
.weiterlesen a {
	font-family:'Roboto Condensed', sans serif;
	font-size:1.1em;
	padding:1px 12px;
	margin:10px 0 0 0;
	color:#FFFFFF;
	letter-spacing: 1px;
	text-decoration:none;
	background-color:#75BFCC;
	transition-property: all;
	transition-duration: .75s;
	cursor: pointer;
	display:block;
}
.weiterlesen a:hover {
	background-color:#0F5A6D;
	color:#FFFFFF;
}

/* Table ##############################*/
.demi table  {
	width:100%;

	background-color:rgba(255,255,255,0.3);
	background-image: url(../img/DEMI-Kreis.png);
	background-repeat:no-repeat;
	background-position:center;
}
.demi table  td {
	width:50%;
	height:auto;
	padding:50px;
	font-size:0.85em;
	line-height:16px;
	vertical-align:top;
}

 
/*  referenzen Tabelle ######################################  */
 
.referenzen {
	  padding:20px 30px;
}

.referenzen table {
	margin-top:40px;	
	width:100%;
	max-width:800px;
  	border-collapse: collapse;

	}

.referenzen table tr:nth-of-type(odd) { /* Zebra striping 
  background: #f1f1f1;*/
}

.referenzen table td {
  padding:6px 10px; 
  vertical-align:center;
}
.referenzen td, .referenzen li {text-align:left;
	font-family:'Roboto Condensed', sans serif;
	font-size:1.1em; !Important}
	
.referenzen thead {background: #f1f1f1;}

/* erstattungstabelle ######################################  */
.erstattungstabelle table {
	font-size:0.85em;
}

.erstattungstabelle table td {
	vertical-align:middle;
}

.erstattungstabelle table input {
	width:100%;
	height:20px;
	vertical-align:middle;
	color:#000;
	
}
.erstattungstabelle table button {
	background-color:#C30;
	padding:5px;
	margin:20px 0 0 0;
	font-size:1.25em;
	color:#FFF;
	cursor:pointer;
}
.erstattungstabelle table button:hover {
	background-color:#900
}

/* Zebra striping ##############################  
.erstattungstabelle table tr:nth-of-type(odd) { 
  background: #f1f1f1; 
}*/

/* Footer ###################################### */
footer {
	width:100%;
	padding:30px;
	margin:100px 0 0 0;
	overflow:hidden;	
	text-align:center;
	background-color:#0F5A6D;
	color:#fff;
}
	
footer .col {
	width:33%; 
	float:left; 
	padding:20px;
}
		
footer p, footer a {
	font-family: 'Roboto Sans', sans-serif;
	font-size:1em;
	line-height:2em;
	color: #FFFFFF;
	text-decoration: none;
}
footer a:hover {
	text-decoration: underline;
}
footer h2 {
	color:#FFFFFF
	}
address{
	font-style: normal;
	padding:0;
	margin:0;
}

footer .mst {/* Link www.mariostoeckinger.com */
	font-size:0.8em;
	letter-spacing: 5px;
}	
	
.clear {clear: both;}



/* eMail formular ################################################ 
*/	
form input, textarea {
	font-family:Arial, Helvetica, sans-serif;
	background-color:#fff;
	border:solid 1px #ccc;
	border-radius: 0px;  
    font-size:1em;
/*    padding: 10px;  */
	display:block;
	margin: 5px 0 0 0;
	padding:5px;
	width:400px;
}           
form input.blur {
    color:#CCC;
}
form .button {
	display: inline;
	background-color:#F00;
	margin-left:0;
	color:#fff;
	font-size:1em;
	padding:12px ;
	float:left;
	width:130px;
	transition-property: all;
	transition-duration: .75s;	
	}
form .button:hover { background-color:#069}	

mark {	
	display:block;
	margin:15px 0;
	background-color:#F90;
	padding:10px;
}
.error, .okText {
	font-size:1em;
	font-weight: bold;
	color: #F30;
}
.antwort {
	font-size:1em;
	color: #F00;
	font-weight: bold;
}


	
 @media screen and (max-width:1000px) { 	 
	 body{margin:0;}
	 
	 cite {
	font-size:1.3em;
	width:100%;
	display:block;
	 }

	article{
		width:100%;
		float:left;
		padding:30px;
	}
	aside{
		width:100%;
		float:left;
		padding:30px;
	}	 

	section {width:100%; margin:10px 0 0 0;}
	
	.combined-col {
		padding:40px;
		-moz-column-count: 1;
		-moz-column-gap: 0px;
		-webkit-column-count: 1;
		-webkit-column-gap: 0;
		column-count: 1;
		column-gap: 0;
	}
	footer .col  { width:100%; float: none; margin:10px 0 0 0;}
	
 }
 
  @media screen and (max-width:600px) { 
body {
	margin:0;	
font-family:'Open Sans';
	font-size:0.8em;
}
 
 cite { display:none } 
 
 .pfeil {
	margin:0 10px 15px 0;
	display:block;
} 
  
  }


/*  Backtop jQuery Plugin ########################### */
#backTop{
    width:35px;
    height:35px;
    padding:10px;
    border-radius:4px;
    text-indent:-9999px;
    cursor:pointer;
    z-index:999999999;
	display:none;
	box-sizing:content-box;
	-webkit-box-sizing:content-box;
}
#backTop.white{
     background:url(../img/uparr-48-b.png) no-repeat center center rgba(255,255,255,0.8);
    border:1px solid #ccc;
}
#backTop.black{
     background:url(../img/uparr-48-b.png) no-repeat center center rgba(0,0,0,0.8); 
    border:1px solid #ccc;
}
#backTop.red{
     background:url(../img/uparr-48-w.png) no-repeat center center rgba(217,97,81,0.9); 
    border:1px solid #fff;
}
#backTop.green{
     background: url(../img/uparr-48-b.png) no-repeat center center rgba(81,217,187,0.9); 
    border:1px solid #fff;
}