@charset 'utf-8';
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body, html { 
	font-size: 15px; 
	padding: 0; 
	margin: 0;	
	min-height: 100%;
	max-height: 100%;
	height: 100%;
}
body {
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;  /* Basis Schriftart */
	color: #333333;  /* Basis Schriftfarbe */	
	background: #FFFFFF;  /* Basis Hintergrundfarbe  */	
}

/*FONT BASE DEFINITION */
.fa-phone, .fa-envelope-o, .fa-info, .fa-flask { 
	font-family: 'FontAwesome';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	vertical-align:middle;
	line-height: 1;
	font-size:26px;
	color:#888888;
	-webkit-font-smoothing: antialiased;
}
.fa-phone:before { content: "\f095";}
.fa-envelope-o:before { content: "\f003";}
.fa-info:before { content: "\f129";	color:#05AEEF ;	}
.fa-flask:before { content: "\f0c3"; color:#99ee22;	font-size:190px;}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
	opacity:0;  
	-webkit-animation:fadeIn linear 1;
	-moz-animation:fadeIn linear 1;
	animation:fadeIn linear 1;

	-webkit-animation-fill-mode:forwards;  
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:2s;
	-moz-animation-duration:2s;
	animation-duration:2s;
	
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	animation-delay: 0.5s;
}

.header{ 
	width:100%;
	display:block;
	padding-bottom: 150px;
	/*background-color:#CCFFFF;*/
}

.logo {
	width:260px;
	padding:5px;
	float:left;
	/*background-color:#33FFFF;*/
}
.logoImage {
	width:100%;
	height:auto;
}
.subLine {	
	font-style:italic;
	font-size:11px;
	position:absolute;	
}

.navbox{ 
	float:right;
	/*background-color:#FFFF66; */
}

.nav {
	margin:0 15px 0 0;
	padding:0;
	list-style:none;
	float:right;	
}

.nav li {
	position:relative; 
	float:left; 
	font-style:italic;  
	margin-left:2px; 
	border-radius:0 0 5px 5px; 
	background-color: #999999;
	color: #ffffff;
}
.nav li a {
	display:block; 
	padding:80px 12px 16px; 
	position:relative;
	text-decoration:none;
	color: #ffffff;
}
.nav li:hover,.nav li a:hover{
	background-color: #dddddd;	
}
.nav li a:hover {
	color: #555555;	
}
.nav li.current,.nav li.current a {
	background-color: #ffffff ;
	color: #555555;
}

span a#pull {
	display: none;
	color:#dddddd;
	text-decoration:none;
	padding:0 0 0 16px;	
}

.content, .contentLight { /*alles unter Navigation*/
	clear:inherit;
	width:98%;
	display: block;
	text-align: center;	 
	vertical-align:top;
	max-width:1000px;
	margin-left: auto;  /*zentrieren*/
  	margin-right: auto; /*zentrieren*/
}
.contentLight { /*alles unter Navigation*/
	background-color:#FFFFFF;	
}

.box {
	display:inline-block;
	position:relative;	
	text-align: left;
	overflow:hidden;
    vertical-align:top;
	padding: 5px; 	 
}
.box33 {
	width: 32%;	 	 
}
.box50 {
	width: 48%;
	 
}
.box100 {
	width: 100%;
	margin: 0 0.2em 0 0.2em; 
	padding:5px;	 
}
.maxbox {	
	width:96%;
	max-width:600px;
}
.row {
	width:100%;
	display:block;
	clear: both;
	padding:1px;
}
.break {
	width:100%;
	display:block;
	clear: both;		
}
.borderbox {
	border:1px solid #dddddd;
	border-style:solid;
	border-width:thin;
	padding:15px;
	background-color: #F9F9F9;
}
.videobox {	
	width:100%;
	height:360px;
	max-width:640px;
}

a {
	color: #000000;
	text-decoration:none;
}

