@charset "utf-8";


@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 100;
  src: url(../fonts/pxiGyp8kv8JHgFVrLPTucHtA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  src: url(../fonts/pxiByp8kv8JHgFVrLFj_Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


*		{ margin: 0px; padding: 0px; border: 0px;  box-sizing:border-box;}

html {
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
}


 div#topnews{ 
 	font-family: 'Poppins', sans-serif;
	line-height: 1.000;
	font-size: 20px;
	font-weight: 300;
	font-style: normal;
	color: red;
	background:#FFFFFF;
 top: 0px; 
  position: fixed;
text-align:center;
  width: 100%;
  height: 110px;
     z-index: 989;
	 padding: 10px;
}

iframe
{
width: 100%;
min-height:50%;

	
}






div#slider { 
position: relative; 
margin-left:auto;
margin-right:auto;
margin-top: 70px; 
max-width: 100%;
     z-index: 99; 
}



div#slider-info { 
padding: 35px;
position: absolute; 
top: 350px; 
max-width: 1000px;
background-color: rgba(255,255,255,0.6);
z-index: 988;
}



video#bgvideo {

    width: 100% ;
    height: 100%;
z-index: 100;
}

img {
float:left:
}


  /* ENDE HERO Hintergundbild */		


div#LOGO { 
  position: fixed;
 top: 15px; 
 width: 485px; 
 height: 180px; 
 margin-left: 3%; 
 background: url(../images/suedwasch-wassertechnik.png) no-repeat; 
   z-index: 999;
 }


 
 h1 {
	line-height: 1.000;
	font-size: 1.800em;
	font-weight: 300;
	font-style: normal;
	}

	h2 {

	line-height: 1.000;
	font-size: 1.500em;
	font-weight: 300;
	font-style: normal;
	}

h3{
	line-height: 1.000;
	font-size: 1.300em;
	font-weight: 300;
	font-style: normal;
	}
	
	p {
	line-height: 1.000;
	font-size: 1.000em;
	font-weight: 300;
	font-style: normal;
	}

 
 
 
	.TelefonStart {
	line-height: 1.000;
	font-size: 18px;
	font-weight: 300;
	font-style: normal;
	color: #000000;
	}
 
 
 @media screen and (max-width: 1000px) {
 
 h1 {

	font-size: 1.200em;

	}

 .large-font {
  font-size: 28px;
}

.xlarge-font {
  font-size: 34px
}


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

a:hover {color:#FFFFFF; text-decoration:none;}
 
 
 a.LinkKontakt:link {
  color:#000000;
  }
 a.LinkKontakt:visited {
  color:#000000;
  }
 a.LinkKontakt:hover {
  color:#000000;
  }
 
  /* Start Navigation */		


.menue-button {
	display: none;
}	
#topmenu {
	 top: 70px; 
  position: fixed;
  width: 100%;
  background: #102C54;
  font-size: 18px;
  text-align: right;
  display: block;
  color: #fff;
  text-decoration: none;
  padding-right: 110px;

     z-index: 998;
}
	#topmenu li {
		display:inline;
	    font-size:18;
	    padding:0;
	    position:relative;
		color: #fff;
	}
	#topmenu li a {
	    padding:30px 15px;
		color:#FFFFFF;
	    text-decoration:none;
	    display:inline-block;
		position: relative;
	}
	 
	 	nav ul > li.parent > a:after {
  position: relative;
  float: right;
  content: '';
  margin-left: 10px;
  margin-top: 8px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  border-bottom: 5px solid transparent;
}
	
	nav ul > li.parent:hover > a:after {
  margin-top: 2px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid #fff;
} 
	#topmenu li a:hover {
	 
	    color:#FFFFFF;
		border-radius: 0px;
	}
	
	#topmenu li a.first {
	  color: #fff;
	}
	#topmenu li a.last {
		background:#000000;
	 color: #fff;
	} 
	#topmenu li:hover > a {
	    background:#0B2D53;
	}

	#topmenu li:hover > ul
	{
	/*these 2 styles are very important, 
	being the ones which make the drop-down to appear on hover */
	    visibility:visible;
	    opacity:1;
	}
/* Drop-Down topmenue */
	ul#topmenue li:hover > ul
	{
	/*these 2 styles are very important, 
	being the ones which make the drop-down to appear on hover */
	    visibility:visible;
	    opacity:1;
		  background:#000000;
	} 
	#topmenu ul li ul {
		text-align:left;
	    list-style: none;
	    margin: 0;
	    padding: 0;    
	/*the next 2 styles are very important, 
	being the ones which make the drop-down to stay hidden */
	    visibility:hidden;
	    opacity:0;
	    position: absolute;
	    z-index: 99999;
	    background:#f8f8f8;

	/* css3 transitions for smooth hover effect */
	    -webkit-transition:opacity 0.2s linear, visibility 0.2s linear; 
	    -moz-transition:opacity 0.2s linear, visibility 0.2s linear; 
	    -o-transition:opacity 0.2s linear, visibility 0.2s linear; 
	    transition:opacity 0.2s linear, visibility 0.2s linear;     
	} 
	#topmenu ul {
	    top: 35px;
	    left: 1px;
	}

	#topmenu ul  ul li {
	    clear:both;
	    border:0 none;
	    border-bottom:1px solid #c9c9c9;
	}
	 
	#topmenu ul  ul li a {

	    padding:9px 15px;
	    color:#000000;
	    text-decoration:none;
	    display:inline-block;
	    border:0 none;
	    float:left;
	    clear:both;
	    width:300px;
		background:#FFFFFF;
		text-align: left;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
		z-index: 1;
	}

  @media only screen and (max-width:1700px) {
#topmenu {
	 top: 60px; 
  position: fixed;
  width: 100%;
  background: #102C54;
  font-size: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,1);
  margin: 0 auto;
  padding: 0;
  text-align: right;
  display: block;
  color: #fff;
  text-decoration: none;
     z-index: 998;
}

