/* --- PULSI PULSI --- */
#nav .navbar-toggler.pulsating{
	box-shadow: 0 0 0 #000000;
  	animation-name: pulsatingNav;
  	animation-duration: 0.6s;
  	animation-iteration-count: 6;
  	animation-direction: alternate;
}

@keyframes pulsatingNav{
  0%{
    box-shadow: 0 0 50px rgb(5, 117, 117);
  }
  100% {
    box-shadow: 0 0 10px rgb(5, 117, 117);
  }
}


/* --- Card Flip --- */
.card {
    perspective: 800px;
    height: 23vw;
    width: 50vw;
  border:none;
  position:relative;
  margin:0 auto;
}
@media(max-width:768px){
  .card {
    height: 45vw;
    width: calc(100vw - 2rem);
}
}

.card img {
    transform-style: preserve-3d;
    position: absolute;
    width: 100%;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}


.card_imgFront{
    animation-name: cardFront;
}

.card_imgBack{
    animation-name: cardBack;
}

.card_imgFront2{
    animation-name: cardFront2;
}

.card_imgBack2{
    animation-name: cardBack2;
}

/*
rotieren:   5% each for 180deg (2.5% for 90deg)
bild:       20% each
*/

@keyframes cardFront {
    0%, 20% {
        visibility: visible;
        transform: rotate3d(0, 1, 0, 0deg);
    }

    22.5%, 97.499% {
        transform: rotate3d(0, 1, 0, 90deg);
        visibility: hidden;
    }

    97.5% {
        transform: rotate3d(0, 1, 0, 90deg);
        visibility: visible;
    }

    100% {
        visibility: visible;
        transform: rotate3d(0, 1, 0, 0deg);
    }
}

@keyframes cardBack {
    0%, 22.49%{
        visibility: hidden;
        transform: rotate3d(0, 1, 0, 90deg) scaleX(-1);
    }

    22.5% {
        transform: rotate3d(0, 1, 0, 90deg) scaleX(-1);
        visibility: visible;
    }

    25%, 45% {
        transform: rotate3d(0, 1, 0, 180deg) scaleX(-1);
        visibility: visible;
    }

    47.5%, 100% {
        visibility: hidden;
        transform: rotate3d(0, 1, 0, 90deg) scaleX(-1);
    }
}

@keyframes cardFront2 {

    0%, 47.499% {
        visibility: hidden;
        transform: rotate3d(0, 1, 0, 90deg);
    }
    47.5% {
        transform: rotate3d(0, 1, 0, 90deg);
        visibility: visible;
    }

    50%, 70% {
        transform: rotate3d(0, 1, 0, 0deg);
        visibility: visible;
    }

    72.5%, 100% {
        transform: rotate3d(0, 1, 0, 90deg);
        visibility: hidden;
    }
}

@keyframes cardBack2 {
    0%, 72.499% {
        visibility: hidden;
        transform: rotate3d(0, 1, 0, 90deg) scaleX(-1);
    }

    72.5% {
        transform: rotate3d(0, 1, 0, 90deg) scaleX(-1);
        visibility: visible;
    }

    75%, 95% {
        transform: rotate3d(0, 1, 0, 180deg) scaleX(-1);
        visibility: visible;
    }

    97.5%, 100% {
        transform: rotate3d(0, 1, 0, 90deg) scaleX(-1);
        visibility: hidden;
    }
}
/* --- Card Flip --- */



/* --- Jump-Animation --- */

.animate_jump{animation: animate_jump 5s infinite}
@keyframes animate_jump{
	0%{transform: translate(0,0)}
	80%{transform: translate(0,0px)}
	85%{transform: translate(0,-30px)}	
	90%{transform: translate(0,0px)}
	93%{transform: translate(0,-15px)}
	96%{transform: translate(0,0px)}	
}
/* --- Jump-Animation --- */