@charset "UTF-8";
/* CSS Document */


/*CSS für die Animationen*/

.head-1-first-line {
	position: absolute;
	/*width: 80%;*/
	width: auto;
	left: 10%;
	bottom: 157px;
	padding: 0px 20px;
	color: rgb(255,204,0);
	background: rgb(0,0,0);
	box-shadow:0px 0px 5px 5px rgba(0,0,0, 0.5);
	-moz-box-shadow:0px 0px 5px 5px rgba(0,0,0, 0.5);
	-webkit-box-shadow:0px 0px 5px 5px rgba(0,0,0, 0.5);
	/*font-weight: 300;*/
	/*display: none;*/
	visibility:hidden;
	z-index:1;
	
}

.head-1-second-line {
	position: absolute;
	/*width: 80%;*/
	width: auto;
	left: 20%;
	bottom: 100px;
	padding: 0px 20px;
	color: rgb(0,0,0);
	background: rgb(255,204,0);
	box-shadow:0px 0px 5px 5px rgba(0,0,0, 0.5);
	-moz-box-shadow:0px 0px 5px 5px rgba(0,0,0, 0.5);
	-webkit-box-shadow:0px 0px 5px 5px rgba(0,0,0, 0.5);
	/*font-weight: 300;*/
	/*display: none;*/
	visibility:hidden;
}

#head-3-1 {
	cursor: pointer;
}

#head-3 img {
	margin-bottom:-7px;
}


.slideanim {
	visibility:hidden;
}

.slide-h1-1 {
  /* The name of the animation */
  animation-name: slide-h1-1-animation;
  -webkit-animation-name: slide-h1-1-animation; 
  /* The duration of the animation */
  animation-duration: 16s; 
  -webkit-animation-duration: 16s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  /* Make the element visible */
  visibility: visible; 
}

.slide-h1-2 {
  /* The name of the animation */
  animation-name: slide-h1-2-animation;
  -webkit-animation-name: slide-h1-2-animation; 
  /* The duration of the animation */
  animation-duration: 16s; 
  -webkit-animation-duration: 16s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  /* Make the element visible */
  visibility: visible; 
}

/*Zweiter Slider*/
.slide-h2-1 {
  /* The name of the animation */
  animation-name: slide-h2-1-animation;
  -webkit-animation-name: slide-h2-1-animation; 
  /* The duration of the animation */
  animation-duration: 16s; 
  -webkit-animation-duration: 16s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  /* Make the element visible */
  visibility: visible; 
}

.slide-h2-2 {
  /* The name of the animation */
  animation-name: slide-h2-2-animation;
  -webkit-animation-name: slide-h2-2-animation; 
  /* The duration of the animation */
  animation-duration: 16s; 
  -webkit-animation-duration: 16s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  /* Make the element visible */
  visibility: visible; 
}

/*Dritter Slider*/
.slide-h3-1 {
  /* The name of the animation */
  animation-name: slide-h3-1-animation;
  -webkit-animation-name: slide-h3-1-animation; 
  /* The duration of the animation */
  animation-duration: 16s; 
  -webkit-animation-duration: 16s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  /* Make the element visible */
  visibility: visible; 
}

.slide-h3-2 {
  /* The name of the animation */
  animation-name: slide-h3-2-animation;
  -webkit-animation-name: slide-h3-2-animation; 
  /* The duration of the animation */
  animation-duration: 16s; 
  -webkit-animation-duration: 16s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  /* Make the element visible */
  visibility: visible; 
}

/*Animationen im Content*/

.slide {
  /* The name of the animation */
  animation-name: slide;
  -webkit-animation-name: slide; 
  /* The duration of the animation */
  animation-duration: 1s; 
  -webkit-animation-duration: 1s;
  /* Make the element visible */
  visibility: visible; 
}

/*Animationen Home Keyframes 3 Slider*/

@keyframes slide-h1-1-animation {
  0% {
    opacity: 0;
    transform: translateY(100%);
  } 
  5% {
    opacity: 1;
    transform: translateY(0%);
	/*transform: rotate(0deg);*/
  }
  25% {
    opacity: 1;
    transform: translateY(0%);
	/*transform: rotate(0deg);*/
  }
  33% {
    opacity: 0;
    transform: translateX(20%);
  }
  100% {
    opacity: 0;
    transform: translatex(20%);
  } 
  
}

