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

/* diese datei regelt die css-animationen  */





/* ############################################################ */
/* backposmovie-1 */
/* ############################################################ */

.backposmovie-1 {

animation: backposmovie-1  40s infinite  ;
animation-fill-mode:forwards;
}

@keyframes backposmovie-1 {
0%   {background-position:   0% 50%; }
100% {background-position: 100%  0% ;}

}

/* ############################################################ */
/* backposmovie-2 */
/* ############################################################ */

.backposmovie-2 {
animation: backposmovie-2  80s infinite;
}

@keyframes backposmovie-2 {
0% {background-position:50% 100%;}
50% {background-position:50% 0%;}
100% {background-position:50% 100%;}
}


/* ############################################################ */
/* backposmovie-3 */
/* ############################################################ */

.backposmovie-3 {
animation: backposmovie-3 40s infinite ;
animation-fill-mode:forwards;
}

@keyframes backposmovie-3 {
0%   {background-position:  0%  50%, -50%   0%, 0% 100%;}
100% {background-position:140% 100%, 200% 100%,  260%  0%;}
}


/* ############################################################ */
/* backposmovie-4 */
/* ############################################################ */

.backposmovie-4 {

animation: backposmovie-4  40s infinite  ;
animation-fill-mode:forwards;
}

@keyframes backposmovie-4 {
0%   {background-position:100%  100%, 100%  0%,  100% 100% }
100% {background-position:-130% 0%, -80%  100%, -300%  -250% ;}
}




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


.gallery-1a {background-image:url("../im/gastgeben/01_small.jpg");
background-repeat:no-repeat;
background-position:50% 50%;
animation:show1 infinite 60s;
}

.gallery-1b {background-image:url("../im/gastgeben/1_small.jpg");
background-repeat:no-repeat;
background-position:50% 50%;
animation:show2 infinite 60s;
}

.gallery-1c {background-image:url("../im/gastgeben/3_small.jpg");
background-repeat:no-repeat;
background-position:50% 50%;
animation:show3 infinite 60s;
}

.gallery-1d {background-image:url("../im/gastgeben/8_small.jpg");
background-repeat:no-repeat;
background-position:50% 50%;
animation:show4 infinite 60s;
}

.gallery-1e {background-image:url("../im/natur/w4.jpg");
background-repeat:no-repeat;
background-position:50% 50%;
animation:show4 infinite 60s;

*/
}

.gallery-2a {background-image:url("../im/gastgeben/haus/h1.jpg");
background-repeat:no-repeat;
background-position:50% 50%;
animation:show1 infinite 60s,backposmovie-2 60s infinite linear;
}

.gallery-2b {background-image:url("../im/gastgeben/links/w/1.jpg");
background-repeat:no-repeat;
background-position:50% 50%;
animation:show2 infinite 60s,backposmovie-2 60s infinite linear;
}

.gallery-2c {background-image:url("../im/gastgeben/rechts/w/4.jpg");
background-repeat:no-repeat;
background-position:50% 50%;
animation:show3 infinite 60s,backposmovie-2 60s infinite linear;
}

.gallery-2d {background-image:url("../im/gastgeben/souterrain/w/1.jpg");
background-repeat:no-repeat;
background-position:50% 50%;
animation:show4 infinite 60s,backposmovie-2 60s infinite linear;
}

.gallery-2e {background-image:url("../im/natur/w4.jpg");
background-repeat:no-repeat;
background-position:50% 50%;
animation:show4 infinite 60s,backposmovie-2 60s infinite linear;
}



@keyframes show1 {
0% {opacity:1;}
20% {opacity:1;}
25% {opacity:0;}
95% {opacity:0;}
}

@keyframes show2{
0% {opacity:0;}
20% {opacity:0;}
25% {opacity:1;}
45% {opacity:1;}
50% {opacity:0;}
100% {opacity:0;}
}

@keyframes show3 {
0% {opacity:0;}
45% {opacity:0;}
50% {opacity:1;}
70% {opacity:1;}
75% {opacity:0;}
100% {opacity:0;}
}

@keyframes show4 {
0% {opacity:0;}
70% {opacity:0;}
75% {opacity:1;}
95% {opacity:1;}

}

/* ############################################################ */
/* Animation | bigscale (Vergrössern mit scale - (Wert 1= mittel, darunter verkleinert, darüber vergrössert*/
/* ############################################################ */


.bigscale {
transition: all .8s ease-out;
}

.bigscale:hover {z-index:1;
transform:scale(2) ;
}



/* ############################################################ */
/* Animation | flip - perspektiv */
/* ############################################################ */

.flip-perspektiv {
animation: flip-perspektiv 26s infinite;
}


@keyframes flip-perspektiv {
0% {transform:perspective(0px) rotateX(0deg) rotateY(0deg);}
50% {transform:perspective(800px) rotateX(-360deg) rotateY(-360deg);}
100% {transform:perspective(800px) rotateX(360deg) rotateY(360deg);}
}


/* ############################################################ */
/* WENDEN */
/* ############################################################ */

.wenden {
transition: all 2s  ;

}

.wenden:hover {
transform:perspective(1000px) rotateY(360deg);
}


/* ############################################################ */
/* WENDEN 2 */
/* ############################################################ */

.wenden2 {
transition: all 2s  ;
}

.wenden2:hover {
transform:perspective(1000px) rotateX(360deg);
}



/* ############################################################ */
/* Animation | drehen  */
/* ############################################################ */

.drehen {
transition: all .8s ;
}

.drehen:hover {
transform:rotate(1080deg);
}


/* ############################################################ */
/* Animation | drehen 2 */
/* ############################################################ */

.drehen2 {
transition: all 2.8s ;
}

.drehen2:hover {
transform:rotate(360deg);
}


/* ############################################################ */
/* Animation | slide-right  */
/* ############################################################ */


.slide-right {
transition: all .6s  ;
}

.slide-right:hover  {
transform: translateX(50px)  ;
}