@charset "utf-8";
/* CSS Document */
		@font-face {
			  font-family: castellar;
			  font-style: normal;
			  font-weight: 400;
			  src: url('../fonts/castellar.ttf'); /* IE9 Compat Modes */
			  src: local('castellar'),
				   url('../fonts/castellar.eot') format('embedded-opentype'), /* IE6-IE8 */
				   url('../fonts/castellar.woff2') format('woff2'), /* Super Modern Browsers */
				   url('../fonts/castellar.woff') format('woff'), /* Modern Browsers */
				   url('../fonts/castellar.ttf') format('truetype'), /* Safari, Android, iOS */
				   url('../fonts/castellar.svg') format('svg'); /* Legacy iOS */
			}
		@keyframes blur {
							0%{	text-shadow:	0px 0px 10px #fff,
												0px 0px 10px #fff,
												0px 0px 25px #fff,
												0px 0px 25px #fff,
												0px 0px 25px #fff,
												0px 0px 25px #fff,
												0px 0px 25px #fff,
												0px 0px 25px #fff,
												0px 0px 50px #fff,
												0px 0px 50px #fff,
												0px 0px 50px #7B96B8,		  
												0px 0px 150px #7B96B8,
												0px 10px 100px #7B96B8,
												0px 10px 100px #7B96B8,
												0px 10px 100px #7B96B8,
												0px 10px 100px #7B96B8,
												0px -10px 100px #7B96B8,
												0px -10px 100px #7B96B8,
												0px 0px 25px #fff,
												0px 0px 7px #fff,
												0px 0px 5px #fff}
							 
							 								
							
							20%{text-shadow:	none}
							60%{text-shadow:	none}
							70%{text-shadow:	none}
							100%{text-shadow:	none}
							
							  
						}
			
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;				
				color: white;
			}	
			img {
				max-width: 100%;
				height: auto;
			}
			html, body {
				font-family: Arial, sans-serif;
				font-size: 0.8vw; /* Schriftgrad */	
				
			}
			/*Mobile-----------------------------------------------*/
			/*Mobile-----------------------------------------------*/
			/*Mobile-----------------------------------------------*/
			/*Mobile-----------------------------------------------*/
		@media only screen and (max-width: 1023px) {
			
			body {
				background-color:black;
				font-size: 14px;
				min-height:100%;
			}
			header {
				width: 60%;
				margin: auto;
			}
			a {
				text-decoration: none;
			}
			h1 {				
				margin: 0 auto;				
				text-align: center; /*horizontale Ausrichtung*/							
				color: white;				
				font-size: 38px!important;				
				animation: blur 5s ease-out;
				text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
				position:absolute;
				top:0;
			}
			h2 {				
				font-size: 14px;
				text-align: center;	
				color: white;
				position:absolute;
				top:10vh;
				left:5vw;
			}
			h3 {
				font-size: 15px !important;
				margin-top: 15px;
				margin-bottom: 15px;
				color: white;
			}
			h4 {
				margin-top: 15px;
			}
			input {
				margin-top: 10px;
				font-family: Roboto, sans-serif;
				width: 10em;
				height: 1.5em;
				border-radius: 6px;
				border-color: black;
				color: black;
				font-size: 0.8em;
				background-color: white;				
				text-align: center;				
			}				
			iframe {			
				margin-top: 5vh;								
			}			
			form {				
				color: white;
				text-align: center;
				margin-top: 3vh;
			}						
			fieldset {
				width: 20vw;
				margin: 5vh auto;				
			}
			legend {				
				font-size: 16px;				
			}			
			footer {				
				margin: auto;
				padding-left: 2px;
				padding-right: 2px;
				padding-top:5px;
				position: fixed;				
				width: 100%;
				height: 15%;
				bottom: 0;								
				background-color: rgba(0,0,0,0.80);
				color: white;
				border-top: 1px solid white;				
			}
			footer p {
				font-size: 10px!important;
			}
			figcaption {
				font-weight: bold;
				text-align: center;
				font-size: 18px;				
			}
			div.rocket {
    display:none;
    
    
  }
  #knopf {
				padding:1vw;
				font-size: 3vw;
				background-color:darkblue;
				color:white;
				border-radius:5%;
				cursor:pointer;
				
				font-weight:bold;
				box-shadow:2px 2px 5px hsla(0,0%,0%,.7);
				text-shadow:2px 4px 4px hsla(0,0%,0%,.8);
				background-image: -webkit-radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%);
 				background-image: radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%);
				transition: 0.3s;	
			}
			#knopf:hover {
				background-color:white;
				color:darkblue;
				font-weight: bold;
				box-shadow:2px 2px 5px hsla(255,0%,0%,.7);
				text-shadow:2px 4px 4px hsla(255,0%,0%,.8);   
			    background-image: -webkit-linear-gradient(top, #FFFFFF, #676B75);
			    background-image: -moz-linear-gradient(top, #FFFFFF, #676B75);
			    background-image: -ms-linear-gradient(top, #FFFFFF, #676B75);
			    background-image: -o-linear-gradient(top, #FFFFFF, #676B75);
			    background-image: linear-gradient(to bottom, #FFFFFF, #676B75);   
			}
  #rahmen {
	  display:none;
  }
  #huhn {
    display:none;
  }

			#baustelle {
				width: 100px;
				height: 95px;
				left: 2%;
				top: 10%;
			}
			#baustellenbild {
			}
			figcaption{
				text-align: center;
				margin-left: 10px;
				margin-top: 4px;
				font-weight: lighter;
				font-size: 15px;
			}
			/*ID's------------------------------------------------------------------------*/
			#mbmcookie {position: fixed; bottom: 0; background: black; color:white; padding: 20px;font-size: 14px; font-family: verdana;width:100vw;height:auto;border:1px solid black;border-radius:7px;box-shadow:inset 0 0 10px 0 gray;}

#mbmcookie a.button {cursor: pointer; background: #ccc; padding: 8px 20px; margin-left: 10px; margin-bottom:2px;border-radius: 5px;border:1px solid black; font-weight: bold; float: right;}

#mbmcookie a.button:hover {background-color: black;color:white;border:1px solid white}

