body{
	color:#222224;
	width:100%;
	margin:auto auto;
	background-color:white;
	font-family: 'Nunito', sans-serif;
	height:100%;
	font-size:22px;
}

header{
	text-align:center;
	min-height:200px;
}

img{
	margin-bottom:-6px;
}


a{
	text-decoration:none;
}

a:link{
	color:white;
}

a:visited{
	color:white;
}

a:hover{
	background-color:#162b4c;
	display:block;
}

h1{
	/* color:#26589b; */
	font-size:40px;
	color:#1e76bc;
}

h2{
	color:#1e76bc;
	font-size:30px;
	font-style:italic;
}

p{
	text-align:justify;
	padding-left:10px;
	padding-right:10px;
}



 #link-beratung {
	float:left;
	background-color:#1e76bc;

	margin: 5px auto;
	color:white;
	height:100px;
	width:300px;

	border-radius: 10px;
	box-shadow: 5px 10px 18px #888888;
	

}
 #link-beratung a {
	display: flex;
	align-items: center;
	justify-content: center;
	height:100%;
	color:white;
	font-size:35px;
	text-align:center;
}
 #link-beratung a:hover {
	height:100%;
	background-color:#26589b;
	border-radius: 10px;
}

 #link-uebermich {
	 float:left;
	background-color:#1e76bc;
	color:white;
	height:100px;
	width:300px;
margin: 5px auto;
	border-radius: 10px;

	box-shadow: 5px 10px 18px #888888;

}
 #link-uebermich a {
	display: flex;
	align-items: center;
	justify-content: center;
	height:100%;
	color:white;
	font-size:35px;
	text-align:center;
}
 #link-uebermich a:hover {
	height:100%;
	background-color:#26589b;
	border-radius: 10px;
}

 #link-Leistungen {
	 float:left;
	 background-color:#1e76bc;

	color:white;
	height:100px;
	width:300px;
margin: 5px auto;
	border-radius: 10px;
	
	box-shadow: 5px 10px 18px #888888;

}
 #link-Leistungen a {
	display: flex;
	align-items: center;
	justify-content: center;
	height:100%;
	color:white;
	font-size:35px;
	text-align:center;
}
 #link-Leistungen a:hover {
	height:100%;
	background-color:#26589b;
	border-radius: 10px;
}

 #link-kontakt {
	 float:left;
	 background-color:#1e76bc;

	color:white;
	height:100px;
	width:300px;
	margin: 5px auto;
	border-radius: 10px;
	
	box-shadow: 5px 10px 18px #888888;

}
 #link-kontakt a {
	display: flex;
	align-items: center;
	justify-content: center;
	height:100%;
	color:white;
	font-size:35px;
	text-align:center;
	  
}
 #link-kontakt a:hover {
	height:100%;
	background-color:#26589b;
	border-radius: 10px;
}


#Main{
	width:100%;
	height:100%;
}

nav{
	margin-top:20px;
	display: flex;
	justify-content: space-between;
	width:100%;
	height:120px;
}

#Beratung{
	clear:both;
	padding:45px;
	background-color:white;
}

#Beratung a{
	text-decoration:none;
}

#Beratung a:link{
	color:black;
}

#Beratung a:visited{
	color:black;
}

#Beratung a:hover{
	text-decoration:underline;
	background-color:white;
	display:inline;
}

#Leistungen{
	padding: 45px;
	
	background-image:linear-gradient(#fafafa,#fafafa);
	transform:skewY(2deg);
	transform-origin: top left;

	color:black;
	min-height:700px;
}

#Leistungen h1{
	color:white;
	font-size:60px;
	transform:skewY(-2deg);
}
#Leistungen h1 span{
	background-color:#1e76bc;
	padding-top:10px;
	padding-bottom:10px;
	margin-left:-360px;
	padding-left:70px;
	padding-right:120px;
	border-radius: 0px 50px 50px 0px;
	box-shadow: 5px 10px 18px #888888;
	
}
#Leistungen:hover h1 span{
	animation-duration: 1.0s;
	animation-name: slidein;
	-webkit-animation-duration: 1.0s;
	-webkit-animation-name: slidein;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode:forwards;
}
#Leistungen h1 span{
	margin-left:-45px;
	animation-duration: 1.0s;
	animation-name: slideout;
	-webkit-animation-duration: 1.0s;
	-webkit-animation-name: slideout;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode:forwards;
}


@keyframes slidein {
  from {
    margin-left:-420px;
    width: 300%; 
  }

  to {
    margin-left: -45px;
    width: 100%;
  }
}
@keyframes slideout {
  from {
    margin-left: -45px;
    width: 100%;
  } 
  to {
    margin-left:-420px;
    width: 300%; 
  }


}

