.top-down {
  -webkit-animation: first-topdown 2.5s ease-in-out 0s infinite alternate;
  animation: first-topdown 1.5s ease-in-out 0s infinite alternate;
  animation-duration: 2.5s;
  animation-duration: 4s;
}

@-webkit-keyframes first-topdown {
    0% {
        -webkit-transform: rotateX(0deg) translateY(0px);
        -moz-transform: rotateX(0deg) translateY(0px);
        -ms-transform: rotateX(0deg) translateY(0px);
        -o-transform: rotateX(0deg) translateY(0px);
        transform: rotateX(0deg) translateY(0px);
    }

    50% {
        -webkit-transform: rotateX(0deg) translateY(-10px);
        -moz-transform: rotateX(0deg) translateY(-10px);
        -ms-transform: rotateX(0deg) translateY(-10px);
        -o-transform: rotateX(0deg) translateY(-10px);
        transform: rotateX(0deg) translateY(-10px);
    }

    100% {
        -webkit-transform: rotateX(0deg) translateY(0px);
        -moz-transform: rotateX(0deg) translateY(0px);
        -ms-transform: rotateX(0deg) translateY(0px);
        -o-transform: rotateX(0deg) translateY(0px);
        transform: rotateX(0deg) translateY(0px);
    }
}

@keyframes first-topdown {
    0% {
        -webkit-transform: rotateX(0deg) translateY(0px);
        -moz-transform: rotateX(0deg) translateY(0px);
        -ms-transform: rotateX(0deg) translateY(0px);
        -o-transform: rotateX(0deg) translateY(0px);
        transform: rotateX(0deg) translateY(0px);
    }

    50% {
        -webkit-transform: rotateX(0deg) translateY(-10px);
        -moz-transform: rotateX(0deg) translateY(-10px);
        -ms-transform: rotateX(0deg) translateY(-10px);
        -o-transform: rotateX(0deg) translateY(-10px);
        transform: rotateX(0deg) translateY(-10px);
    }

    100% {
        -webkit-transform: rotateX(0deg) translateY(0px);
        -moz-transform: rotateX(0deg) translateY(0px);
        -ms-transform: rotateX(0deg) translateY(0px);
        -o-transform: rotateX(0deg) translateY(0px);
        transform: rotateX(0deg) translateY(0px);
    }
}


.text-1 {
  animation: hideshow 5s ease infinite;
}
.text-2 {
  opacity: 0;
  animation: hideshow 10s 1.5s ease infinite;
}
.text-3 {
  opacity: 0;
  animation: hideshow 10s 3s ease infinite;
}
.text-4 {
  opacity: 0;
  animation: hideshow 5s 1s ease infinite;
}

@keyframes hideshow {
  0% { opacity: 1; }
  10% { opacity: 1; }
  20% { opacity: 0; }
  100% { opacity: 0; }
}

#atom .icon,
#dna .icon {
	transform-box: fill-box;
	transform-origin: center center;
}
#atom .icon {
	animation: anicolor 9.0s linear infinite 1s;
}
.aaaa {
	animation: anicolor 9.5s linear infinite 4s;
}
@keyframes anicolor {
	from {
	/*fill: #3CA8E0;*/
	transform: rotate(0deg);
	}

	to {
	/*fill: #3CA8E0;*/
	/*transform-origin: initial;*/
	transform: rotate(359deg);
	}
}
#test .rotats-1{
	transform-box: fill-box;
	transform-origin: center center;
	animation: rotat-2 9.0s linear infinite 1s;
}


@keyframes rotat-2 {
	from {
	/*fill: #3CA8E0;*/
	transform: rotate(0deg);
	}

	to {
	/*fill: #3CA8E0;*/
	/*transform-origin: initial;*/
	transform: rotate(359deg);
	}
}

.rein-raus {
	opacity: 0;
    animation: einblenden 6s ease infinite;
}

@keyframes einblenden {
    0% { opacity:1; }
    60% { opacity:1; }
    75% { opacity:0; }
    100% { opacity:0; }    
}

.animation-1{
	animation-name:show-1;
	animation-duration:6s;
	animation-delay:5s;
	animation-iteration-count:infinite;
	animation-timing-function:ease;
}

@keyframes show-1 {
	0%, 20% { transform:rotate(360deg); }
	20%, 25%  { transform:rotate(360deg); }
	25%, 30% { opacity:1; }
	30%, 100% { opacity:0; }  
}

.vibration{
	animation: vibrate 3s ease 0s infinite normal none;
}
@keyframes vibrate {
  0% {transform: translate(0);}
  20% {transform: translate(2px, -2px);}
  40% {transform: translate(2px, 2px);}
  60% {transform: translate(-2px, 2px);}
  80% {transform: translate(-2px, -2px);}
  100% {transform: translate(0);}
}

.blinken-1{
	animation: blink-1 6s ease 0s infinite normal forwards;
}
@keyframes blink-1 {
  0%,
  50%,
  100% {
	opacity: 1;
  }

  25%,
  75% {
	opacity: 0;
  }
}
.blinken-2{
	animation: blink-2 8s ease 0s infinite normal forwards;
}
@keyframes blink-2 {
  0%,
  50%,
  100% {
	opacity: 1;
  }

  25%,
  75% {
	opacity: 0;
  }
}