div.Rahmen{
position:absolute;
width:100%;

background-color:white;
}

img.Front{
margin:0;
width:100%;
height:auto;
}

p.Titel{
margin:0;
text-align:center;
font-family:"Century Gothic";
font-size:50pt;
color:black;
background-color:white;
opacity:0.3;
}

p.Inhalt{
margin:0;
font-family:"Century Gothic";
font-size:20pt;
text-align:left;
background-color:white;
text-align:justify;
padding:3%;
}

div.Zaehler{
position:fixed;
bottom:0%;
left:calc((100% - 900px) / 2);
width:900px;
height:30px;
text-align:center;
font-family:"Century Gothic";
font-size:15pt;
color:black;
background-color:white;
opacity:0.7;
}

a:link,a:visited,a:hover,a:active {
display:block;
color:#a52a2a;
font-size:30pt;
font-family:"Century Gothic",Calibri;
cursor:pointer;
margin:0;

text-decoration:none;
}

a:hover{
color:#556B2f;
text-decoration:none;
}

p.Hinweistext{
display:block;
color:#a52a2a;
font-family:"Century Gothic",Calibri;
font-size:40pt;
text-align:center;
margin:0;
animation: Hinweis 12s ease infinite;
}

p.HinweistextStatic{
display:block;
color:#a52a2a;
font-family:"Century Gothic",Calibri;
font-size:40pt;
text-align:center;
margin:0;
}

@keyframes Hinweis {
0% {color:#a52a2a;}
50% {color:green;}
100% {color:#a52a2a;}
}

p.Countdown{
display:block;
color:#a52a2a;
font-family:"Century Gothic",Calibri;
font-size:18pt;
text-align:center;
margin:0;
margin-bottom:2%;
}



.image-fader {

}

.image-fader img {
  position: absolute;
  top: 0px;
  animation-name: imagefade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 24s;
  opacity:0;
}

@keyframes imagefade {
  0% {
    opacity:0;
  }
  50% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}


.spin{
  animation-name: spin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 6s;
  transform: rotate(0deg);
  opacity:1;
}

@keyframes spin {
  0% {
    transform:rotate(0deg);
  }
  20% {
    transform:rotate(-15deg);
  }
  80% {
    transform:rotate(15deg);
  }
  100% {
    transform:rotate(0deg);
  }
}


img.Front_no1 {
  animation-delay: 0s;
}
img.Front_no2 {
  animation-delay: 8s;
}
img.Front_no3 {
  animation-delay: 16s;
}


.grid-container {
  display: grid;
  grid-template-columns: 25% 50% 25%;
}