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


/*CSS für die Animationen*/

.head-1-first-line {
	position: absolute;
	/*width: 80%;*/
	width: auto;
	left: 20%;
	bottom: 290px;
	padding: 10px 10px;
	color: rgb(255,255,255);
	background: rgb(150,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: 700;
	font-size:1.1em;
	visibility:hidden;
	z-index:2;

}

.head-1-second-line {
	position: absolute;
	width: 80vw;
	max-width: 450px;
	height: auto;
	left: 10%;
	bottom: 100px;
	/*padding: 0px 20px;*/
	color: rgb(255,255,255);
	background: rgb(150,0,0);
	border: solid 10px rgb(255,255,255);
	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-1-second-line img {
	display:block;
}



.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: 21s;
  -webkit-animation-duration: 21s;
  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: 21s;
  -webkit-animation-duration: 21s;
  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: 21s;
  -webkit-animation-duration: 21s;
  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: 21s;
  -webkit-animation-duration: 21s;
  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: 21s;
  -webkit-animation-duration: 21s;
  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: 21s;
  -webkit-animation-duration: 21s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  /* Make the element visible */
  visibility: visible;
}

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

.slide-h4-2 {
  /* The name of the animation */
  animation-name: slide-h4-2-animation;
  -webkit-animation-name: slide-h4-2-animation;
  /* The duration of the animation */
  animation-duration: 21s;
  -webkit-animation-duration: 21s;
  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%);
    z-index: 0;
  } 
  3% {
    opacity: 1;
    transform: translateY(0%);
	/*transform: rotate(0deg);*/
    z-index: 2;
  }
  22% {
    opacity: 1;
    transform: translateY(0%);
	/*transform: rotate(0deg);*/
    z-index: 2;
  }
  25% {
    opacity: 0;
    transform: translateX(20%);
    z-index: 0;
  }
  100% {
    opacity: 0;
    transform: translateX(20%);
    z-index: 0;
  } 
  
}

@keyframes slide-h1-2-animation {
  0% {
    opacity: 0;
    transform: translateX(0%);
    z-index: -1;
  } 
  3% {
    opacity: 1;
    transform: translateX(0%);
    z-index: 1;
	/*transform: rotate(0deg);*/
  }
  22% {
    opacity: 1;
    transform: translateX(0%);
    z-index: 1;
	/*transform: rotate(0deg);*/
  }
  25% {
    opacity: 0;
    transform: translateX(-0%);
    z-index: -1;
  }
  100% {
    opacity: 0;
    transform: translateX(-0%);
    z-index: -1;
  } 
  
}

@keyframes slide-h2-1-animation {
  0% {
    opacity: 0;
    transform: translateY(100%);
    z-index: 0;
  }
  
  25% {
    opacity: 0;
    transform: translateY(100%);
    z-index: 0;
  }
	   
  28% {
    opacity: 1;
    transform: translateY(0%);
	/*transform: rotate(0deg);*/
    z-index: 2;
  }
  47% {
    opacity: 1;
    transform: translateX(0%);
	/*transform: rotate(0deg);*/
    z-index: 2;
  }
  
  50% {
    opacity: 0;
    transform: translateX(20%);
	/*transform: rotate(0deg);*/
    z-index: 0;
  }
  
  100% {
    opacity: 0;
    transform: translateX(20%);
    z-index: 0;
  }
  
}

@keyframes slide-h2-2-animation {
  0% {
    opacity: 0;
    transform: translateX(0%);
    z-index: -1;
  }
  
  25% {
    opacity: 0;
    transform: translateX(0%);
    z-index: -1;
  }
	   
  28% {
    opacity: 1;
    transform: translateX(0%);
    z-index: 1;
	/*transform: rotate(0deg);*/
  }
  
  47% {
    opacity: 1;
    transform: translateX(0%);
    z-index: 1;
	/*transform: rotate(0deg);*/
  }
  
  50% {
    opacity: 0;
    transform: translateX(0%);
    z-index: -1;
	/*transform: rotate(0deg);*/
  }
  100% {
    opacity: 0;
    transform: translateY(0%);
    z-index: -1;
  }
  
}

@keyframes slide-h3-1-animation {
  0% {
    opacity: 0;
    transform: translateY(100%);
    z-index: 0;
  }
  
  50% {
    opacity: 0;
    transform: translateY(100%);
    z-index: 0;
  }
	   
  53% {
    opacity: 1;
    transform: translateY(0%);
	/*transform: rotate(0deg);*/
    z-index: 2;
  }
  72% {
    opacity: 1;
    transform: translateX(0%);
	/*transform: rotate(0deg);*/
    z-index: 2;
  }
  75% {
    opacity: 0;
    transform: translateX(20%);
    z-index: 0;
  }
  100% {
    opacity: 0;
    transform: translateX(20%);
    z-index: 0;
  }
  
}