#Leistungen-Kategorie{
	margin-top:80px;
	display: flex;
	justify-content: space-between;
	width:100%;
	min-height:700px;
	transform:skewY(-2deg);
	
}

#Leistungen-Beratung{
	padding: 0px 20px;
	min-height:500px;
	float:left;
	width:700px;
}

#Leistungen-Beratung h2{

	text-align:center;
	font-style:normal;
}
#Leistungen-Entwicklung{
padding: 0px 20px;
	min-height:500px;
	float:left;
	width:700px;
}

#Leistungen-Entwicklung h2{
	text-align:center;

	font-style:normal;
}

#Leistungen-Dienstleistung{
padding: 0px 20px;
	min-height:500px;
	float:left;
	width:700px;
}

#Leistungen-Dienstleistung h2{
	text-align:center;

	font-style:normal;
}

#Uebermich{
	color:black;
	background-color:white;
	padding:45px;
	
	
}	
#Uebermich h1,h2 {
		margin:30px;
}
#Uebermich p,ul {
	color:black;

}

#Uebermich h1{
	font-size:40px;
	color:#1e76bc;
	transform:skewY(0deg);
}

#Uebermich h1 span{
	color:white;
	font-size:60px;
	background-color:#1e76bc;
	padding-top:10px;
	padding-bottom:10px;
	margin-left:-360px;
	padding-left:70px;
	padding-right:125px;
	border-radius: 0px 50px 50px 0px;
	box-shadow: 5px 10px 18px #888888;
	
}
#Uebermich:hover h1 span{
	animation-duration: 1.0s;
	animation-name: slidein_uebermich;
	-webkit-animation-duration: 1.0s;
	-webkit-animation-name: slidein_uebermich;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode:forwards;
}
#Uebermich h1 span{
	margin-left:-45px;
	animation-duration: 1.0s;
	animation-name: slideout_uebermich;
	-webkit-animation-duration: 1.0s;
	-webkit-animation-name: slideout_uebermich;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode:forwards;
}

@keyframes slidein_uebermich{
  from {
    margin-left:-430px;
    width: 300%; 
  }

  to {
    margin-left: -85px;
    width: 100%;
  }
}
@keyframes slideout_uebermich {
  from {
    margin-left: -85px;
    width: 100%;
  } 
  to {
    margin-left:-430px;
    width: 300%; 
  }


}

#Kontakt{
	color:black;
	background-color:#26589b;
	padding:45px;

	height:650px;
	background-image:linear-gradient(#fafafa,#fafafa);
	transform:skewY(-2deg);
	
}

#Kontakt h1{
	padding-top:50px;
	height:auto;
	transform:skewY(2deg);
}

#Kontakt p{
	transform:skewY(2deg);
}



#Kontakt h1{
	color:white;
	font-size:60px;
	transform:skewY(2deg);
}
#Kontakt h1 span{
	background-color:#1e76bc;
	padding-top:10px;
	padding-bottom:10px;
	margin-left:-360px;
	padding-left:70px;
	padding-right:120px;
	border-radius: 0px 50px 50px 0px;
	box-shadow: 5px 10px 18px #888888;
	
}
#Kontakt:hover h1 span{
	animation-duration: 1.0s;
	animation-name: slidein_kontakt;
	-webkit-animation-duration: 1.0s;
	-webkit-animation-name: slidein_kontakt;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode:forwards;
}
#Kontakt h1 span{
	margin-left:-45px;
	animation-duration: 1.0s;
	animation-name: slideout_kontakt;
	-webkit-animation-duration: 1.0s;
	-webkit-animation-name: slideout_kontakt;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode:forwards;
}


@keyframes slidein_kontakt {
  from {
    margin-left:-340px;
    width: 300%; 
  }

  to {
    margin-left: -45px;
    width: 100%;
  }
}
@keyframes slideout_kontakt {
  from {
    margin-left: -45px;
    width: 100%;
  } 
  to {
    margin-left:-340px;
    width: 300%; 
  }


}




footer{
	position:absolute;
	width:100%;
	background-color:#1e76bc;
	height:75px;
	margin-top:-35px;
	color:white;
}

footer p{
	text-align:center;
	color:white;
}

footer a{
	text-decoration:none;
}

footer a:link{
	color:white;
}

footer a:visited{
	color:white;
}

footer a:hover{
	text-decoration:underline;
	background-color:#1e76bc;
	display:inline;
}


#Impressum{
	padding-left:5px;
	padding-right:5px;
	width:1014px;	
	box-shadow: 5px 10px 18px #888888;
}

.script {
  position: relative;
  margin:0;
}
.script span {
  background-color: #fafafa;
  padding: 0 0.3em;
}
.script:before {
  content:"";
  display: block;
  position: absolute;
  z-index:-1;
  top: 50%;
  
  width:100%;
  border-bottom: 3px solid #1e76bc;
}