#mbmcookie p.cookiemessage {display: block; padding: 0; margin: 0;color:white;}
			#topnav {
				background: white;
				width: 150px;
				position: fixed;
				right: -150px;
				top: 0;
				transition: all 1s ease-in-out;
				-webkit-transition: all 1s ease-in-out;
				 -moz-transition: all 1s ease-in-out;
				 -o-transition: all 1s ease-in-out;
				 -ms-transition: all 1s ease-in-out;
				 transition: all 1s ease-in-out;
				z-index: 999;
			}
			#topnav:target {
				right: 0;								
			}
			#topnav p {
				position: fixed;
				right: 0;
				top: 0;
				font-size: 200%;
				font-weight: bold;
				background-color: white;
				color: black;
				cursor: pointer;
			}
			#topnav:target p {				
				right: -40px;				
			}
			#topnav p:target a {				
				right: -40px;				
			}
			
			#topnav p a {
					text-decoration: none;
					color: black;
					width: 40px;					
					display: block;
					font-size: 1.5em;
					text-align: center;
					line-height: 35px;
					transition: 0.8s 0.8s;
				}
			#topnav ul {
				list-style: none;
			}
			#topnav ul li a {
				padding: 0 15px;
				line-height: 40px;
				display: block;
				text-decoration: none;
				color: #000;
				background-color: white;
				border-bottom: 1px solid white;
				transition: 0.5s;
			}
			#topnav ul li a:hover {
				background: #000;
				color: white;
			}	
			#topnav ul li ul li a:before {
				content: "-";
			}
			#topnav ul li ul li a:hover {
				background: rgba(255,255,255,0.53);
			}
			
			#impressum-unten {
				text-align: center;
				text-decoration: underline;	
				color: white!important;
			}
			
			#rechts {					
				margin: 0 auto;
				text-align: center;
			}		
			#kundenbereich {
				text-align: center;
				padding-bottom: 7vh;
				padding-top: 3vh;
				font-size: 18px!important;
			}
			#oben {
				font-family: Arial, sans-serif;
				font-size: 18px;
			}			
			#login {
				text-align: center;				
				margin-top: 2vh;
				font-size: 1vw;
			}	
			#kontakt-formular {
				top: 32%;
				position: absolute;
				width: 25vw;
			}
			#kontakt {	
				text-align: center;				
				font-size: 18px;
				width:auto;
				height:40%;
				top:10%;
				margin: 0 auto;
				overflow:auto;
				margin-bottom:2vh;
			}	
			#kontakt p {
				font-size: 14px;
			}
			
			#kontakt-rechts {
				display: none;
			}
			#limesdefinition {				
				text-align: center;	
				color: white;
				font-size: 1.5em;
			}
			#main-kontakt {
				width: 100%;
				height: 80%;
				overflow: auto;
			}
			#senden {
				font-size: 14px;
			}
			#main-leistungen {
				top: 15%;
				width: 100vw;
				height: 68vh;
				position: absolute;
				overflow: auto;
				margin: 18px auto;
				background-color: rgba(0,0,0,0.60);
				background-attachment: fixed;
				padding-top: 1.5vh;
				padding-left: 5%;
				padding-right: 5%;
				padding-bottom: 1.5vh;
			}			
			#webdesign {
				margin:auto;
				text-align: center;
				background-color: rgba(0,0,0,0.80);
				padding-top: 5vh;
				padding-bottom: 15vh;
				margin-bottom:15vh!important;
				
			}
			.pricing-box-container {
				width:55%;
				margin-left:auto;
				margin-right:auto;
			}
			.pricing-box {
				margin-bottom:2vh;
				border: 1px solid white;
				width:50vw;
				text-align:center;
			}
			.features-list {
				list-style:none;
			}
			.nodisplay {
				display:none;
			}
			#pricetable {
				width:90vw!important;
				display:block;
			}
			#pricetable td {
				height:4vh;
				text-align:left;
				width:15%;
			}
			
			#h3-leistungen {
				font-size: 18px!important;
			}
			#leistungen > ul > li {
				font-size: 14px;
				font-weight: bolder;
				list-style: none;
			}
			#zahlen {
				display: none;
			}
			#downloads {
				width: 100%;
				margin: 0 auto;				
				background-color: rgba(0,0,0,0.80);
			}
			#download {
				width: 100%;
				height: 73%;
				padding-top: 5vh;
				padding-bottom: 5vh;
				overflow: auto;
			}
			
			#produkte:after {
				content: "";
				display: block;
				clear: both;
			}
			#shop {
				background-color:rgba(0,0,0,0.80);				
				padding: 2vw;
				width: 100%;
				height: 70vh;
				overflow: auto;
				margin-bottom:15vh;
			}
			#produktbeschreibung {
				margin-top: 5vh;
			}
			#produktbeschreibung:after {
				content: "";
				display: block;
				clear: both;
			}			
			#impressum {
				height: 80%;
				background-color: rgba(0,0,0,0.60);
				margin: 18px auto;
				overflow: auto;
				padding-left: 4vw;
				padding-bottom: 2vh;
				padding-right: 4vw;
				padding-top: 2vh;
				position: absolute;
				top: 13%;
				left: 0;
			}
			#datenschutz {
				font-family: Arial, sans-serif;
				font-size: 4vw;
				text-align: left;
			}
			#dot {
				margin-right: 2vw;
			}
			#preisliste {
				margin-top: 5px;
			}	
			#firewall-aktion {
				width: 80vw !important;
			}	