div#LOGO { 
  position: fixed;
 top: 15px; 
 width: 385px; 
 height: 180px; 
 margin-left: 2%; 
 background: url(../images/suedwasch-wassertechnik385.png) no-repeat; 
   z-index: 999;
 }



 }	
	
	
	
	/* CSS erweitern um MENÜ-Button und entsprechende Steuerung */
/*	Menü-Button oben rechts einblenden bei kleiner als 600px */
@media only screen and (max-width:1200px) {
	.menue-button {
		display: block;
	}
	.menue-button {
	padding-right:1em; 
	background:url(../images/icon-navigation.png) no-repeat 90% center;
	z-index: 998;
		width:100%;
		height: 120px;
		background-color: #0B2D53;
		display: block;
		position: fixed;
		right: 10;
		top: 0px;
		padding: 0.5em;
		color: white;
		cursor: pointer;
		text-decoration: none;
	}	
	
	#topmenu {
		
		width:100%;
		display:block;
		top:140px;
		float: left;
		width: 100%;
		background-color: #0B2D53;	
		display: none;
		z-index: 99998;
		text-align:left;
		 
	}	
	#topmenu li {	
		  display:inline;
	    font-size:12px;
	    font-weight:bold;
	    margin:0;
	    padding:0;
	    float:left;
	    position:relative;
		width: 100%;
		border-bottom: 2px solid #000000;
	}	
	
	#topmenu li a {	width:100%;
		   border-right:1px solid #f5f5f5;
	    border-left:1px solid #f5f5f5;
		
	}
	 #topmenu ul li ul {
	    list-style: none;
	    margin: 20px;
		margin-left: 130px;
	    padding: 10;   

	 }
	 
	 	#topmenu ul  ul li a {
	    max-width:400px;

	}
	 
	 
	
	.menue-button:hover {
		padding-right:1em; 
	background:url(../images/icon-navigation.png) no-repeat 90% center;
	z-index: 998;
		width:100%;
		background-color: #0B2D53;
		display: block;
		position: absolute;
		right: 10;
		top: 0px;
		padding: 0.5em;
		color: white;
		cursor: pointer;
		text-decoration: none;
	}
	
	
	div#LOGO { 
  position: fixed;
 top: 0px; 
 width: 285px; 
 height: 180px; 
 margin-left: 2%; 
 background: url(../images/suedwasch-wassertechnik285.png) no-repeat; 
   z-index: 999;
 }
	
	
	
}



/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
#nav-menue:target #topmenu {
	display: block;
}
/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */
#nav-menue:target .menue-button-beschr-open {
	display: none ; 
}	
/* Allgemein Anweisungen */




/* Content Startseite */


.container {
  padding: 40px;
}

.container-x {
  padding: 40px;
  max-width:1400px;
  margin-left:auto;
margin-right:auto;
  
}

.row:after {
  content: "";
  display: table;
  clear: both;

}

.column-100{
  float: left;
  width: 100%;
 position: relative;
padding: 15px;
}


.column-66 {
  float: left;
  width: 66.66666%;
  padding: 20px;
}
.column-50{
  float: left;
  width: 50%;
 position: relative;
padding: 15px;;
}


.column-xx{
  float: left;
  width: 50%;
 position: relative;
padding: 15px;
}

.column-auswahl{
  float: left;
 position: relative;
  margin-bottom: 16px;
  padding: 0 8px;

}

.column-33 {
  float: left;
  width: 33.33333%;
}

.large-font {
  font-size: 48px;
}

.xlarge-font {
  font-size: 54px;

}

.button {
  border: none;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  background-color: #012060;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

@media screen and (max-width: 1000px) {
  .column-66,
  .column-33,
  .column-50, 
  .column-auswahl  {
    width: 100%;
    text-align: center;
  }
  img {
    margin: auto;
  }

}



div#content { 
width: 100%;
max-height: 100%; 
float:left;

}



div#component{ 
 z-index: 9999;
max-width:1200px;
margin-left:auto;
margin-right:auto;
padding: 10px;
}

div#content1 { 
width: 100%;
max-height: 100%; 
float:left;
}


div#component-1{ 
 z-index: 9999;
