body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

td {  font: 12px Arial, Helvetica, sans-serif}
.head {  font: bold normal 16px Arial, Helvetica, sans-serif; color: #000000}
.name {  font: normal 45px Arial, Helvetica, sans-serif}
a {  color: #FFFFFF}
.small {  font: 10px Arial, Helvetica, sans-serif; color: #333333; text-decoration: none}
body {  background: #eeeeee url(img/bgr.gif) repeat-y; font-family: Arial, Helvetica, sans-serif}
.headgray { font: bold normal 16px Arial, Helvetica, sans-serif; color: #999999}
li {  list-style: url(img/4gray.gif) outside}
.smallhead { font: bolder 11px Arial, Helvetica, sans-serif; color: #333333 }
font.err {font-family: arial; font-size: 12px; color: red}
font.not {font-family: arial; font-size: 12px; color: #999999}

/********************* POPUP DESKTOP-Ansicht *********************/
	/** definiert das Fenster **/

	
	
	
#video {
	  /** background-image: url(https://www.zella.de/code/bilder/blume2.jpg);		/** Hintergrundbild **/
	  background-size: cover;				/** Hintergrundbild Responsive Darstellung **/
	  position:fixed;						/** Fixiert (scrollt nicht mit) Alternative "position:absolute;" **/
	  width:400px;						/** Breite des Fensters **/
	  left:250px;							/** Position von Links **/
	  top:550px;						/** Position von Oben **/
	  padding:20px 10px;					/** Textabstand zum Fensterrand **/
	  color:#000000;					/** Textfarbe **/
	  font-size: 16px;					/** Schriftgröße **/
	  border-radius:20px;					/** Runde Ecken **/
	  border-width:2px;					/** Rahmenbreite **/
	  border-style:solid;					/** Positionstil **/
	  border-color:#000000;				/** Rahmenfarbe **/
	  z-index:20000; 					/** Überlagerung **/
	}
	
	.vertical-center {
	  margin: 0;
	  position: absolute;
	  top: 50%;
	  -ms-transform: translateY(-50%);
	  transform: translateY(-50%);
	}
}
	
	
	
#popup {
	  background-image: url(https://www.zella.de/code/bilder/blume2.jpg);		/** Hintergrundbild **/
	  background-size: cover;				/** Hintergrundbild Responsive Darstellung **/
	  position:fixed;						/** Fixiert (scrollt nicht mit) Alternative "position:absolute;" **/
	  width:600px;						/** Breite des Fensters **/
	  left:200px;							/** Position von Links **/
	  top:120px;						/** Position von Oben **/
	  padding:20px 10px;					/** Textabstand zum Fensterrand **/
	  color:#006600;					/** Textfarbe **/
	  font-size: 16px;					/** Schriftgröße **/
	  border-radius:20px;					/** Runde Ecken **/
	  border-width:2px;					/** Rahmenbreite **/
	  border-style:solid;					/** Positionstil **/
	  border-color:#006600;				/** Rahmenfarbe **/
	  z-index:20000; 					/** Überlagerung **/
	}

		/** Überschrift H2 innerhalb des Popups **/
	#popup h2 {
	  color:#006600;					/** Schriftfarbe**/
	  font-size:16px;						/** Schriftgröße **/
	  font-weight:bold;					/** Schrift Fett **/
	}
		/** definiert den Hintergrund der Texte **/
	.hintergrund {
	  background: rgba(255, 255, 255, 0.8); 	/** Hintergrund Weiss, 80% Durchscheinend**/
	  padding:12px;						/** Textabstand zum Rand**/
	  border-radius:5px;					/** Runde Ecken **/
	  border-width:1px;					/** Rahmenstärke**/
	  border-style:solid;					/**Rahmenstil **/
	  border-color:#006600;				/** Rahmenfarbe **/
	  font-weight:bold;					/** Schrift Fett **/
	  margin:20px;						/** Abstand zum Fensterrand **/
	}
		/** Definiert den Schließen.Button **/
	#close{
	  position:absolute;					/** Fixiert (scrollt nicht mit) **/
	  background:#006600;				/** Hintergrundfarbe **/
	  color:#fff;						/** Farbe des Kreuzes **/
	  right:-15px;						/** Position**/
	  top:-15px;						/** Position**/
	  border-radius:50%;					/** Rund**/
	  width:30px;						/** Größe**/
	  height:30px;						/** Größe**/
	  line-height:30px;					/** Größe**/
	  text-align:center;					/** Zentriert**/
	  font-size:18px;						/** Größe**/
	  font-weight:bold;					/** Fett**/
	  font-family:'Arial Black', Arial, sans-serif;	/** Schriftart**/
	  cursor:pointer;						/** Klickbar**/
	}
		/** Definiert die Link-Button **/
	.button-popup {
	  width:50px;						/** Breite**/
	  border-radius: 10px;				/** Runde Ecken**/
	  color: #ffffff;						/** Schriftfarbe**/
	  font-size: 16px;					/** Schriftgröße**/
	  background: #006600;				/** Hintergrundfarbe**/
	  padding: 3px 6px 3px 6px;			/** Abstand zum Rand**/
	  text-decoration: none;				/** Nicht unterstreichen**/
	  text-align:center;					/** Zentriert**/
	}
		/** Definiert die Link-Button Hover **/
	.button-popup:hover {
	  background: #009900;				/** Hintergrundfarbe**/
	  color: #ffffff;						/** Schriftfarbe**/
	  text-decoration: none;				/** Nicht unterstreichen**/
	}
		/** Definiert wann und wie das Fenster eingeblendet wird **/
	.einblenden {
	animation-name: einblenden;
	animation-duration: 1s;				/** Gesammte Zeit der Animation **/
	animation-iteration-count: 1;			/** Anzahl der Wiederholungen **/
	animation-timing-function: ease-in-out;
	}
	@keyframes einblenden {
	from {transform:translate(0, -500px);}		/** Startposition **/
	50% {transform:translate(0, -500px);}		/** Position nach 50% der Zeit (0.5 Sec) **/
	85% {transform:translate(0, 50px);}		/** Position nach 80% der Zeit (0.8 Sec) **/
	to {transform: translate(0, -0px);} 		/** Endposition **/
	}
		/** Definiert wann Fenster ausgeblendet wird (Bildschirmbreite) **/
	@media (max-width: 979px) {
	#popup {
	display:none;
	}}