#spamschutz {
	display:none;
}		
			/*freie Klassen---------------------------------------------*/
			.wdh {
				display: none;
			}
			
			
			
			.aktionen {
				display: flex; 
    justify-content: center; 
    align-items: center;
			}
			.home {				
				top: 15%;
				width: 100%;
				height: 67%;
				position: absolute;
				overflow: auto;
				margin: 18px auto;
				background-color: rgba(0,0,0,0.60);
				background-attachment: fixed;
				padding-top: 1.5vh;
				padding-left: 5%;
				padding-right: 5%;
				margin-bottom:15vh;
			}	
			.slider {
				width: 100%;
				height: 40%;
			}
			.form-control {				
				margin-top: 1vh;
				margin-left: 0;
				font-family: Roboto, sans-serif;
				width: 100px;
				max-height: 50px;
				border-radius: 6px;
				border-color: black;
				color: black;
				font-size: 12px;
				background-color: rgba(255,255,255,0.80);				
				text-align: center;				
			}			
			.clearfix:after {
				content: "";
				display: block;
				clear: both;
			}
			.example_e {
				font-family: Roboto, sans-serif;
				border: 1px black solid;
				background-color: black;
				color: #ffffff;
				font-size:12px !important;
				padding: 3px;
				width: 70px;			
				border-radius: 6px;
				display: inline-block;
				-webkit-box-shadow: 2px 5px 40px -10px rgba(0,0,0,0.57);
				-moz-box-shadow: 2px 5px 40px -10px rgba(0,0,0,0.57);				
				box-shadow:2px 2px 5px hsla(0,0%,0%,.7);
				text-shadow:2px 4px 4px hsla(0,0%,0%,.8);
				background-image: -webkit-radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%);
 				background-image: radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%);
			}
			.example_e:hover {
				font-family: Roboto, sans-serif;
				border: 1px black solid;
				color: white;
				font-size: 12px;
				letter-spacing: 1px;
				background: black;
				-webkit-box-shadow: 2px 5px 40px -10px rgba(0,0,0,0.57);
				-moz-box-shadow: 2px 5px 40px -10px rgba(0,0,0,0.57);
				box-shadow:2px 2px 5px hsla(0,0%,0%,.7);
				text-shadow:2px 4px 4px hsla(0,0%,0%,.8);
				background-image: -webkit-radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%);
 				background-image: radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%);
				transition: all 0.2s ease-in-out ;
				width: 80px;				
			}				
			.kontakt {
				font-size: 22px;
				margin-bottom: 10px;
			}			
			.w3-button-left{
				position: absolute;
				top: 50%;
				left: 0;				
				padding: 10px;
				font-size: 20px;
				font-weight: bold;
				color: white;
				background-color: black;
				cursor: pointer;
			}
			.w3-button-right {
				position: absolute;
				top: 50%;
				right: 0;
				padding: 10px;
				font-size: 20px;
				font-weight: bold;
				color: white;
				background-color: black;
				cursor: pointer;
			}
			.limesturm {
				width: 15px;
				height: 20px;
				float: left;				
			}
			.limes {	
				float: right;
				width: 15px;
				height: 20px;				
			}	
			.limes:after {
				content: "";
				display: block;
				clear: both;
			}
			.wiki {
				color: white;
				font-weight: bold;
				text-decoration: underline;
			}
			.einführung {
				margin-bottom: 15px;
			}
			.accordion {				
				font-size: 16px;				
				background-color: black;
				color: white;
				cursor: pointer;
				padding: 18px;
				width: 100%;
				text-align: left;
				border: none;
				outline: none;
				transition: 0.4s;
			}
			.active, .accordion:hover {
				background-color: white;
				color: black;
			}
			.downloads {
				font-family: Arial, sans-serif;
				font-size: 19px;
				text-align: center;				
				margin-bottom: 1vh;
				padding-top: 1vh;
				padding-left: 1vw;
			}
			.panel {
				width: 100%;
				padding: 0 18px;
				background-color: black;
				display: none;
				overflow: hidden;
			}
			.manual {
				text-decoration: underline;				
			}
			.produkte {
				font-family: Arial, sans-serif;
				font-size: 18px;
				text-align: center;
				margin-bottom: 5px;
				margin-top: 10px;
			}						
			.product_image_left {
				float: left;				
				margin-right: 1.5em;				
			}	
			.produktbeschreibung {
				padding-top: 5px;
				
			}
			.produktbeschreibung:after {
				content: "";
				display: block;
				clear: both;
			}
			.product_image_left1 {
				float: left;				
				margin-right: 1.5em;
				
			}
			.produktbeschreibung1 {
				padding-top: 5px;
			}		
			.produktbeschreibung1:after {
				content: "";
				display: block;
				clear: both;
			}
			.product_image_left2 {
				float: left;
				margin-right: 1.5em;				
			}
			.produktbeschreibung2 {
				margin-top: 1vh;
			}		
			.produktbeschreibung2:after {
				content: "";
				display: block;
				clear: both;
			}
			.produktbilder {				
				max-height: 100px;
				max-width: 70px;
				margin-top: 10px;
			}
			.mySlides {
				display: none;
			}
			.mySlides fade numbertext img {
				vertical-align: middle;
				max-width: 100%;
				height: auto;
			}			
			.slideshow-container {
			  max-width: 100%;  
			  margin: auto;				
			}			
			.text {
			  color: #f2f2f2;
			  font-size: 15px;
			  padding: 8px 12px;
			  position: absolute;
			  bottom: 8px;
			  width: 100%;
			  text-align: center;
			}			
			.numbertext {
			  color: #f2f2f2;
			  font-size: 12px;
			  padding: 8px 12px;
			  position: absolute;
			  top: 0;
			}			
			.dot {
			  height: 15px;
			  width: 15px;			 
			  background-color: #bbb;
			  border-radius: 50%;
			  display: inline-block;
			  transition: background-color 0.6s ease;
			  text-align: center;
			}
			.active {
			  background-color: #717171;
			}			
			.fade {
			  -webkit-animation-name: fade;
			  -webkit-animation-duration: 1.5s;
			  animation-name: fade;
			  animation-duration: 1.5s;
			}	
			.button {
				color: black;
			}
			
			.animation, .grid {
				display: none;
			}
			#sophos_schule {
				width:95vw;
				height:50vh;
				overflow: scroll;
			}
			#preistabelle {
				width:100vw!important;
			}
			#startseite_unten {
			text-align:center!important;
			}
			
		}
			

			/*Desktop-----------------------------------------*/
			/*Desktop-----------------------------------------*/
			/*Desktop-----------------------------------------*/
			/*Desktop-----------------------------------------*/
			/*Desktop-----------------------------------------*/
		@media only screen and (min-width: 1024px)
		{			  
			body {
				background: url(../image/Backround_-1.jpg);
				background-size: cover;
				background-position: center center fixed;
				background-attachment: fixed;
				height: auto;	
			}
			#snow {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1000;
}
			img {
				max-width: 100%;
				height: auto;
			}
			header {
				top: 0px;
				position: fixed !important;
				position: absolute;
				z-index: 999;
				height: 10%;
				width: 100%;
				margin: auto;
			}
			a {
				text-decoration: none;
			}
			h1 {
				font-family: Castellar, sans-serif;
				margin: 0 auto;				
				text-align: center; /*horizontale Ausrichtung*/							
				color: white;				
				font-size: 6vw;				
				animation: blur 18s ease-out;
				animation-iteration-count: infinite;
				text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
			}
			h2 {
				font-family: Castellar, sans-serif;
				font-size: 1.2vw;
				text-align: center;	
				color: white;
			}
			h3 {
				font-size: 19px;
				margin-top: 15px;
				margin-bottom: 15px;				
			}
			h4 {
				margin-top: 15px;
			}
			main {
				margin: 0 auto;
				height: auto;
				width: 70%;
				display: block;
			}
			
			input {
				margin-top: 10px;
				font-family: Roboto, sans-serif;
				width: 10em;
				height: 1.5em;
				border-radius: 6px;
				border-color: black;
				color: black;
				font-size: 0.8em;
				background-color: white;				
				text-align: center;				
			}				
			iframe {				
				margin-left: 5vw;
				margin-top: 7vh;
				margin-bottom: 5vh;
				float: left;
				width: 40vw;
				height: 35vh;
			}
			iframe:after {
				content: "";
				display: block;
				clear: both;
			}			
			form {				
				color: black;
				text-align: center;
				margin-top: 3vh;
				width: 17vw;
			}
			form:after {
				content: "";
				display: block;
				clear: both;
			}
			fieldset {
				margin: 0 auto;
				text-align: center;			
			}
			legend {
				font-weight: bold;	
			}
			footer {				
				margin:  auto;
				padding-top: 0.5vh;
				position: absolute;				
				width: 100%;
				height: auto;
				bottom: 0px;								
				background-color: rgba(0,0,0,0.60);
				color: white;
				border-top: 1px solid white;
			}	
			
			textarea {
				color:black;
			}
			figcaption {
				font-weight: bold;
				text-align: center;
				font-size: 18px;				
			}
			img[alt^="Wasserb"] {
				animation: rollball 10s;
				animation-iteration-count: infinite;
			}
			@keyframes rollball {
				0%	{ transform: translateX(0) rotate(0deg); }
				10% { transform: translateX(0) rotate(720deg); }
				50% { transform: translateX(600px) rotate(1400deg); }
				60% { transform: translateX(600px) rotate(1400deg); }
				80% {transform: translateX(-600px) rotate(720deg); }
				100%{ transform: translateX(0) rotate(1400deg); }
			}
			.mySlides {display: none;}
			
			img {
				vertical-align: middle;
			}
			
			img[alt~="Rauch"]{
			animation-name: Qualm;
			animation-duration: 3s;
			animation-iteration-count: infinite;
			}
			canvas{
    position:absolute;top:0;left:0;
    
}
.produktbilder {
 transition: transform 0.8s;
 -moz-transition: transform 0.8s;
 -webkit-transition: transform 0.8s;
 -o-transition: transform 0.8s;
 -ms-transition: transform 0.8s;
}
.produktbilder:hover {
 cursor: zoom-in;
 cursor: -moz-zoom-in;
 cursor: -webkit-zoom-in;
 transform: scale(2.0, 2.0);
 -moz-transform: scale(2.0, 2.0);
 -webkit-transform: scale(2.0, 2.0);
 -o-transform: scale(2.0, 2.0);
 -ms-transform: scale(2.0, 2.0);
}

			@keyframes Qualm {
				0%	{position: relative; left:60px; opacity: 1;}
				100%{position: relative; left:-30px; opacity: 0;}
			}
	
			/* Loko + Rauch bewegen --------------------------*/
			.animation figure {
			/*	width: 220px;*/
			/*	display: inline-block;*/
				animation-name: loko;
				animation-duration: 10s;
				animation-fill-mode: forwards;
				animation-iteration-count: infinite;
			}
			@keyframes loko {
				0%	{transform: translateX(0px)}
				50%{transform: translateX(500px)}
				100%{transform: translateX(0px)}
			}
			/*ID's------------------------------------------------------------------------*/
			#mbmcookie {position: fixed; bottom: 5vh; right: 10vw;background: black; color:white; padding: 20px;font-size: 14px; font-family: verdana;width:30vw;height:auto;border:1px solid black;border-radius:7px;box-shadow:inset 0 0 10px 0 gray;}