@keyframes slide-h1-2-animation {
  0% {
    opacity: 0;
    transform: translateX(20%);
  } 
  5% {
    opacity: 1;
    transform: translateX(0%);
	/*transform: rotate(0deg);*/
  }
  25% {
    opacity: 1;
    transform: translateX(0%);
	/*transform: rotate(0deg);*/
  }
  33% {
    opacity: 0;
    transform: translateX(-20%);
  }
  100% {
    opacity: 0;
    transform: translateX(-20%);
  } 
  
}

@keyframes slide-h2-1-animation {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  
  33% {
	 opacity: 0;
    transform: translateY(100%);
  }
	   
  38% {
    opacity: 1;
    transform: translateY(0%);
	/*transform: rotate(0deg);*/
  }
  61% {
    opacity: 1;
    transform: translateX(0%);
	/*transform: rotate(0deg);*/
  }
  
  66% {
    opacity: 0;
    transform: translateX(0%);
	/*transform: rotate(0deg);*/
  }
  
  100% {
    opacity: 0;
    transform: translateX(0%);
  }
  
}

@keyframes slide-h2-2-animation {
  0% {
    opacity: 0;
    transform: translateX(20%);
  }
  
  33% {
	 opacity: 0;
    transform: translateX(20%);
  }
	   
  38% {
    opacity: 1;
    transform: translateX(0%);
	/*transform: rotate(0deg);*/
  }
  
  61% {
    opacity: 1;
    transform: translateX(0%);
	/*transform: rotate(0deg);*/
  }
  
  66% {
    opacity: 0;
    transform: translateX(0%);
	/*transform: rotate(0deg);*/
  }
  100% {
    opacity: 0;
    transform: translateY(0%);
  }
  
}

@keyframes slide-h3-1-animation {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  
  66% {
	 opacity: 0;
    transform: translateY(100%);
  }
	   
  71% {
    opacity: 1;
    transform: translateY(0%);
	/*transform: rotate(0deg);*/
  }
  95% {
    opacity: 1;
    transform: translateX(0%);
	/*transform: rotate(0deg);*/
  }
  100% {
    opacity: 0;
    transform: translateX(0%);
  }
  
}

@keyframes slide-h3-2-animation {
  0% {
    opacity: 0;
    transform: translateX(20%);
  }
  
  66% {
	 opacity: 0;
    transform: translateX(20%);
  }
	   
  71% {
    opacity: 1;
    transform: translateX(0%);
	/*transform: rotate(0deg);*/
  }
  95% {
    opacity: 1;
    transform: translateX(0%);
	/*transform: rotate(0deg);*/
  }
  100% {
    opacity: 0;
    transform: translateY(0%);
  }
  
}

/*Keyframes im Content 1 Slider*/

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
  0% {
    opacity: 0;
    transform: translateY(100%);
	/*es ist nur eine transform Eigenschaft mögich hier vertikal*/
	/*transform: rotate(-5deg);*/
  } 
  100% {
    opacity: 1;
    transform: translateY(0%);
	/*transform: rotate(0deg);*/
  } 
}

.slideanim2 {
	visibility:hidden;
}

.slide2 {
  /* The name of the animation */
  animation-name: slide2;
  -webkit-animation-name: slide2; 
  /* The duration of the animation */
  animation-duration: 1s; 
  -webkit-animation-duration: 1s;
  /* Make the element visible */
  visibility: visible; 
}

@keyframes slide2 {
  0% {
    opacity: 0;
    transform: translateX(40%);
	/*es ist nur eine transform Eigenschaft mögich hier horizontal*/
	/*transform: rotate(-5deg);*/
  } 
  100% {
    opacity: 1;
    transform: translateY(0%);
	/*transform: rotate(0deg);*/
  } 
}


/*Animierte Headline*/

.textanim {
	visibility: hidden;
}

.animated-text {
	visibility:visible;
	letter-spacing: 1px;
 	overflow: hidden;
 	word-wrap: break-word;
 	white-space: nowrap;
 	animation: typing 1s steps(24) forwards;
}

@keyframes typing {
  from { 
    width: 0;
  }

  to { 
    width: 24ch;/*width: 17ch;*/
  }
}