body{
	font-family: Arial, Helvetica, sans-serif;
    margin: 0;
}
#kopfbereich {
	text-align: center;
}
#logo a{
	color: black;
	text-decoration: none;	
}
#logo{
	display: inline-block;
	padding: 8px;
	font-size: 32px;
    font-weight: bold;
}

#logo img{
	width: 10%;
	height: auto;
}	

#navibereich {
	text-align: center;
	border-bottom-style:outset;
	border-bottom-color: #F81266;
}

#navibereich a {
	color: gray;
	text-decoration: none;
	padding: 8px;
}
#navibereich	a:hover{
	text-decoration: underline;
	color: #F81266;
}

#bild img{
	width: 100%;
	height: auto;
    margin-top: 16px;
    margin-bottom: 16px;
}

#textbereich {
	max-width: 800px;
    margin: auto;
    padding: 16px;
}

#textbereich h1{
	color: #F81266;
}

#textbereich h2{
	color: #F81266;
}

#textbereich a{
	text-decoration: none;
	color: gray;
}

#textbereich ul{
	list-style: none;
}

#Hase img{
	width: 40%;
	height: auto;
}

#Fisch img{
	width: 40%;
	height: auto;
}

#Kiwi_Vogel img{
	width: 40%;
	height: auto;
}

#Herz img{
	width: 40%;
	height: auto;
}

#Kleeblatt img{
	width: 40%;
	height: auto;
}
		

.gallery {
  width: 100%;
  height:auto;
  margin: 0 auto;
  overflow: hidden;
}

@media (min-width: 40em)  { 
.gallery {
  width: 40em;
  height: 40em;
}
}

@media (max-width: 60em)  { 
.gallery {
  width: 60em;
  height: 60em;
}
}
  
.gallery figure {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

.gallery figcaption {
  position: absolute;
  left: 1em;
  bottom: 1em;
  color: white;
}

.gallery img {
  width: 100%;
  margin: 0;
  padding: 0;  
}

.gallery figure {
  height: 100%;
  animation: slide 18s infinite ease-in-out;
}

.gallery:hover figure {
  animation-play-state: paused;
}

@keyframes slide {
    0%     {top: 0}
    12%  {top: 0}
    16%  {top: -100%}
    28%  {top: -100%}
    32%  {top: -200%}
    44%  {top: -200%}
    48%  {top: -300%}
    60%  {top: -300%}
    65%  {top: -400%}
    78%  {top: -400%}
    83%  {top: -500%}
    95%  {top: -500%}
    100% {top: 0}
}

#fussbereich{
	text-align: center;
    color: gray;
    padding: 16px;
}