#chronik h2, #chronik h3, #chronik p{ margin:0; padding:0;}
#chronik h2{ font-size:30px; color:#000; font-weight:bold;}
#chronik
{
	position:relative;
	width:100%;
	margin:0 0 0 0;
	padding:0 0 50px 0;
	
}
#chronik ul:before{ content:""; position:absolute; left:50%; border:#000 solid 1px; border-radius:20px; width:20px; height:20px; margin-left:-11px; top:0px;}
#chronik ul
{
	position:relative;
	width:100%;
	list-style:none;
	margin:0 0 0 0;
	padding:20px 0 0 0;
	
}
#chronik ul li
{
	position:relative;
	width:35%;
	clear:both;
	text-align:right;
	padding:40px 15% 0 0;
	margin:0 0 0 -1px;
	border-right:#999 solid 1px;
	
	
}

#chronik ul li:nth-child(even)
{
	float:right;
	text-align:left;
	padding:40px 0 0 15%;
	border-right:none;
	border-left:#999 solid 1px;
}
/*Punkt auf der Linie*/
#chronik ul li:after{	content: ""; position:absolute; width:7px; height:7px; border:#000 solid 0px; border-radius:7px; right:-4px; bottom:-3px; background-color:#000; z-index:9999;}
#chronik ul li:nth-child(even):after{right:auto; left:-4px;}
/*Datum h2*/
#chronik ul li h2{
	width:28%;
	text-align:center;
	position:absolute;
	border-bottom:#999 solid 1px;
	bottom:0;
	right:0;
	padding:5px 0 5px 0; margin:0;
	transition:all 0.5s ease-out;
	-webkit-transition:all 0.5s ease-out;
}
#chronik ul li h2:hover{
	padding:5px 0 5px 30%;
}
#chronik ul li:nth-child(even) h2
{
	right:auto; left:0;
}
#chronik ul li:nth-child(even) h2:hover{
	padding:5px 30% 5px 0;
}
@media screen and (max-width: 450px) {
	#chronik ul li
		{
			width:70%;
			clear:both;
			text-align:right;
			padding:40px 30% 0 0;
			margin:0 0 0 -1px;
			border-right:#999 solid 1px;
			
		}
	#chronik ul li:nth-child(even)
		{
			float:none;
			width:70%;
			clear:both;
			text-align:right;
			padding:40px 30% 0 0;
			margin:0 0 0 -1px;
			border-right:#999 solid 1px;
			border-left:none;
		}
	#chronik ul li:nth-child(even):after{right:-4px; left:auto;}
	
	#chronik ul li h2{
			width:28%;
			text-align:center;
			position:absolute;
			border-bottom:#999 solid 1px;
			bottom:0;
			right:0;
			padding:5px 0 5px 0; margin:0;
	}
	#chronik ul li:nth-child(even) h2
	{
			right:0; left:auto;
	}
	#chronik ul:before{ content:""; position:absolute; left:auto; right:-10px; border:#000 solid 1px; border-radius:20px; width:20px; height:20px; margin-left:-11px; top:0px;}
	
}