#mbmcookie a.button {cursor: pointer; background: #ccc; padding: 8px 20px; margin-left: 10px; margin-bottom:2px;border-radius: 5px;border:1px solid black; font-weight: bold; float: right;}

#mbmcookie a.button:hover {background-color: black;color:white;border:1px solid white}

#mbmcookie p.cookiemessage {display: block; padding: 0; margin: 0;color:white;}


			.aktionen {
				position: absolute;
				top: 10vh;
				right:6vw;
			}
		
			#produkte-links {
				display: grid; 
  grid-template-rows:20% 20% 20% 20% 20%; 
  grid-template-columns:50% 50%; 
  width:20vw;
  max-height:74vh;
				
			}
			#produkte-rechts {
				display: grid; 
  grid-template-rows:20% 20% 20% 20% 20%; 
  grid-template-columns:50% 50%; 
  width:20vw;
  max-height:74vh;
  position:absolute;
  top:3vh;
  left:27vw;
			}
			.schule_kontakt {
				font-size:1.8vw;
			}
			
			#topnav {
				width: 80vw;
				margin: auto;
			}
			#topnav p {
				display: none;
			}
			#topnav ul {
				display: flex;
				list-style: none;
			}
			#topnav ul li {
				flex-basis:12.5%;
			}
			#topnav ul li a {
				padding: 5px;				
				display:block;
				cursor:pointer;
				text-align: center;
				text-decoration: none;
				background-color: black;
				color: white;
				font-size: 18px;
				font-weight: bold;
				border: 1px solid black;
				border-radius: 4px;
				box-shadow:2px 2px 5px hsla(0,0%,0%,.7);
				text-shadow:2px 4px 4px hsla(0,0%,0%,.8);
				background-image: -webkit-radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%);
 				background-image: radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%);
				transition: 0.3s;				
			}
			#topnav ul li a:hover {							
				border-radius: 4px;
				cursor: pointer;
				background: white;
				color: black;
				font-weight: bold;
				box-shadow:2px 2px 5px hsla(255,0%,0%,.7);
				text-shadow:2px 4px 4px hsla(255,0%,0%,.8);   
			    background-image: -webkit-linear-gradient(top, #FFFFFF, #676B75);
			    background-image: -moz-linear-gradient(top, #FFFFFF, #676B75);
			    background-image: -ms-linear-gradient(top, #FFFFFF, #676B75);
			    background-image: -o-linear-gradient(top, #FFFFFF, #676B75);
			    background-image: linear-gradient(to bottom, #FFFFFF, #676B75);   
			    display: block;
			}	
#topnav ul li.close {
     display: none;
}

.nav-open {
     display: none;
}
#preistabelle {
	width:90%;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:5vh;
}
#pricetable {
	width:100%;
	border-collapse: collapse;
	background-color:black;
	font-weight:bold!important;
	font-size:1.2em;
	box-shadow: 10px 10px 5px 0px rgba(255,255,255,0.2);
	-webkit-box-shadow: 10px 10px 5px 0px rgba(255,255,255,0.2);
	-moz-box-shadow: 10px 10px 5px 0px rgba(255,255,255,0.2);
}

.text-center {
	text-align: center;
}

.pricing-box-container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.pricing-box {
	background-color: #000000;
	box-shadow: 0px 2px 15px 0px rgba(255,255,255,0.5);
	border-radius: 4px;
	flex: 1;
	padding: 15px 30px 30px;
	margin: 2%;
	min-width: 250px;
	max-width: 350px;
}

.pricing-box h5 {
	text-transform: uppercase;
	margin-top:2px;
	font-size:1.1em;
}

.price {
	margin: 24px 0;
	font-size: 36px;
	font-weight: 900;
}

.price sub, .price sup {
	font-size: 16px;
	font-weight: 100;
}

.features-list {
	padding: 0;
	list-style-type: none;
}

.features-list li {
	font-weight: 100;
	padding: 12px 0;
	font-size:1.1em;
}

.features-list li:not(:last-of-type) {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}



.pricing-box-bg-image {
	background-color: #000000;
	background-size: cover;
	background-position: center center;
	color: #ffffff;
}

.pricing-box-bg-image .features-list li {
	border-bottom-color: rgba(255, 255, 255, 1);
}

.pricing-box-bg-image .btn-primary {
	background-color: #ffffff;
	color: #000;
}
figure.effect-lily img {
	max-width: none;
	width: -webkit-calc(100% + 50px);
	width: calc(100% + 50px);
	opacity: 0.7;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,0, 0);
	transform: translate3d(0,0,0);
}

