@charset "utf-8";
/* CSS Document */

/*main colors

blue: #25408f

*/
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,700);
@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700);

body{
	margin:0;
	margin-top:0px;
	padding: 0px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
}

img{
	border: none;
}


h1, h2, h3, h4, h5, h6, .lead {
	margin: 0;
	font-weight: 300;
	font-family: Droid Sans, Arial, Helvetica, sans-serif;
	color: #666;
}


#headline{
	width:1000px;
	margin:auto;
	padding: 5px 0 1px 0;
}

#headline-outer{
	width:100%;
	margin:auto;
	background-color:#666;
	margin-top: -14px;
	height: 40px;
}

#headline p{
	width:1000px;
	text-align: right;
}

#headline a{
	color:#fff;
	font-size:12px;
	text-decoration:none;
	margin-left: 10px;
	text-align:right;
}
#headline a:hover{
	color:#ccc;
}

span.design01 { 
	color:#fff;
	font-size:12px;
	text-decoration:none;
	margin-left: 10px;
	text-align:right;}
	
span:hover.design01, span:active.design01{ 
	color:#CCC; 
	cursor:  pointer;
}

#logo-top{
	width:1000px;
	margin:auto;
	margin-bottom:60px;
	margin-top:20px;
}

#top-teaser-over{
	width:100%;
	background-color:#eeeeee;
	height: 360px;
	padding: 20px 0 20px 0;
	border-bottom: 1px solid #ccc;
	
}

#top-teaser{
	width:1000px;
	margin:auto;
	margin-top:30px;
	height: 340px;
	/*border-bottom: 1px solid #ccc;*/
	
}

.top-left{
	width: 270px;
	float:left;
}

.top-middle{
	width: 250px;
	float:left;
	margin-left:30px;
}

.livetvbutton{
	position:relative;
	top: -40px;
	left: 80px;
	z-index:99;
}

.top-right{
	width: 400px;
	float:left;
	margin-left:50px;
	margin-top:-20px;
}

.ft-seo{
	font-size:13px;
	color:#666;
	
}

.top-right h1{
	background-color: #0099da;
	display:block;
	color:#fff;
	padding: 3px 10px 3px 10px;
	margin-bottom:20px;
	font-weight:600;
	font-size:23px;
}

.top-right h4{
	margin-bottom:10px;
	font-weight:600;
	font-size:18px;
}

.top-right h3{
	margin-bottom:10px;
	font-weight:600;
	font-size:18px;
	color: #0099da;
	background-color: #e7e7e8;
	padding: 2px 12px;
	display: inline;
	font-weight:600;
	font-size:20px;
	-webkit-box-shadow: 0px 0px 5px 2px #000;
	box-shadow: 0px 0px 5px 2px #999; 
}

.top-right img{
	margin-right:10px;
	border: 1px solid #0099da;
}

#uebersicht{
	width:1000px;
	margin:auto;
	margin-top: 150px;
}

#uebersicht img{
	margin-right:0px;
	margin-left: 30px;
	float:left;
}

#uebersicht .logo-kat{
	margin-top: 40px;
}

#uebersicht p{
	width: 500px;
	float: left;
}

#logoslider{
	width:1000px;
	margin:auto;
	margin-top: 50px;
	clear:both;
	height: 100px; 
	border-bottom: 1px solid #ccc;
	padding-bottom:20px;
	
}

#logoslider h3{
	margin-bottom: -10px;
	font-weight:bold;
}

#keyfacts{
	width: 1000px;
	margin: auto;
	clear:both;
	margin-top:50px;
	padding-bottom:20px;
	border-bottom: 1px solid #ccc;
	
}

#keyfacts h1{
	margin-bottom: 20px;
}

.product{
	width:1000px;
	height: 360px;
	margin:auto;
	margin-top:50px;
	padding-bottom:20px;	
	border-bottom: 2px solid #0099da;
}

.product-pic{
	float:left;
	width: 350px;
}

.product-teaser{
	float:left;
	width:580px;
	margin-top:70px;
	margin-left: 70px;
}

.product-teaser h3{
	color: #0099da;
	background-color: #e7e7e8;
	padding: 8px 12px 8px 12px;
	margin-left:-12px;
	display: inline;
	font-weight:600;
	font-size:20px;
}

#vorteile{
	width: 240px;
	margin-top:50px;
	border: 2px solid #0099da;
	border-radius:16px;
	padding:5px;
	background-color:#FFF;
}

#vorteile h2{
	color: #666;
	margin-top:5px;
	margin-left:8px;
	margin-bottom: 0px;	
	font-weight: 600;
}

#vorteile ul {
	margin-top:10px;
}

#vorteile ul li{
	list-style-image:url(https://www.variosmart.de/katalog-info-seiten/runnywater/img/checkbox.png);
	font-size:12px;
	margin-left:-8px;
	color:#666;
}

#footer{
	width:100%;
	background-color:#eeeeee;
	height:200px;
	margin-top:50px;
	border-top: 1px solid #0099da;
}

#footer-inner{
	width:1000px;
	margin:auto;
	background-color:#e0e0e0;
	height: 200px;
}



/*SLIDER*/
.infiniteCarousel {
  width: 1000px;
  position: relative;
}

.infiniteCarousel .wrapper {
  width: 920px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
  overflow: auto;
  min-height: 10em;
  margin: 0 40px;
  position: absolute;
  top: 0;
}

.infiniteCarousel ul a img {
}

.infiniteCarousel .wrapper ul {
  width: 9999px;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  padding:0;
  position: absolute;
  top: 0;
}

.infiniteCarousel ul li {
  display:block;
  float:left;
  padding-top: 10px;
  height: 85px;
  width: 230px;
}

.infiniteCarousel ul li a img {
  display:block;
}

.infiniteCarousel .arrow {
  display: block;
  height: 36px;
  width: 37px;
  background: url(https://www.variosmart.de/katalog-info-seiten/runnywater/img/arrow.png) no-repeat 0 0;
  text-indent: -999px;
  position: absolute;
  top: 37px;
  cursor: pointer;
}

.infiniteCarousel .forward {
  background-position: 0 0;
  right: 0;
}

.infiniteCarousel .back {
  background-position: 0 -72px;
  left: 0;
}

.infiniteCarousel .forward:hover {
  background-position: 0 -36px;
}

.infiniteCarousel .back:hover {
  background-position: 0 -108px;
}
/* END SLIDER */

/* button */
.button {
   border-top: 1px solid #f5fbff;
   background: #0099da;
   background: -webkit-gradient(linear, left top, left bottom, from(#00b7d6), to(#0099da));
   background: -webkit-linear-gradient(top, #00b7d6, #0099da);
   background: -moz-linear-gradient(top, #00b7d6, #0099da);
   background: -ms-linear-gradient(top, #00b7d6, #0099da);
   background: -o-linear-gradient(top, #00b7d6, #0099da);
   padding: 6px 12px;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #ffffff;
   font-size: 15px;
	font-weight: 600;
	font-family: Droid Sans, Arial, Helvetica, sans-serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #0099da;
   background: #0099da;
   color: #ccc;
   }
.button:active {
   border-top-color: #0099da;
   background: #25408f;
   }
/*end button*/


#produktanwendung-heading{
	width:1000px;
	margin:auto;
	margin-top: 40px;
}

.art-nr{
	margin-top: -10px;
	margin-left: 20px;
}