/* ====== DREHUNG  ======  */

.drehen img {
-webkit-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

.drehen img:hover{
-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}


/* ====== BEBEN ======  */

.beben img:hover, .beben div:hover {
-webkit-animation-name: beben;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-name: beben;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}


@-webkit-keyframes beben {
0% { transform: rotate(0deg) translate(2px, 1px); }
10% { transform: rotate(2deg) translate(1px, 2px); }
20% { transform: rotate(-2deg) translate(3px, 0px) ; }
30% { transform: rotate(0deg) translate(0px, -2px); }
40% { transform: rotate(-2deg) translate(-1px, 1px); }
50% { transform: rotate(2deg) translate(1px, -2px); }
60% { transform: rotate(0deg) translate(3px, -1px); }
70% { transform: rotate(2deg) translate(-2px, -1px); }
80% { transform: rotate(-2deg) translate(1px, 1px); }
90% { transform: rotate(0deg) translate(-2px, -2px); }
100% { transform: rotate(2deg) translate(-1px, 2px); }
}


@keyframes beben {
0% { transform: rotate(0deg) translate(2px, 1px); }
10% { transform: rotate(2deg) translate(1px, 2px); }
20% { transform: rotate(-2deg) translate(3px, 0px) ; }
30% { transform: rotate(0deg) translate(0px, -2px); }
40% { transform: rotate(-2deg) translate(-1px, 1px); }
50% { transform: rotate(2deg) translate(1px, -2px); }
60% { transform: rotate(0deg) translate(3px, -1px); }
70% { transform: rotate(2deg) translate(-2px, -1px); }
80% { transform: rotate(-2deg) translate(1px, 1px); }
90% { transform: rotate(0deg) translate(-2px, -2px); }
100% { transform: rotate(2deg) translate(-1px, 2px); }
}




/* ====== VERZERRUNG  ======  */

.verzerr img, .verzerr div {
-webkit-transition: all 2s  ease-out;
transition: all 2s  ease-out ;
}

.verzerr img:hover, .verzerr div:hover{
-webkit-transform: skewX(-30deg);
transform: skewX(-30deg) ;
}


/* ====== AUSBLENDEN ======  */

.ausblend img, .ausblend div {
-webkit-transition: all 1s  ease-out;
transition: all 1s  ease-out ;
opacity:1;overflow:hidden
}


.ausblend img:hover, .ausblend div:hover{
opacity:0.2;
}



/* ====== TEXTÜBERLAGERUNG-SCHIEBEEFFEKT ======  */

.container_fotos1 {
position:relative;
overflow:hidden;
}
.container_fotos1 .textbox {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
margin-top:-70rem;padding:1rem;
color:#000;

background-color: rgba(255,255,255,0.4);
text-shadow:0rem 0rem 0.1rem #BFBFBF ;
}

.textbox {
-webkit-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}

.container_fotos1:hover .textbox {
margin:0;
}

/* ----- ab 600 PX -----  */
@media (min-width: 600px) {

.container_fotos1 .textbox {
line-height:1;
}

}

/* ----- ab 1024 PX -----  */
@media (min-width: 1024px) {

.container_fotos1 .textbox {
line-height:1.3;
}

}

/* ----- ab 1280 PX -----  */
@media (min-width: 1280px) {

.container_fotos1 .textbox {
line-height:1.4;
}

}

/* ====== (2)TEXTÜBERLAGERUNG-SCHIEBEEFFEKT ======  */

.container_fotos2 {
position:relative;
overflow:hidden;
}
.container_fotos2 .textbox {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
margin-left:-80rem;padding:1rem;
color:#000;
background-color: rgba(178,34,34,0.7);
text-shadow:0rem 0rem 0.1rem #BFBFBF ;
}

.textbox {
-webkit-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}

.container_fotos2:hover .textbox {
margin:0;
}

/* ----- ab 600 PX -----  */
@media (min-width: 600px) {

.container_fotos2 .textbox {
line-height:1;
}

}


/* ----- ab 1024 PX -----  */
@media (min-width: 1024px) {

.container_fotos2 .textbox {
line-height:1.3;
}

}

/* ----- ab 1280 PX -----  */
@media (min-width: 1280px) {

.container_fotos2 .textbox {
line-height:1.4;
}


}

/* / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / */