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


/*CSS für die Animationen*/

.head-1-first-line {
	position: absolute;
	/*width: 80%;*/
	width: auto;
	left:55%;/*20*/
	bottom: 400px;/*290px*/
	padding: 10px 10px;
	color: rgb(255,255,255);
	background: rgb(0,75,155);
	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:1;
	
}

.head-1-second-line {
	position: absolute;
	width: 80vw;
	max-width: 450px;
	height: auto;
	left: 10%;
	bottom: 190px;/*100px*/
	/*padding: 0px 20px;*/
	color: rgb(255,255,255);
	background: rgb(0,75,155);
	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: 8s; 
  -webkit-animation-duration: 8s;
  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: 8s; 
  -webkit-animation-duration: 8s;
  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: 8s; 
  -webkit-animation-duration: 8s;
  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: 8s; 
  -webkit-animation-duration: 8s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  /* 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);*/
  }
  45% {
    opacity: 1;
    transform: translateY(0%);
	/*transform: rotate(0deg);*/
  }
  50% {
    opacity: 0;
    transform: translateX(20%);
  }
  100% {
    opacity: 0;
    transform: translatex(20%);
  } 
  
}

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

@keyframes slide-h2-1-animation {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  
  53% {
	 opacity: 0;
    transform: translateY(100%);
  }
	   
  58% {
    opacity: 1;
    transform: translateY(0%);
	/*transform: rotate(0deg);*/
  }
  91% {
    opacity: 1;
    transform: translateX(0%);
	/*transform: rotate(0deg);*/
  }
  
  96% {
    opacity: 0;
    transform: translateX(0%);
	/*transform: rotate(0deg);*/
  }
  
  100% {
    opacity: 0;
    transform: translateX(0%);
  }
  
}

@keyframes slide-h2-2-animation {
  0% {
    opacity: 0;
    transform: translateX(0%);
  }
  
  53% {
	 opacity: 0;
    transform: translateX(0%);
  }
	   
  58% {
    opacity: 1;
    transform: translateX(0%);
	/*transform: rotate(0deg);*/
  }
  
  91% {
    opacity: 1;
    transform: translateX(0%);
	/*transform: rotate(0deg);*/
  }
  
  96% {
    opacity: 0;
    transform: translateX(0%);
	/*transform: rotate(0deg);*/
  }
  100% {
    opacity: 0;
    transform: translateY(0%);
  }
  
}


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

.head-1-first-line {
	left: 400px;/*13%*/
	bottom: 15%;/*485px*/
	padding: 10px 20px;
	font-size:1.5em;
}


.head-1-second-line {
	left: 100px;
	bottom: 15%;/*200px*/
}

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

/*Animationen Home Keyframes 3 Slider*/

@keyframes slide-h1-1-animation {
  0% {
    opacity: 0;
    transform: translateY(100%);
  } 
  5% {
    opacity: 1;
    transform: translateY(-300px);
	/*transform: rotate(0deg);*/
  }
  45% {
    opacity: 1;
	/*translateY(-300 zeiht das Element an den oberen Rand des Bildes*/
    transform: translateY(-300px);
	/*transform: rotate(0deg);*/
  }
  50% {
    opacity: 0;
    transform: translateX(20%);
	transform: translateY(-300px);
  }
  100% {
    opacity: 0;
    transform: translatex(20%);
	transform: translateY(-300px);
  } 
  
}

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

@keyframes slide-h2-1-animation {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  
  53% {
	 opacity: 0;
    transform: translateY(100%);
  }
	   
  58% {
    opacity: 1;
	/*translateY(-300 zeiht das Element an den oberen Rand des Bildes*/
    transform: translateY(-300px);
	/*transform: rotate(0deg);*/
  }
  91% {
    opacity: 1;
    transform: translateX(0%);
	transform: translateY(-300px);
	/*transform: rotate(0deg);*/
  }
  
  96% {
    opacity: 0;
    transform: translateX(-0%);
	transform: translateY(-300px);
	/*transform: rotate(0deg);*/
  }
  
  100% {
    opacity: 0;
    transform: translateX(0%);
  }
  
}

@keyframes slide-h2-2-animation {
  0% {
    opacity: 0;
    transform: translateX(20%);
  }
  
  53% {
	 opacity: 0;
    transform: translateX(20%);
  }
	   
  58% {
    opacity: 1;
    transform: translateX(0%);
	/*transform: rotate(0deg);*/
  }
  
  91% {
    opacity: 1;
    transform: translateX(0%);
	/*transform: rotate(0deg);*/
  }
  
  96% {
    opacity: 0;
    transform: translateX(0%);
	/*transform: rotate(0deg);*/
  }
  100% {
    opacity: 0;
    transform: translateY(0%);
  }
  
}


}

@media screen and (min-height: 950px) {
	
	.head-1-first-line {
	left: 400px;/*13%*/
	bottom: 25%;/*485px*/
	padding: 10px 20px;
	font-size:1.5em;
}


.head-1-second-line {
	left: 100px;
	bottom: 25%;/*200px*/
}
	
}