.keycontainer {

position:relative;
display:inline-block;
float:right;
width:60%;
height:auto;
margin-left:20px;

	background-color:#aaa;
color:#eee;
	text-shadow:  none;

}

#schrift1, #schrift2, #schrift3 {
  font-size: 35px;
  line-height:1.2;
  margin-top:-60px;
}


@media (max-width:900px){
	#schrift1, #schrift2, #schrift3 {
  margin-top:-30px;
  line-height:1.5;
   font-size: 2.2vw;
}}
@media (max-width:500px){
	#schrift1, #schrift2, #schrift3 {
  margin-top:-18px;
  line-height:1.6;
   font-size: 2.5vw;
}}

#schrift1 span, #schrift2 span {
  width: 100%;
  float: left;
  color: #e0e4df;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  transform: translateY(-50px);
  opacity: 0;
  animation-name: titleAnimation;
  animation-timing-function: ease-in-out;
  animation-duration: 4s;



}

#schrift3 span {
  width: 100%;
  float: left;
  color: #e0e4dffff;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  transform: translateY(-50px);
  opacity: 0;
  animation-name: aniende;
  animation-timing-function: ease;
  animation-duration: 1s;
  animation-direction: normal;
}




#schrift1 {
  top: 0;
  position: absolute;
}

#schrift1 span {
  animation-delay: 3.6s;
  -webkit-animation-fill-mode: forwards;
}
#schrift1 span:first-child {
  animation-delay: 3.7s;
}
#schrift1 span:last-child {
  color: #e0e4df;
  animation-delay: 3.5s;
}

#schrift2 {
  top: 0;
  position: absolute;
}
#schrift2 span {
  animation-delay: 9.1s;
  -webkit-animation-fill-mode: forwards;
}
#schrift2 span:first-child {
  animation-delay: 9.2s;
    color: #e0e4df;
}
#schrift2 span:last-child {
  color: #e0e4df;
  animation-delay: 9s;
}

#schrift3 {
  top: 0;
  position: absolute;
}
#schrift3 span {
  animation-delay: 15.1s;
  -webkit-animation-fill-mode: forwards;color: #e0e4df;
}
#schrift3 span:first-child {
  animation-delay: 15.2s;
    color: #e0e4df;
}
#schrift3 span:last-child {
  color: #e0e4df;
  animation-delay: 15s;
}

@keyframes titleAnimation {
  0% {
    transform: translateY(-50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  }
  20% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
  80% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
  100% {
    transform: translateY(50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% 0%, 0 100%, 0 100%);
    clip-path: polygon(100% 0, 100% 0%, 0 100%, 0 100%);
  }
}



@keyframes aniende {
  0% {
    transform: translateY(-50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }

}