.normfont {
	font-size:13px;	
	line-height:20px;
	color:#444444;
	font-weight:normal;	
}
h1 {
	width:100%;
	display:block;
	font-size:18px;	
	color:#444444;
	font-weight:normal;	
}
h2 {
	width:100%;
	display:block;
	font-size:14px;	
	color:#666666;
	font-style:italic;
	font-weight:normal;
}
h3 {
	width:100%;
	display:block;
	font-size:13px;	
	line-height:18px;
	color:#666666;
	font-weight:normal;
}
h4 {
	width:100%;
	display:block;
	font-size:16px;	
	line-height:20px;
	color:#666666;
	font-weight:normal;
	padding-left: 5px;
}

ul.colorDots {
	list-style-type: square;
	color:#05AEEF;
	text-align:left;
}

ul.colorDots span{
	color:#444444;
}

ul.noDots {
	list-style-type: none;
}


.center {
	text-align:center;
}
.left {
	text-align:left;
}
.distance {
	margin-top:14px;
}
.image, .bigImage {
	width:100%;
	height:auto;
	max-width:450px;
	border:0;
}
.bigImage {
	max-width:1000px;
}

.footer {
	font-size: 11px;	
	color:#999999;
	margin-bottom:25px;
}
.ref{
	font-size: 11px;
	text-align: right;
	margin-bottom: -11px;
}
.GooglemapBig {
	display:block;
}

.GooglemapSmall {
	width:99%;
	display:none;
}

.fa-pull-left {
  float: left;
  margin-right: .3em;
  margin-bottom: 1em;
}
.schatten {
	box-shadow: 1px 8px 16px 0px rgba(0,0,0,0.4);
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 320px;
  perspective: 1000px;
  text-align:center;
  margin-top: 50px;
  margin-bottom: 50px;
  overflow:visible;
  position:relative;
  left: 20px;
}


/*Tablet*/
@media screen and (max-width: 870px) {
  	.nav li {  		
  		float: none;
  	}
	.nav li a {		 
		padding:5px 100px 10px 15px; 
		width:100%;		
	}
	.nav li, .nav li a, .nav li:hover,.nav li a:hover, .nav li.current,.nav li.current a{
		border-radius:0;
	}
	.nav{  		
		margin:0px;
  	}
	.subLine {
		top:135px;
	}
	.content {
		background-color: #FFFFFF;
	}		
	.box {	
		padding: 10px 0 0 0;				
	}
	.box33, .box50 {
		width: 100%;		
	}
	.image, .bigImage {
		width:100%;
		margin: 5px;					
	}
	.contentLight {
		padding:0px;
	}
	h1, h2, h3, .normfont {
		text-align:left;
		
	}
	body, html {
		font-size: 90%;		
	}	
	.flip-card {
		margin-top: 20px;
		margin-bottom: 20px;
	}
}

/*Smartphone*/
@media only screen and (max-width : 490px) {
	.logo {
		width:210px;
		float:none;
		margin: 10px;
	}
	.subLine {
		/*display:none;*/
		font-size: 11px;
		color:#FFFFFF;	
		top:120px;
		z-index:100;
	}	
	.nav{
		width: 100%;
		margin:0;
	}
	.nav li{
		margin:0;
		font-size: 16px;
		padding-top: 5px;
	}
	.navbox{
		float: none;
			
	}	
	.navbox ul {
		display: none;
		height: auto;
		padding:0;
		padding-bottom: 20px;		
	}	
	span a#pull {
		display: block;
		background-color: #006699;
		width: 100%;
		position: relative;		
		height: 40px;
		font-size: 10px;		
	}
	span a#pull:after {
		content:"";
		background-color: #006699;
		background: #006699;
		background: url('nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
	.header { /*alles unter Navigation*/
		padding-bottom: 0px;
	}	
	.fa-pull-right, .fa-pull-left {	 
	  margin-bottom: 0.9em;
	}
	.GooglemapBig {
		display:none;
	}
	.GooglemapSmall {
		display:block;
	}
	body, html {
		font-size: 12px;
	}
	.flip-card {
	  position:relative;
	  left: 40px;
	}
	.fa-flask:before { 
		font-size:120px;
	}

	.flip-card-back {
		font-size: 0.97em;
	}

}



/* Mini Smartphone*/
@media only screen and (max-width : 300px) { 
.subLine {
		display:none;
	}	
}