/* = = = = = = = = = = = = = = = = = 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%;
}

.logo-main .bild1 {background-image:url(images/logo1.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
-webkit-animation:show1 infinite 30s;
animation:show1 infinite  30s;
}

.logo-main .bild3 {background-image:url(images/Petra01.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
-webkit-animation:show3 infinite 30s;
animation:show3  infinite 30s;
}

.logo-main .bild4 {background-image:url(images/logo4.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
-webkit-animation:show4 infinite 30s;
animation:show4  infinite 30s;
}

.logo-main .bild5 {background-image:url(images/logo5.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
-webkit-animation:show5 infinite 30s;
animation:show5  infinite 30s;
}

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

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


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



@-webkit-keyframes show3 {
0% {visibility:hidden;}
35% {visibility:hidden;}
40% {visibility:visible;}
55% {visibility:visible;}
60% {visibility:hidden;}
100% {visibility:hidden;}
}

@-webkit-keyframes show4 {
0% {visibility:hidden;}
55% {visibility:hidden;}
60% {visibility:visible;}
75% {visibility:visible;}
80% {visibility:hidden;}
100% {visibility:hidden;}
}

@-webkit-keyframes show5 {
0% {visibility:hidden;}
75% {visibility:hidden;}
80% {visibility:visible;}
95% {visibility:visible;}
}


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


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



@keyframes show3 {
0% {visibility:hidden;}
35% {visibility:hidden;}
40% {visibility:visible;}
55% {visibility:visible;}
60% {visibility:hidden;}
100% {visibility:hidden;}
}

@keyframes show4 {
0% {visibility:hidden;}
55% {visibility:hidden;}
60% {visibility:visible;}
75% {visibility:visible;}
80% {visibility:hidden;}
100% {visibility:hidden;}
}

@keyframes show5 {
0% {visibility:hidden;}
75% {visibility:hidden;}
80% {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:35%;
/*border:solid 1px black;*/
padding:1rem;
background:rgba(0 , 0 , 0, .4);
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:#FFFFFF;
text-shadow:.1rem .1rem .1rem black;
}

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

.button {
display:inline;
border:solid 0.1rem;
border-color:white;
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, .4);
}

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

.button a:hover {color:#C40000;
}

}


/* ===================================== 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;
}

}