figure.effect-lily figcaption {
	text-align: left;
}

figure.effect-lily figcaption > div {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 2em;
	width: 100%;
	height: 50%;
}

figure.effect-lily h2,
figure.effect-lily p {
	-webkit-transform: translate3d(0,40px,0);
	transform: translate3d(0,40px,0);
}

figure.effect-lily h2 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-lily p {
	color: rgba(255,255,255,0.8);
	opacity: 0;
	-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
	transition: opacity 0.2s, transform 0.35s;
}

figure.effect-lily:hover img,
figure.effect-lily:hover p {
	opacity: 1;
}

figure.effect-lily:hover img,
figure.effect-lily:hover h2,
figure.effect-lily:hover p {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-lily:hover p {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
	-webkit-transition-duration: 0.35s;
	transition-duration: 0.35s;
}
#pricetable tr,td {
	padding:2vw;
}
#pricetable th {
	font-size:2em;
	font-weight:bold;
	border: 1px solid white;
	padding:1vw;
}
#pricetable td {
	border: 1px solid white;
	width:16%;
}
#pricetable td:first-child {
	text-align:left;
	font-weight:bold!important;
	width:36%;
}
#pricetable th:first-child {
	text-align:left;
	padding-left:2vw;
}
			
			#kontakt {
				position: absolute;
				width: 25%;													
				top: 15%;
				left: 12%;
			}
			#kontaktformular {
				position: absolute;
				top: 38%;
				height: 55%;
				left: 5%;;
			}
			#rechts {				
				position: absolute;
				width: 60%;
				right: 10%;
				top: 5%;
			}
			#links {
				position: absolute;
				top: 12%;
				left: 8%;
			}
			#startseite_unten {
				position:absolute;
				left: 8%;
				top: 45%;
			}
			#copyshop {
				position:absolute;
				left:5%;
				top:40%;
				font-weight:bold;
			}
			#copyshopdrucker {
				width:18.5vw;
				height:auto;
			}
			#kontakt-rechts {
				position: absolute;
				width: 45%;				
				right: 16%;
			}
			#oben {
				font-family: Arial, sans-serif;
				margin-top: 4vh;
				margin-bottom: 2vh;
			}
			#kundenbereich {
			}
			#login {
				text-align: center;				
				margin-top: 4vh;
				font-size: 1vw;
			}			
			#kontakt {	
				position: absolute;
				top: 10%;
				text-align: left;
				left: 8%;
			}				
			#limesdefinition {
				font-weight: bold;
				text-align: center;				
			}
			#main-kontakt {
				width: 85vw;
				height: 70%;
				margin: 0 auto;
				background-color: rgba(0,0,0,0.60);
				padding-top: 1.5vh;
				padding-right: 4vw;
			}
			
			#main-leistungen {
				position: absolute;
				overflow: auto;
				margin: auto;
				background-color: rgba(0,0,0,0.60);
				background-attachment: fixed;
				padding-top: 1.5vh;
				padding-right: 4vw;
				padding-left: 4vw;
				width: 85vw;
				top: 24vh;
				height: 67vh;
				left: 7.5vw;
				
				
				
			}
			#leistungen {
				float: left;
				padding-left: 5px;
			}
			#leistungen ul {
				list-style-position: inside;
			}
			#leistungen > ul > li {
				font-size: 18px;
				font-weight: bold;
				list-style: none;				
			}	
			#preisliste {
				font-weight: bold;
				margin-top: 2vh;
				font-size: 18px;
			}
			#webdesign {
				position: absolute;
				margin: auto;
				text-align:center;
				background-color: rgba(0,0,0,0.60);				
				text-align: center;
				font-weight: bold;
				padding-top: 5vh;
				overflow: auto;
				overflow-x: hidden;
				width: 85vw;
				top: 24vh;
				height: 67vh;
				left: 7.5vw;

			}	
			#paypal {
				
				position:absolute;
				left:75%!important;
				top:70%;
			}
			#paypalpro {
				
				position:absolute;
				left:70%!important;
				top:73%;
			}
			#zahlen {
				float: right;
				margin-right: 1vw;				
			}
			#zahlen:after {
				content: "";
				display: block;
				clear: both;
			}
			#downloads {
				width: 85vw;
				margin: 8px auto;				
				padding-left: 4vw;
			}	
			#download {
				margin:auto;
				background-color: rgba(0,0,0,0.60);
				position: absolute;
				overflow: auto;
				width: 85vw;
				top: 24vh;
				height: 67vh;
				left: 7.5vw;
			}			
			#produkte:after {
				content: "";
				display: block;
				clear: both;
			}
			#shop {
				position: absolute;
				overflow: auto;
				margin: auto;
				background-color: rgba(0,0,0,0.60);
				background-attachment: fixed;
				padding-top: 1.5vh;
				padding-right: 4vw;
				padding-left: 4vw;
				width: 85vw;
				top: 24vh;
				height: 67vh;
				left: 7.5vw;
			}			
			#schule #navi04 a,
			#dienstleistungsseite #navi02 a,
			#startseite #navi01 a,
			#webdesignseite #navi03 a,
			#produkteseite #navi05 a,
			#kontaktseite #navi06 a,
			#impressumbody #navi07 a,
			#datenschutz-body #navi08 a{
				 color: black;
				 font-weight: bold;
				 background-color: white;
				 box-shadow:2px 2px 5px hsla(255,0%,0%,.7);
				 text-shadow:2px 4px 4px hsla(255,0%,0%,.8);   
			     background-image: -webkit-linear-gradient(top, #FFFFFF, #676B75);
			     background-image: -moz-linear-gradient(top, #FFFFFF, #676B75);
			     background-image: -ms-linear-gradient(top, #FFFFFF, #676B75);
			     background-image: -o-linear-gradient(top, #FFFFFF, #676B75);
			     background-image: linear-gradient(to bottom, #FFFFFF, #676B75);   
			     display: block;  
			}
			#sophos_schule {
				width:75vw;
				height:50vh;
				overflow: scroll;
			}
			#sophos_bilder {
				width:100%;
				text-align:center;
				margin-bottom:5vh;
			}
			#sophos1 {
				width: 44%;
				height:50vh;
			}
			#sophos2 {
				width:44%;
				height:50vh;
			}
			#impressum {
				
				background-color: rgba(0,0,0,0.60);
				margin: auto;
				overflow: auto;
				padding-left: 4vw;
				padding-bottom: 2vh;
				padding-right: 4vw;
				padding-top: 2vh;
				position: absolute;
				width: 85vw;
				top: 24vh;
				height: 80vh;
				left: 7.5vw;
			}
			
			#impressumseite {
				background: black;
			}
			#datenschutz {
				font-family: Arial, sans-serif;
				font-size: 2vw;
			}
			#dot {
				margin-right: 2vw;
			}
			#baustelle {
				width: 100px;
				height: 95px;
				left: 2%;
				top: 10%;
			}
			#baustellenbild {
				right: 2%;
				position: absolute;
			}
			figcaption{
				text-align: left;
				margin-left: 10px;
				margin-top: 4px;
				font-weight: lighter;
			}
			#firewall-aktion {
				width:25vw;
			}
			#kundenbereich:after {
				clear:both;
				content: "";
				display: block;
			}
			#spamschutz {
				display:none;
			}
			#knopf1 {
				padding:1vw;
				font-size: 1vw;
				background-color:darkblue;
				color:white;
				border-radius:5%;
				cursor:pointer;
				position:absolute;
				right:15vw;
				top:46vh;
				font-weight:bold;
				box-shadow:2px 2px 5px hsla(0,0%,0%,.7);
				text-shadow:2px 4px 4px hsla(0,0%,0%,.8);
				background-image: -webkit-radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%);
 				background-image: radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%);
				transition: 0.3s;
			}
			#knopf1:hover {
				background-color:white;
				color:darkblue;
				font-weight: bold;
				box-shadow:2px 2px 5px hsla(255,0%,0%,.7);
				text-shadow:2px 4px 4px hsla(255,0%,0%,.8);   
			    background-image: -webkit-linear-gradient(top, #FFFFFF, #676B75);
			    background-image: -moz-linear-gradient(top, #FFFFFF, #676B75);
			    background-image: -ms-linear-gradient(top, #FFFFFF, #676B75);
			    background-image: -o-linear-gradient(top, #FFFFFF, #676B75);
			    background-image: linear-gradient(to bottom, #FFFFFF, #676B75);   
			}
			#knopf {
				padding:1vw;
				font-size: 1vw;
				background-color:darkblue;
				color:white;
				border-radius:5%;
				cursor:pointer;
				position:absolute;
				right:15vw;
				top:40vh;
				font-weight:bold;
				box-shadow:2px 2px 5px hsla(0,0%,0%,.7);
				text-shadow:2px 4px 4px hsla(0,0%,0%,.8);
				background-image: -webkit-radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%);
 				background-image: radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%);
				transition: 0.3s;	
			}
			#knopf:hover {
				background-color:white;
				color:darkblue;
				font-weight: bold;
				box-shadow:2px 2px 5px hsla(255,0%,0%,.7);
				text-shadow:2px 4px 4px hsla(255,0%,0%,.8);   
			    background-image: -webkit-linear-gradient(top, #FFFFFF, #676B75);
			    background-image: -moz-linear-gradient(top, #FFFFFF, #676B75);
			    background-image: -ms-linear-gradient(top, #FFFFFF, #676B75);
			    background-image: -o-linear-gradient(top, #FFFFFF, #676B75);
			    background-image: linear-gradient(to bottom, #FFFFFF, #676B75);   
			}
			/*freie Klassen---------------------------------------------*/
			.knopf {
	padding:0.6vw 0.8vw;
	border:none;
	font-size: 1vw;
	font-weight:bold;
	background-color:black;
	color:white;
	border-radius:5%;
	cursor:pointer;
	display:inline-block;
	text-decoration:none!important;
	box-shadow:2px 2px 5px hsla(0,0%,0%,.7);
				text-shadow:2px 4px 4px hsla(0,0%,0%,.8);
				background-image: -webkit-radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%);
 				background-image: radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%);
				transition: 0.3s;
	
}	
.knopf:hover {
	background-color:white;
	color:black;
	box-shadow:2px 2px 5px hsla(255,0%,0%,.7);
				text-shadow:2px 4px 4px hsla(255,0%,0%,.8);   
			    background-image: -webkit-linear-gradient(top, #FFFFFF, #676B75);
			    background-image: -moz-linear-gradient(top, #FFFFFF, #676B75);
			    background-image: -ms-linear-gradient(top, #FFFFFF, #676B75);
			    background-image: -o-linear-gradient(top, #FFFFFF, #676B75);
			    background-image: linear-gradient(to bottom, #FFFFFF, #676B75);
}
			.wdh {
				display: none;
			}
			
			div.rocket {
    position: absolute;
    
    
  }



  
  #rahmen {
	  width:100%;
	  height:40vh;
	  padding-top:30vh;
  }
  #huhn {
    width: 55px;
    height: 55px;
    background: url(../image/huhn1.png) no-repeat;
	background-size:cover;
	background-position: top left fixed;
    -webkit-transition: 4s linear;
    -moz-transition: 4s linear;
    -o-transition: 4s linear;
    transition: 4s linear;
  }

 div.rocket {
				-webkit-animation-name: huhn;
				-webkit-animation-iteration-count: infinite;
				-webkit-animation-duration: 10s;
				animation-name: huhn;
				animation-duration: 10s;
				animation-iteration-count: infinite;
				
}
@keyframes huhn {
				0%	{ transform: translate(5vw,-10vh); }
				2% { transform: translate(10vw,-15vh);}
				4% { transform: translate(12vw,-16vh);}
				6% { transform: translate(15vw,-15vh);}
				8% { transform: translate(20vw,-16vh);}
				10% { transform: translate(25vw,-15vh); }
				12% { transform: translate(30vw,-16vh);}
				15% { transform: translate(35vw,-15vh);}
				18% { transform: translate(40vw,-16vh);}
				20% { transform: translate(45vw,-16vh); }
				25% { transform: translate(50vw,-14vh);}
				30% { transform: translate(55vw,-15vh); }
				35% { transform: translate(60vw,-13vh);}
				40% { transform: translate(70vw,-16vh); }
				45% { transform: translate(75vw,-15vh);}
				50% { transform: translate(80vw,-14vh); }
				55% { transform: translate(80vw,-14vh) scaleX(-1);}
				60% { transform: translate(79vw,-16vh) scaleX(-1); }
				65% { transform: translate(78vw,-17vh) scaleX(-1);}
				70% { transform: translate(75vw,-16vh) scaleX(-1); }
				75% { transform: translate(70vw,-14vh) scaleX(-1);}
				80% { transform: translate(60vw,-13vh) scaleX(-1); }
				85% { transform: translate(50vw,-16vh) scaleX(-1);}
				87% { transform: translate(45vw,-17vh) scaleX(-1);}
				90% { transform: translate(40vw,-16vh) scaleX(-1); }
				92% { transform: translate(35vw,-15vh) scaleX(-1);}
				95% { transform: translate(20vw,-16vh) scaleX(-1);}
				97% { transform: translate(10vw,-15vh) scaleX(-1);}
				100% {transform: translate(5vw,-13vh) scaleX(0); }
				
}
			.grid {
	position: relative;
	margin: 0 auto;
	padding: 1em 0 4em;
	max-width: 1000px;
	list-style: none;
	text-align: center;
}

/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	min-width: 320px;
	max-width: 480px;
	max-height: 360px;
	width: 48%;
	background: #3085a3;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

			/* Individual effects */
			/*---------------*/
			/***** Layla *****/
			/*---------------*/

			figure.effect-layla {
				background: #18a367;
			}

			figure.effect-layla img {
				height: 390px;
			}

			figure.effect-layla figcaption {
				padding: 3em;
			}

			figure.effect-layla figcaption::before,
			figure.effect-layla figcaption::after {
				position: absolute;
				content: '';
				opacity: 0;
			}

			figure.effect-layla figcaption::before {
				top: 50px;
				right: 30px;
				bottom: 50px;
				left: 30px;
				border-top: 1px solid #fff;
				border-bottom: 1px solid #fff;
				-webkit-transform: scale(0,1);
				transform: scale(0,1);
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
			}

			figure.effect-layla figcaption::after {
				top: 30px;
				right: 50px;
				bottom: 30px;
				left: 50px;
				border-right: 1px solid #fff;
				border-left: 1px solid #fff;
				-webkit-transform: scale(1,0);
				transform: scale(1,0);
				-webkit-transform-origin: 100% 0;
				transform-origin: 100% 0;
			}

			figure.effect-layla h2 {
				padding-top: 26%;
				-webkit-transition: -webkit-transform 0.35s;
				transition: transform 0.35s;
			}

			figure.effect-layla p {
				padding: 0.5em 2em;
				text-transform: none;
				opacity: 0;
				-webkit-transform: translate3d(0,-10px,0);
				transform: translate3d(0,-10px,0);
			}

			figure.effect-layla img,
			figure.effect-layla h2 {
				-webkit-transform: translate3d(0,-30px,0);
				transform: translate3d(0,-30px,0);
			}

			figure.effect-layla img,
			figure.effect-layla figcaption::before,
			figure.effect-layla figcaption::after,
			figure.effect-layla p {
				-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
				transition: opacity 0.35s, transform 0.35s;
			}

			figure.effect-layla:hover img {
				opacity: 0.7;
				-webkit-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
			}

			figure.effect-layla:hover figcaption::before,
			figure.effect-layla:hover figcaption::after {
				opacity: 1;
				-webkit-transform: scale(1);
				transform: scale(1);
			}

			figure.effect-layla:hover h2,
			figure.effect-layla:hover p {
				opacity: 1;
				-webkit-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
			}

			figure.effect-layla:hover figcaption::after,
			figure.effect-layla:hover h2,
			figure.effect-layla:hover p,
			figure.effect-layla:hover img {
				-webkit-transition-delay: 0.15s;
				transition-delay: 0.15s;
			}
			.home {
				position: absolute;
				background-color: rgba(0,0,0,0.60);				
				color: white;
				width: 85vw;
				top: 24vh;
				height: 67vh;
				left: 7.5vw;
				overflow: auto;
			}		
			.privat {
				text-align:center; 
				font-size:2vw; 
				width: 50vw; 
				margin:auto
			}
			.slider {
				width: 60vw!important;
				height: 40vh!important;
			}
			.form-control {				
				margin-top: 1vh;
				margin-left: 0;
				font-family: Roboto, sans-serif;
				width: 7vw;
				max-height: 2.8vh;
				border-radius: 6px;
				border-color: black;
				color: black;
				font-size: 0.8vw;
				background-color: rgba(255,255,255,0.80);				
				text-align: center;				
			}
			
			
			.form {
				margin: 0 auto;
				width: auto;				
			}
			.clearfix:after {
				content: "";
				display: block;
				clear: both;
			}
			.example_e {
				font-family: Roboto, sans-serif;
				border: 1px black solid;
				background-color: black;
				color: #ffffff;
				font-size: 0.7vw !important;
				padding: 3px;
				width: 6vw;	
				height: 3vh;
				border-radius: 6px;
				display: inline-block;
				-webkit-box-shadow: 2px 5px 40px -10px rgba(0,0,0,0.57);
				-moz-box-shadow: 2px 5px 40px -10px rgba(0,0,0,0.57);				
				box-shadow:2px 2px 5px hsla(0,0%,0%,.7);
				text-shadow:2px 4px 4px hsla(0,0%,0%,.8);
				background-image: -webkit-radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%);
 				background-image: radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%);
				cursor: pointer;
			}
			.example_e:hover {
				font-family: Roboto, sans-serif;
				border: 1px black solid;
				color: white;
				font-size: 0.7vw;
				letter-spacing: 1px;
				background: black;
				-webkit-box-shadow: 2px 5px 40px -10px rgba(0,0,0,0.57);
				-moz-box-shadow: 2px 5px 40px -10px rgba(0,0,0,0.57);
				box-shadow:2px 2px 5px hsla(0,0%,0%,.7);
				text-shadow:2px 4px 4px hsla(0,0%,0%,.8);
				background-image: -webkit-radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%);
 				background-image: radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%);
				transition: all 0.3s ease-in-out ;
				width: 7vw;	
				height: 3vh;
				cursor: pointer;
			}				
			.kontakt {
				font-size: 22px;
				margin-bottom: 10px;
			}			
			.w3-button-left{
				position: absolute;
				top: 50%;
				left: 32%;				
				padding: 10px;
				font-size: 20px;
				font-weight: bold;
				color: white;
				background-color: black;
				cursor: pointer;
			}
			.w3-button-right {
				position: absolute;
				top: 50%;
				right: 13%;
				padding: 10px;
				font-size: 20px;
				font-weight: bold;
				color: white;
				background-color: black;
				cursor: pointer;
			}			
			.wiki {
				color: white;
				font-weight: bold;
				text-decoration: underline;
			}
			.einführung {
				margin-bottom: 15px;
			}
			.accordion {
				font-size: 18px;				
				background-color: black;
				color: white;
				cursor: pointer;
				padding: 18px;				
				width: 95%;				
				text-align: center;
				border: none;
				outline: none;
				transition: 0.4s;
			}
			.active, .accordion:hover {
				background-color: white;
				color: black;
			}
			.downloads {
				font-family: Arial, sans-serif;
				text-align: center;				
				padding-top: 10px;
				padding-left: 10px;
				padding-right: 10px;
			}
			.panel {
				width: 95%;
				padding: 0 18px;				
				background-color: black;
				display: none;
				overflow: hidden;
			}
			.manual {
				text-decoration: underline;
			}
			.produkte {
				font-family: Arial, sans-serif;
				text-align: center;				
			}
			.product_image_left {
				float: left;
				margin-right: 1.5em;				
			}
			.produktbeschreibung {
				padding-top: 2vh;
				margin-top: 2vh;
				font-size:1.3vw;
				
			}
			.produktbeschreibung:after {
				content: "";
				display: block;
				clear: both;
			}
			.product_image_left1 {
				float: left;
				margin-right: 1.5em;				
			}
			.produktbeschreibung1 {
				margin-top: 2vh;
				font-size:1.3vw;
			}
			.produktbeschreibung1:after {
				content: "";
				display: block;
				clear: both;
			}
			.product_image_left2 {
				float: left;
				margin-right: 1.5em;				
			}
			.produktbeschreibung2 {
				margin-top: 2vh;
				font-size:1.3vw;
			}
			.produktbeschreibung2:after {
				content: "";
				display: block;
				clear: both;
			}
			.produktbilder {
				height: 14vh;
				width: 8vw;
			}
			.mySlides {
				display: none;
			}
			.mySlides fade numbertext img {
				vertical-align: middle;
				width: 1330px !important;
				height: 500px !important; 
			}			
			.slideshow-container {
			  max-width: 1600px;  
			  margin: auto;
			}			
			.text {
			  color: #f2f2f2;
			  font-size: 15px;
			  padding: 8px 12px;
			  position: absolute;
			  bottom: 8px;
			  width: 100%;
			  text-align: center;
			}			
			.numbertext {
			  color: #f2f2f2;
			  font-size: 12px;
			  padding: 8px 12px;
			  position: absolute;
			  top: 0;
			}			
			.dot {
			  height: 15px;
			  width: 15px;			 
			  background-color: #bbb;
			  border-radius: 50%;
			  display: inline-block;
			  transition: background-color 0.6s ease;
			  text-align: center;
			}
			.active {
			  background-color: #717171;
			}			
			.fade {
			  -webkit-animation-name: fade;
			  -webkit-animation-duration: 2.5s;
			  animation-name: fade;
			  animation-duration: 2.5s;
			}	
			.button {
				color: black;
			}
			
			.emailadresse {
				text-decoration: underline;
			}
			
		}