/* ALLGEMEIN ------------------------------------------------------ */

* {
    padding: 0;
    margin: 0;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

body {
    background: url(bilder/layout/spring.jpg) no-repeat #4a6312;
    background-size: 100% auto;
    font-size: 1em;
    font-family: arial, verdana, sans-serif;
}

input[type='button'], button {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.3);
	padding: 2px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 5px;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
	cursor: pointer;
}

input[type='button']:hover, button:hover {
	background-color: rgba(255, 255, 255, 0.5);
}

h1 {
    text-align: center;
    margin: 1em;
}

h2 {
    font-size: 1.2em;
    text-align: center;
    margin: 0.5em;
}

.spoiler .spoiler_text {
	display: none;
	margin-top: 5px;
	padding-left: 5px;	
}

.button {
    margin-top: 5px;
} 

button {
    font-size: larger;
    padding: 10px 20px;
    border-width: 2px;
    border-radius: 10px
}

a {
    color: black;
    text-decoration: none;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

ul, ol {
    list-style-position: inside;
}

li {
    padding-bottom: 5px;
}

input {
    font-family: inherit;    
    border: solid 1px black;    
}

input[type="text"], input[type="password"] {
    background: rgba(255, 255, 255, 0.7);
    padding: 1px;
}

input[type="submit"] {
    font-weight: bold;
    background: white;
    padding: 3px;
} 

.italic {
    font-style: italic;
}

table {
    border-collapse: collapse;
}

.table_border th,
.table_border td {
    border: solid black 1px;
    background-color: white;
    padding: 5px;
}

.table_responsive tr {
    padding: 5px 0px;
}

.table_responsive td {
    padding-right: 5px;
}

@media (max-width: 575px)
{
    .table_responsive tr, .table_responsive td {
        display: block;
        text-align: left;
    }
}

@media (max-width: 575px)
{
    .desktop {
        display: none !important;
    }
}

.align_center {
    text-align: center;
}
.align_right {
    text-align: right;
}   

/* GALLERIE ------------------------------------------------------- */

#gallery {
  position: relative;
  width: 100%;
  overflow: hidden;  
}

#gallery figure {
    width: 100%;
    height: auto;
}

#gallery img {
    width: 100%;
    height: auto;
}

#logo {
    top: 0;
    right: 0;
    position: absolute;
    width: 15%;
    height: auto;
    padding-top: 10px;
    margin-right: 10px;    
}

#logo img {
    position: absolute;
    z-index: 4;
}

#login {
    top: 0;
    left: 0;
    position: absolute;
    z-index: 5;
    padding-top: 10px;
    padding-left: 10px;
}

#pferd {
    top: 33%;
    left: 30%;
    position: absolute;
    width: 30%;
    height: auto;    
}

.bild {
    position: absolute;
    z-index: 2;
}

#hintergrund {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.slideshow {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#bild17 {
  position: relative;
}

@media (max-width: 1600px)
{
    #gallery img {width: 120%;}
    #pferd {left: 28%;}
    #logo {right: 3%;}    
}

@media (max-width: 1200px)
{
    #gallery img {width: 140%;}
    #pferd {left: 26%;}
    #logo {right: 6%;}
}

@media (max-width: 800px)
{
    #gallery img {width: 160%;}
    #pferd {left: 22%;}
    #logo {right: 9%;}
}

@media (max-width: 600px)
{
    #gallery img {width: 200%;}
    #pferd {left: 18%;}
    #logo {right: 15%;}
}

@media (max-width: 400px)
{
    #gallery img {width: 240%;}
    #pferd {left: 14%;}
    #logo {right: 21%;}
}  

/* TEXT ----------------------------------------------------------- */

#textbereich, #textpage {
  margin-top: -25px;
  margin-bottom: 25px;
  z-index: 3;
  position: absolute;
  width: 100%;
  height: auto;
  justify-content: center;
  
}

#textpage {
    margin-top: 5%;
}

#text_inner, #volltext {    
    padding: 20px;
    padding-bottom: 0px;
    margin: 0 10%;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    border: solid 1px black; 
    justify-content: center;
}

#textpage #text_inner {
    background: rgba(255, 255, 255, 0.5);
}

#volltext {
    background: #d3dcb7;
}

#text {
    max-width: 900px;
    margin: auto;
    text-align: center;    
    justify-content: center;
}

#text_breit {
    max-width: 1200px;
    margin: auto;
    text-align: center;
    justify-content: center;
}

#text_schmal {
    margin: auto;
}

.align_left {
    text-align: left !important;
}

#footer {
  padding-top: 50px;
  padding-bottom: 5px;
  text-align: center;
}
/*
#impressum {
  margin-top: -20%;
  z-index: 3;
  position: absolute;
  width: 100%;
  height: auto;
  justify-content: center;
}  */

/* SLIDESHOW ------------------------------------------------------ */
.slideshow {
  animation: wechseln 75s;
}

@keyframes wechseln {
    0% {opacity: 0;}
   20% {opacity: 1;}
   40% {opacity: 1;}
   60% {opacity: 0;}   
  100% {opacity: 0;}
}


#bild2 {
  animation-delay: 5s;
  opacity: 0;
}

#bild3 {
  animation-delay: 15s;
  opacity: 0;
}

#bild4 {
  animation-delay: 25s;
  opacity: 0;       
}

#bild5 {
  animation-delay: 35s;
  opacity: 0;
}

#bild6 {
  animation-delay: 45s;
  opacity: 0;
}

#bild7 {
  animation-delay: 55s;
  opacity: 0;
}

#bild8 {
  animation-delay: 65s;
  opacity: 0;
}

#bild9 {
  animation-delay: 75s;
  opacity: 0;
}

#bild10 {           
  animation-delay: 85s;
  opacity: 0;
}

#bild11 {
  animation-delay: 95s;
  opacity: 0;
}

#bild12 {
  animation-delay: 105s;
  opacity: 0;
}

#bild13 {
  animation-delay: 115s;
  opacity: 0;
}

#bild14 {
  animation-delay: 125s;
  opacity: 0;
}

#bild15 {
  animation-delay: 135s;
  opacity: 0;
}

#bild16 {
  animation-delay: 145s;
  opacity: 0;
}

#bild17 {
  animation-delay: 155s;
  opacity: 0;
}