@keyframes slide-h3-2-animation {
  0% {
    opacity: 0;
    transform: translateX(0%);
    z-index: -1;
  }
  
  50% {
    opacity: 0;
    transform: translateX(0%);
    z-index: -1;
  }
	   
  53% {
    opacity: 1;
    transform: translateX(0%);
    z-index: 1;
	/*transform: rotate(0deg);*/
  }
  72% {
    opacity: 1;
    transform: translateX(0%);
    z-index: 1;
	/*transform: rotate(0deg);*/
  }
  75% {
    opacity: 0;
    transform: translateY(0%);
    z-index: -1;
  }
  100% {
    opacity: 0;
    transform: translateY(0%);
    z-index: -1;
  }
  
}

@keyframes slide-h4-1-animation {
  0% {
    opacity: 0;
    transform: translateY(100%);
    z-index: 0;
  }

  75% {
    opacity: 0;
    transform: translateY(100%);
    z-index: 0;
  }

  78% {
    opacity: 1;
    transform: translateY(0%);
	/*transform: rotate(0deg);*/
    z-index: 2;
  }
  97% {
    opacity: 1;
    transform: translateX(0%);
	/*transform: rotate(0deg);*/
    z-index: 2;
  }
  100% {
    opacity: 0;
    transform: translateX(20%);
    z-index: 0;
  }

}

@keyframes slide-h4-2-animation {
  0% {
    opacity: 0;
    transform: translateX(0%);
    z-index: -1;
  }

  75% {
	 opacity: 0;
    transform: translateX(0%);
    z-index: -1;
  }

  78% {
    opacity: 1;
    transform: translateX(0%);
    z-index: 1;
	/*transform: rotate(0deg);*/
  }
  97% {
    opacity: 1;
    transform: translateX(0%);
    z-index: 1;
	/*transform: rotate(0deg);*/
  }
  100% {
    opacity: 0;
    transform: translateY(0%);
    z-index: -1;
  }

}

/*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(90%);/*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: translateY(40%);
     /*es ist nur eine transform Eigenschaft mögich hier horizontal*/
     /*transform: rotate(-5deg);*/
   }
   100% {
     opacity: 1;
     transform: translateY(0%);
     /*transform: rotate(0deg);*/
   }
 }

/*Desktop Version*/

@media screen and (min-width: 750px) {

.head-1-first-line {
	bottom: 380px;
	padding: 10px 20px;
	font-size:1.5em;
}

@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: translateX(0%);
    /*transform: rotate(0deg);*/
  }
}

/*hier mit horizontaler Animation für die Bilder*/

/*Animationen Home Keyframes 3 Slider*/

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

@keyframes slide-h2-2-animation {
  0% {
    opacity: 0;
    transform: translateX(20%);
    z-index: -1;
  }
  
  25% {
	opacity: 0;
    transform: translateX(20%);
    z-index: -1;
  }
	   
  28% {
    opacity: 1;
    transform: translateX(0%);
    z-index: 1;
	/*transform: rotate(0deg);*/
  }
  
  47% {
    opacity: 1;
    transform: translateX(0%);
    z-index: 1;
	/*transform: rotate(0deg);*/
  }
  
  50% {
    opacity: 0;
    transform: translateX(-20%);
    z-index: -1;
	/*transform: rotate(0deg);*/
  }
  100% {
    opacity: 0;
    transform: translateY(0%);
    z-index: -1;
  }
  
}

@keyframes slide-h3-2-animation {
  0% {
    opacity: 0;
    transform: translateX(20%);
    z-index: -1;
  }
  
  50% {
	opacity: 0;
    transform: translateX(20%);
    z-index: -1;
  }
	   
  53% {
    opacity: 1;
    transform: translateX(0%);
    z-index: 1;
	/*transform: rotate(0deg);*/
  }
  72% {
    opacity: 1;
    transform: translateX(0%);
    z-index: 1;
	/*transform: rotate(0deg);*/
  }
  75% {
    opacity: 0;
    transform: translateX(-20%);
    z-index: -1;
  }
  100% {
    opacity: 0;
    transform: translateY(0%);
    z-index: -1;
  }
  
}

@keyframes slide-h4-2-animation {
  0% {
    opacity: 0;
    transform: translateX(20%);
    z-index: -1;
  }

  75% {
	opacity: 0;
    transform: translateX(20%);
    z-index: -1;
  }

  78% {
    opacity: 1;
    transform: translateX(0%);
    z-index: 1;
	/*transform: rotate(0deg);*/
  }
  97% {
    opacity: 1;
    transform: translateX(0%);
    z-index: 1;
	/*transform: rotate(0deg);*/
  }
  100% {
    opacity: 0;
    transform: translateX(-20%);
    z-index: -1;
  }

}



}