<style>
/********************* POPUP DESKTOP-Ansicht *********************/
	/** definiert das Fenster **/
#popup {
  background-image: url(http://www.avena-zermatt.ch/img/201911_Ferien.jpg);		/** Hintergrundbild **/
  background-size: cover;				/** Hintergrundbild Responsive Darstellung **/
  position:fixed;						/** Fixiert (scrollt nicht mit) Alternative "position:absolute;" **/
  width:10px;						/** Breite des Fensters **/
  left:30px;							/** Position von Links **/
  top:30px;						/** Position von Oben **/
  padding:20px 10px;					/** Textabstand zum Fensterrand **/
  color:#006600;					/** Textfarbe **/
  font-size: 16px;					/** Schriftgröße **/
  border-radius:10px;					/** 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:22px;						/** 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:150px;						/** Position**/
  top:450px;						/** Position**/
  border-radius:50%;					/** Rund**/
  width:30px;						/** Größe**/
  height:30px;						/** Größe**/
  line-height:30px;					/** Größe**/
  text-align:center;					/** Zentriert**/
  font-size:15px;						/** 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: 0;			/** 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: 100px) {
#popup {
display:none;
}}

/********************* POPUP MOBILE-Ansicht *********************/
#popup-mobile {
  background:#006600;
  position:fixed;
  width:200px;
  left:10px;
  top:25px;
  padding:20px 10px;
  color:#fff;
  font-size: 14px;
  border-radius:5px;
  border-width:1px;
  border-style:solid;
  border-color:#fff;
  z-index:20000; 
}
#popup-mobile h2 {
  color:#fff;
  font-size:20px;
  font-weight:bold;
}
#close-mobile{
  position:absolute;
  background:#003300;
  color:#fff;
  right:-15px;
  top:-15px;
  border-radius:50%;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  font-size:15px;
  font-weight:bold;
  font-family:'Arial Black', Arial, sans-serif;
  cursor:pointer;
}
.button-popup-mobile {
  width:50px;
  border-radius: 7px;
  color: #006600;
  font-size: 14px;
  background: #fff;
  padding: 2px 4px 2px 4px;
  text-decoration: none;
  text-align:center;
}
.button-popup-mobile:hover {
  text-decoration: none;
}
	/** Definiert wann Fenster eingeblendet wird (Bildschirmbreite) **/
@media (min-width: 450px) {
#popup-mobile {
display:none;
}}
</style>