max-width:1400px;
margin-left:auto;
margin-right:auto;

}


div#content2 { 
width: 100%;
max-height: 100%; 
float:left;
 background-color: #F3F3F3;
}


div#component-2{ 
 z-index: 9999;
max-width:1400px;
margin-left:auto;
margin-right:auto;
  background-color: #F3F3F3;
}


div#content3 { 
width: 100%;
max-height: 100%; 
float:left;
color: #FFFFFF;
}


div#component-3{ 
 z-index: 9999;
max-width:100%;
margin-left:auto;
margin-right:auto;
  background-color: #0F4245;
}



div#content4 { 
width: 100%;
max-height: 100%; 
float:left;
}


div#component-4{ 
 z-index: 9999;
max-width:1400px;
margin-left:auto;
margin-right:auto;

}


div#content5 { 
width: 100%;
max-height: 100%; 
float:left;
}


div#component-5{ 
 z-index: 9999;
max-width:1400px;
margin-left:auto;
margin-right:auto;

}

div#content6 { 
width: 100%;
max-height: 100%; 
float:left;
}


div#component-6{ 
 z-index: 9999;
max-width:1400px;
margin-left:auto;
margin-right:auto;

}

div#contentProdukte{ 
 z-index: 9999;
max-width:1100px;
margin-left:auto;
margin-right:auto;
padding: 10px;
}

.buttonAnfrage {
  border: none;
  color: white;
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
  background-color: #1B4B79;
width: 100%;
border-radius: 5px;

}

.buttonAnfrageStartRed {
  border: none;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  background-color: #FF0000;
width: 100%;
}

.buttonAnfrageStartBlue {
  border: none;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  background-color: #012060;
width: 100%;
}


.ProduktP1  { 
padding-left: 0px;
}



 #pic-left { 
 max-height: 300px;
 float:left;
 margin: 10px;


}

 #pic-left400 { 
max-height: 400px;
float:left;
box-shadow:0px 10px 10px grey;
}




  .rwd-table td:before {
    display: none;
  }
.rwd-table th, .rwd-table td {
  text-align: left;
}
  .rwd-table th, .rwd-table td {
    display: table-cell;
    padding: .25em .5em;
  }
  .rwd-table th:first-child, .rwd-table td:first-child {
    padding-left: 0px;
  }
  .rwd-table th:last-child, .rwd-table td:last-child {
    padding-right: 0px;
  }
.rwd-table {
	margin-top:10px;
	padding: 0;
	max-width: 878px;
	font-size: 14px;
	color:#000000;
background-color:#ffffff;
}
.rwd-table tr {
  border-color: #46637f;
}
.rwd-table td {
	margin:0;
	padding: 0;
	width: 578px;
	background: #F3F4F6;
}
.rwd-table .psdg-left {
	
	color:#000000;
	
	
}
.rwd-table th {
	margin:0;
	padding: 0;
	max-width: 578px;
	height: 10px;
	border-top: 2px solid #FFF;
	color:#FFFFFF;
	background: #012060;
}
  .rwd-table th, .rwd-table td {
    padding: 1em !important;
  }
}
.rwd-table th, .rwd-table td:before {
  color: #FFFFFF
}

@media screen and (max-width: 580px) {


.rwd-table th {
  display: none;
}
.rwd-table td {
width: 100%;
  display: block;
}

.rwd-table td:before {
	padding-left: .5em;
  content: attr(data-th) "";
  font-weight: bold;
  width: 6.5em;
  display: inline-block;
}

.rwd-table {
width: 100%;
	margin-top:10px;
	padding: 0;
	font: 14px Arial, Helvetica, sans-serif;
	color:#000000;
background-color:#ffffff;
}
.rwd-table tr {
  border-color: #46637f;
}

.buttonAnfrage {
  font-size: 14px;
}
 .ProduktP1 { 
    display: flex; 
    justify-content: center; 
    align-items: center;
}
 #pic-left { 
 max-height: 300px;
}




}






























div#footer { width: 100%; height: 100%; background-color: #1B394E; float:left; color:#FFFFFF}






/* Content datenschutzerklaerung Start*/

#datenschutzerklaerung a {color:#FFFFFF; text-decoration:;}

#datenschutzerklaerung a:hover {text-decoration:underline;}

#datenschutzerklaerung div { padding:40px;}

#datenschutzerklaerung { 
   outline: 1px solid #1b394e; 
   text-align:center; 
   border-top:1px solid #fff;
   background: #20283A; 
   position:fixed;
   	min-height: 300px;
   bottom:0px; 
   z-index:10000; 
   width:100%; 
   font-size:18px; 
   line-height:16px;
  }

#datenschutzerklaerungCloser {
   color: #FFFFFF;
   font-size:18px;
   border-radius: 25px;
   text-decoration: none;
	height: 40px;
   top: 5px;
   cursor:pointer;
   padding:10px;
   background: #7EA533; /* Old browsers */

 }

#datenschutzerklaerungCloser:hover {background: #FFFFFF;color: #000000;}

/* Content datenschutzerklaerung Ende*/