.about-body{
	opacity:0;
	margin-top:-50px;
	transition: .5s 1s ease;
}
.about-body.picture-loaded{
	opacity:1;
	margin-top:5px;
}
.about-abschnitt{
	max-width:1196px;
	margin:auto;
	padding: 0 20px;
}
.blue-background{
	background-color:#3958ae;
	color:white;
}
.blue-background .about-button > a{
	color:white;
	border-color:white;
}
.two-rows{
	padding:0;
	overflow:hidden;
}
.two-rows p{
	text-align:center;
}
.two-rows > .about-abschnitt-row{
	float:left;
	width:50%;
	padding:20px;
}
.about-button{
	text-align:center;
	padding:20px;
}
.about-button > a{
	padding: 10px;
	color: #3958ae;
	text-decoration: none;
	border-radius: 5px;
	border: 2px solid #3958ae;
	margin: 15px;
	display:inline-block;
}
.about-abschnitt-wrapper{
	margin:40px 0;
}
.textandpic > .about-abschnitt{
	display:flex;
	align-items: center;
}
.about-title{
	text-align:center;
	color:#3958ae;
}
.welcome-wrapper{
	position:relative;
	overflow:hidden;
	max-width:1196px;
	margin:auto;
}
#welcome-pic {
	width:100%;
	height:auto;
	z-index:2;
	position:relative;
	transition: 1s linear;
	opacity:0;
}
.welcome-wrapper.picture-loaded #welcome-pic {
	opacity:1;
}
.welcome-wrapper::after{
	position:absolute;
	content:"";
	width:0px;
	height:10px;
	left:0;
	right:0;
	bottom:0;
	transition:width 1s 1s ease;
	background-color:#3958ae;
	border-radius:5px;
	margin:auto;
	z-index:2;
}
.welcome-wrapper.picture-loaded::after{
	width:100%;
}
#overlay{
	position:absolute;
	top:60px;
	left:0;
	right:0;
	max-width:600px;
	margin:auto;
	z-index:1;
}
#glow{
	height: 300px;
	width: 100%;
	border-radius: 100%;
	box-shadow: 0px -30px 80px 70px #3958ae;
	opacity: 0;
	transition: opacity .5s 5s linear;
	
}
.welcome-wrapper.picture-loaded #glow{
	opacity: 0.5;
}

.dash-animated{
	fill:transparent;
	stroke-width:25px;
	stroke:#3958ae;
	stroke-dasharray: 5000;
	stroke-dashoffset: 5000;
}
svg.picture-loaded .dash-animated{
	animation:write 4s 1s linear forwards;	
}
@keyframes write{
	0%{
		stroke-dashoffset: 5000;
	}
	80%{
		stroke-dashoffset: 0;
		fill:transparent;
	}
	100%{
		stroke-dashoffset: 0;
		fill:#3958ae;
	}
}

/* FOREST-LOGO */

#forest-logo{
	width:300px;
	flex:0 0 300px;
	height:auto;
	margin:0 30px;
}
.heart-path {
  fill:transparent;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: heart-dash 3s linear infinite;
  transform-origin:200px 200px;
}

@keyframes heart-dash {
  0% {
	fill:transparent;
	stroke-dashoffset: 400;
 }

  30%{
	stroke-dashoffset:0;
	fill:transparent;
  }
  35%{
	stroke-dashoffset:0;
  }
  45%{
	transform:scale(1.0);
	fill:red;
  }
  50%{
	transform:scale(1.5);
  }
  55%{
	transform:scale(1.0);
  }
  100%{
	fill:red;
	stroke-dashoffset:0;
  }
}
/*ANIMATEDCOURSE*/
 #animatedcourse{
	width:300px;
	flex: 0 0 300px;
	height:auto;
	margin: 0 30px;
 }
 #animatedcourse path{
	stroke-width:10px;
	stroke:#3958ae;
	fill:transparent;
	stroke-dashoffset:3100;
	stroke-dasharray:3100;
	animation: drawcourse 8s linear infinite;
 }
