/* = = = = = = = = = = = = = = = = = datei animation.css = = = = = = = = = = = = = = = = = = = = = = = = = */

/* ############################################################ */
/* diese datei regelt die css-keyframes-animationen  */
/* 1. bildwechsler (slideshow) -  im logo-bereich - startet automatisch */
/* ############################################################ */


/* ############################################################ */
/* SLIDESHOW - BILDWECHSLER */
/* ############################################################ */

.logo-main .slideshow {position: absolute;
padding:1rem;
margin:0rem;
width:100%;height:100%;
background-size:cover;
}

.logo-main .bild1 {background-image:url(images/logo.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
}

.logo-main .bild2 {background-image:url(images/waldweg.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
}

.logo-main .bild3 {background-image:url(images/bussard.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
}

.logo-main .bild4 {background-image:url(images/fantasy.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
}

.logo-main .bild5 {background-image:url(images/blume.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
}

.logo-main .bild6 {background-image:url(images/seespiegel.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
}

.logo-main .bild7 {background-image:url(images/pegasus.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
}

.logo-main .bild8 {background-image:url(images/wolf.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
}

.logo-main .bild9 {background-image:url(images/galaxie.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
}

.logo-main .bild10 {background-image:url(images/tier.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
}

.logo-main .bild11 {background-image:url(images/baeume.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
}

/* .bild-inhalt-wrapper , .bild-inhalt , .bild-inhalt h3 , .button{display:none
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* safari, chrome browser */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


@-webkit-keyframes show1 {
0% {visibility:visible;}
20% {visibility:visible;}
25% {visibility:hidden;}
95% {visibility:hidden;}
}

@-webkit-keyframes show2 {
0% {visibility:hidden;}
20% {visibility:hidden;}
25% {visibility:visible;}
45% {visibility:visible;}
50% {visibility:hidden;}
100% {visibility:hidden;}
}

@-webkit-keyframes show3 {
0% {visibility:hidden;}
45% {visibility:hidden;}
50% {visibility:visible;}
70% {visibility:visible;}
75% {visibility:hidden;}
100% {visibility:hidden;}
}

@-webkit-keyframes show4 {
0% {visibility:hidden;}
70% {visibility:hidden;}
75% {visibility:visible;}
95% {visibility:visible;}
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* allen anderen, neueren browser */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


@keyframes show1 {
0% {visibility:visible;}
20% {visibility:visible;}
25% {visibility:hidden;}
95% {visibility:hidden;}
}

@keyframes show2 {
0% {visibility:hidden;}
20% {visibility:hidden;}
25% {visibility:visible;}
45% {visibility:visible;}
50% {visibility:hidden;}
100% {visibility:hidden;}
}

@keyframes show3 {
0% {visibility:hidden;}
45% {visibility:hidden;}
50% {visibility:visible;}
70% {visibility:visible;}
75% {visibility:hidden;}
100% {visibility:hidden;}
}

@keyframes show4 {
0% {visibility:hidden;}
70% {visibility:hidden;}
75% {visibility:visible;}
95% {visibility:visible;}
}



/* ===================================== ab 640 pixel ================================= */


@media (min-width: 640px) {

.bild-inhalt-wrapper , .bild-inhalt , .bild-inhalt h3 , .button{display:block;
}


.bild-inhalt-wrapper  {height:100%;width:95vw;
padding:1rem;margin:0 auto;
}

.bild-inhalt  {overflow:hidden;
width:40rem;height:80%;
border:solid 1px black;
padding:1rem;
background:rgba(0 , 0 , 0, .6);
color:#fff;
box-shadow:0rem 0rem .1rem black;
text-shadow:0.1rem 0.1rem .1rem black;
border-radius:1rem;
}

.fa-wrapper {display:block;text-align:right;
}


.bild-inhalt .fa {
color:lightskyblue;
text-shadow:.1rem .1rem .1rem black;
}

.bild-inhalt h3 {display:block;margin-top: 0rem;color:deepskyblue;
text-align:left;
margin-bottom:.5rem;
}

.button {
display:inline;
border:solid 0.1rem;
border-color:black;
box-shadow:0rem 0rem .1rem black;
border-radius:.5rem;
min-height:4rem;
line-height:4rem;
padding:.5rem 1rem .5rem 1rem;
text-align:center;
background:black;
background:rgba(0 , 0 , 0, .6);
}

.button a {color:lightskyblue;
text-decoration:none;
}

.button a:hover {color:white;
}

}


/* ===================================== ab 1024 pixel ================================= */

@media (min-width: 1024px) {

.bild-inhalt-wrapper  {
width:95vw;
}

}

/* ===================================== ab 1100 pixel ================================= */

@media (min-width: 1100px) {


.bild-inhalt-wrapper  {
width:80vw;
}


}

/* ===================================== ab 1200 pixel ================================= */

@media (min-width: 1200px) {



.bild-inhalt-wrapper  {
width:75vw;
}


}

/* ===================================== ab 1480 pixel ================================= */

@media (min-width: 1480px) {

.bild-inhalt-wrapper  {
width:70vw;
}

}