/*
	Miniport 2.0 by HTML5 UP
	html5up.net | @n33co
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/*********************************************************************************/
/* Basic                                                                         */
/*********************************************************************************/

	body
	{
		font-size: 13pt;
		min-width: 1200px;
	}

	h1
	{
		font-size: 2.25em;
		letter-spacing: -0.025em;
	}

	h2
	{
		font-size: 2em;
		letter-spacing: -0.015em;
	}
	
	h3
	{
		font-size: 1.5em;
		letter-spacing: -0.015em;
	}

	h1, h2, h3, h4, h5, h6
	{
		margin: 0 0 0.75em 0;
	}

	header
	{
		margin: 0 0 3em 0;
	}
	
		header > span
		{
			font-size: 1.25em;
		}

	footer
	{
		margin: 3em 0 0 0;
	}
	
		footer > p
		{
			font-size: 1.25em;
		}
	
	form
	{
	}
	
		form .button
		{
			margin: 0 0.5em 0 0.5em;
		}
	
	.button
	{
		padding: 1em 2.35em 1em 2.35em;
		font-size: 1.1em;
	}

		.button-big
		{
			font-size: 1.5em;
			letter-spacing: -0.025em;
		}

	.box
	{
		padding: 2em 2em 2.5em 2em;
	}

		.box h3
		{
			margin-bottom: 0.25em;
		}

		.box .image-centered
		{
			margin-bottom: 1.25em;
		}

		.box .image-full
		{
			position: relative;
			left: 2em;
			top: 2em;
			margin: -4em 0 4em -4em;
			width: auto;
		}

/*********************************************************************************/
/* Wrappers                                                                      */
/*********************************************************************************/

	.wrapper
	{
	padding: 5em 0 1em 2em;
	text-align: left;
	}
	
		.wrapper-first
		{
			padding-top: 12em;
		}

		.wrapper-style4 .row-special
		{
			margin: 4em 0 0 0;
			padding: 4em 0 4em 0;
		}

/*********************************************************************************/
/* Nav                                                                           */
/*********************************************************************************/

	#nav
	{
	}

		#nav a:hover
		{
			background: #D4D4D4;
			color: #fff;
		}
		
		#nav a:active
		{
			background: #D4D4D4;
		}
	
		#nav a
		{
			padding: 0.2em 1em 0.2em 1em;
			margin: 0.6em 0.2em 0.6em 0.2em;
			font-weight: 600;
			border-radius: 8px;
			-moz-transition: background-color .2s ease-in-out;
			-webkit-transition: background-color .2s ease-in-out;
			-o-transition: background-color .2s ease-in-out;
			-ms-transition: background-color .2s ease-in-out;
			transition: background-color .2s ease-in-out;
			color: #fff;
		}
		
/*********************************************************************************/
/* Articles                                                                      */
/*********************************************************************************/

	#top
	{
		text-align: left;
	}

		#top .me
		{
			width: 600px;
			height: 160px;
			margin: 10px;
		}

		#top h1
		{
			margin-top: 0.35em;
		}
	
		#top p
		{
			font-size: 1.0em;
			line-height: 1.75em;
		}
		
	#contact
	{
		width: 800px;
		margin: 0 auto;
	}
	
		#contact footer
		{
			font-size: 0.9em;
		}
		
/*********************************************************************************/
/* Copyright                                                                     */
/*********************************************************************************/

	#copyright
	{
		font-size: 1em;
	}

/********************* POPUP DESKTOP-Ansicht *********************/
	/** definiert das Fenster **/
#popup {
  background-image: url(https://www.zella.de/code/bilder/blume2.jpg);		/** Hintergrundbild **/
  background-size: cover;				/** Hintergrundbild Responsive Darstellung **/
  position:absolute;						/** Fixiert (scrollt nicht mit) Alternative "position:absolute;" **/
  width:400px;						/** 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:-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: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: 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 (min-width: 1px) {
#popup {
display:none;
}}

/********************* POPUP MOBILE-Ansicht *********************/
#popup-mobile {
  background:#A6A444;
  position:absolute;
  width:400px;
  left:30px;
  top:300px;
  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:16px;
  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 (max-width: 200px) {
#popup-mobile {
display:none;
}}