#animatedcourse circle{
	stroke-width:10px;
	stroke:#3958ae;
	fill:transparent;
	transform:scale(0);
	transform-origin:478px 154px;
	animation: scalefinish 8s linear infinite;
 }
 @keyframes scalefinish{
	0%{
		opacity:1;
		transform:scale(0);
	}
	50%{
		transform:scale(0);
	}
	53%{
		transform:scale(1);
	}
	90%{
		opacity:1;
	}
	100%{
		transform:scale(1.0);
		opacity:0;
	}
 }

 @keyframes drawcourse{
	0%{
		opacity:1;
		stroke-dashoffset:3100;
	}
	50%{
		stroke-dashoffset:0;
	}
	90%{
		opacity:1;
	}
	100%{
		stroke-dashoffset:0;
		opacity:0;
	}
 }
 /*ANIMATED MAP*/
 #animatedmap{
	width: 200px;
	margin:20px auto;
	height:auto;
	display:block;
}
#forest{
	fill:transparent;
	stroke:#3958ae;
	stroke-width:8px;
	stroke-dasharray:1370;
	stroke-dashoffset:1370;
	animation: drawforest 10s linear infinite;
}
.forest-object{
	fill:none;
	stroke: #3958ae;
	stroke-width:8px;
	stroke-dasharray:100;
	stroke-dashoffset:100;
	animation: drawobjects 10s linear infinite;
}
.forest-path{
	fill:none;
	stroke: #3958ae;
	stroke-width:0px;
	stroke-dasharray:10;
	stroke-dashoffset:10;
	animation: drawpath 10s linear infinite;
}
@keyframes drawforest{
	0%{
		stroke-dashoffset:1370;
		opacity:1;
		stroke-width:8px;
	}
	10%{
		stroke-dashoffset:0;
		stroke:#3958ae;
		opacity:1;
		fill:transparent;
		stroke-width:8px;
	}
	15%{
		fill:rgba(136, 154, 206, 0.5);
		stroke-width:5px;
	}
	90%{
		fill:rgba(136, 154, 206, 0.5);
		stroke-dashoffset:0;
	}
	100%{
		fill:transparent;
		stroke-dashoffset:0;
		stroke-width:5px;
	}
	
}
@keyframes drawobjects{
	0%{
		stroke-dashoffset:100;
		opacity:1;
	}
	25%{
		stroke-dashoffset:100;
	}
	40%{
		stroke-dashoffset:0;
	}
	90%{
		opacity:1;
	}
	100%{
		opacity:0;
		stroke-dashoffset:0;
	}
	
}
@keyframes drawpath{
	0%{
		opacity:1;
		stroke-width:0px;
	}
	20%{		
		stroke-width:0px;
	}
	25%{		
		stroke-width:8px;
	}
	90%{
		opacity:1;
	}
	100%{
		opacity:0;
		stroke-width:8px;
	}
	
}
#loechlisammlericon{
	max-width: 180px;
	margin:30px auto;
	height:auto;
	display:block;
}
@media screen and (max-width:1000px){
	#overlay{
		top:28px;
	}
	#forest-logo{
		width:200px;
		flex:0 0 200px;
	}
}
@media screen and (max-width:857px){
	#animatedcourse{
		width:200px;
		flex: 0 0 200px;
	}
	#overlay{
		max-width:400px;
		top: 46px;
	}
}
@media screen and (max-width:718px){
	#overlay{
		top: 18px;
	}
}
@media screen and (max-width:669px){
	#overlay{
		top: 40px;
		max-width:250px;
		
	}
	.textandpic > .about-abschnitt {
		flex-flow: row wrap;
		justify-content:center;
		
	}
	#forest-logo, #animatedcourse{
		flex:none;
		width:30%;
		margin-top:30px;
	}
	#animatedcourse{
		order:99;
	}
}
@media screen and (max-width:560px){
	.two-rows > .about-abschnitt-row {
		float: unset;
		width: 100%;
	}
	#overlay {
		top: 23px;
	}
}
@media screen and (max-width:466px){
	#overlay{
		top: 10px;
	}
	#glow{
		display:none;
	}
}