@media only screen and (min-width: 300px) {
  body {
    font-size:1.5em !important;
  }
  #content img {width:40% !important;}
}

@media only screen and (min-width: 480px) {
  body {
    font-size:2em !important;
  }
  #content img {width:20% !important;}
}

@media only screen and (min-width: 900px) {
  body {
    font-size:3em !important;
  }
}

body {	background-color:#222222;
		margin:0;
		overflow:auto;
		min-width:6em;
	}
	
p {		font-family: 'Slabo 27px', serif;
		color:#000000;
		font-size:.4em;
		line-height:120%;
		margin:0.4em 0;
	}
p:last-of-type {
    padding-bottom: 2em;
} 

#content {	padding:1em 0 0 0;
			position:absolute;
			text-align:center;
			margin:auto;
			z-index:2;
			left:10%;
			right:10%;
			opacity:0.6;
			min-width:7em;
			height:auto;
	}
	
#content img {	margin:0.5em;}
	
a				{color:#ffffff; text-decoration:none; font-size:0.5em;}
a:link			{color:#000000; text-decoration:none;}
a:visited		{color:#555555; text-decoration:none;}
a:active		{color:#ffffff; text-decoration:none;}
a:hover			{color:#FFFFFF; text-decoration:underline;}

h1			{font-family:'Slabo 27px', serif; font-weight:normal; font-size:1em; line-height:140%; margin:0 0 0.3em 0;}
h2			{font-size:.6em; font-weight:normal; line-height:140%; margin:0.1em 0 0 0;}	
	
.toggleBox {
    position: relative;
	z-index:3;
	width:80%;
	margin:auto;
	min-width:7em;

	/* Schrift */
	font-family: 'Slabo 27px', serif;
	color:#000000;
	text-align:left;
	line-height:60%;
	}

 
/* Ausblenden des input-Feldes */
.toggleBox input{
    position: absolute;
    left: -999999px;
}
 
/* Gestaltung der labels */
.toggleBox label {
    display: block;
	width:30%;
	min-width:8.2em;
	left:50%;
	background: #68B022;
    color: #fff;
    padding: 1em;
    margin: auto;
	text-align:center;
    cursor: pointer;
	font-size:.5em;
}

#impressum {
	position:relative;
	text-align:left;
	overflow:auto;
	background-color:#ffffff;
	margin:.5em 0;
	min-width:5em;
	max-height:8em;
}

#impressum h1 {line-height:60%;}
 
.toggleBox label:hover {
    background: #bbb;
}
 
/* Der Aufklappmechanismus */
.toggleBox input:not(:checked) ~ div {
    opacity: 0;
    height: 0;
}
 
.toggleBox input:checked ~ div {
    opacity: 1;
    padding: .8em;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
 
/* Steuerung der Sichtbarkeit der labels */
.toggleBox input:not(:checked) ~ .close,
.toggleBox input:checked ~ .open {
    display: none;
}




	
::-webkit-scrollbar {
width: .3em;
background: #eee;
} 
::-webkit-scrollbar-thumb {
background:#68B022;
}

::-webkit-scrollbar-thumb:hover {
background: #bbb;
}

::-webkit-scrollbar-thumb:active {
background: #bbb;
}




@-webkit-keyframes hgFadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-moz-keyframes hgFadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-o-keyframes hgFadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@keyframes hgFadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

#hintergrund img {
	/* Mindestmaße zum Füllen */
	min-height: 512px;
	min-width: 768px;
	
	/* proportionales skalieren */
	width: 100%;
	height: auto;
	
	/* Positionierung */
	position: fixed;
	top: 0;
	left: 0;
}

#hintergrund img {
  -webkit-animation-name: hgFadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 30s;

  -moz-animation-name: hgFadeInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 30s;

  -o-animation-name: hgFadeInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 30s;

  animation-name: hgFadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 30s;
}
#hintergrund img:nth-of-type(1) {
  -webkit-animation-delay: 30s;
  -moz-animation-delay: 30s;
  -o-animation-delay: 30s;
  animation-delay: 30s;
}
#hintergrund img:nth-of-type(2) {
  -webkit-animation-delay: 25s;
  -moz-animation-delay: 25s;
  -o-animation-delay: 25s;
  animation-delay: 25s;
}
#hintergrund img:nth-of-type(3) {
  -webkit-animation-delay: 20s;
  -moz-animation-delay: 20s;
  -o-animation-delay: 20s;
  animation-delay: 20s;
}
#hintergrund img:nth-of-type(4) {
  -webkit-animation-delay: 15s;
  -moz-animation-delay: 15s;
  -o-animation-delay: 15s;
  animation-delay: 15s;
}
#hintergrund img:nth-of-type(5) {
  -webkit-animation-delay: 10s;
  -moz-animation-delay: 10s;
  -o-animation-delay: 10s;
  animation-delay: 10s;
}
#hintergrund img:nth-of-type(6) {
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
  -o-animation-delay: 5s;
  animation-delay: 5s;
}