.main-timeline {
	position: relative;
}
/* position the timeline elements on both sides close - change vertical ruler circles position (top) accordingly */
.timeline{
	/*
	margin-bottom:4rem;
	*/
}
.description{
	padding-bottom:15px;
	
}


/* vertical ruler*/
.main-timeline::after {
	content: "";
	position: absolute;
	width: 2px;
	background-color:#3d59ab;
	top: 0;
	bottom: 0;
	left: 50%;
	margin-left: -1px;
}
/*  css für icons vorne*/
/* The circles on the timeline */
.timeline::after {
	content: "";
  position: absolute;
  width: 24px;
  height: 23px;
  left: 48.6%;
  top: 3rem;
  background-color: #3d59ab;
  border: 2px solid #3d59ab;
  border-radius: 50% 50% 50% 0;
/*  transform: rotate(79deg); */
  z-index: 1;
}
.timeline:nth-child(odd)::after {
  transform: rotate(196deg);
}
.geschichteDatum{
  color:#3d59ab;
	font-weight:700;
	font-size:3.25rem;
}
/* Right-aligned items (even) — droplet points LEFT */
.timeline:nth-child(even)::after {
 /* transform: rotate(60deg); */
	transform: rotate(196deg);
 }
/* Fix the circle for containers on the right side */
.right::after {
	left: -12px;
}
.left{
  left:-50%;
}

/* arrow positioning to tricky with dynamic font sizing like the one for the headlines */

/* Add arrows to the left container (pointing right) */
/*
.left::before {
content: " ";
position: absolute;
top: 3.25rem;
z-index: 1;
right: 38px;
border: medium solid var(--bs-primary);
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent var(--bs-primary);
}
*/

/* Add arrows to the right container (pointing left) */
/*
.right::before {
content: " ";
position: absolute;
top: 3.25rem;
z-index: 1;
left: 38px;
border: medium solid var(--bs-primary);
border-width: 10px 10px 10px 0;
border-color: transparent var(--bs-primary) transparent transparent;
}
*/

.right{
	left:50%;
}

.animation_left{
 animation: Fadeanimmation 1s 1 ease-in;
}
@keyframes Fadeanimmation {
  0%   {left: -100px; top: 0px;}
  100%  {left: 0px; top: 0px;}
}

.animation_right{
  animation-direction: reverse;
  animation: Fadeanimmation_right 1s 1 ease-in;
  
}
@keyframes Fadeanimmation_right {
  0%   {left:100px; top: 0px;}
  100%  {right:0px; top: 0px;}
	 
}

/*  css für icons vorne endet*/
/* Media queries - Responsive timeline on screens less than Bootstrap "md" wide */
@media screen and (max-width: 992px) {
	/* Place the timelime to the left */
	.main-timeline::after {
		left: 5px; /* 31px; */
	}
	/*
	.timeline {
		padding-left:69px;
	}
	*/
	.timeline:nth-of-type(n+2) {
		margin-top: 0; /* 2rem*/
	}

	/* Make sure that all arrows are pointing leftwards */
	.timeline::before {
		left: 60px;
		top: 2.7rem;
		border: medium solid var(--bs-primary);
		border-width: 10px 10px 10px 0;
		border-color: transparent var(--bs-primary) transparent transparent;
	}
  .timeline::after{
	   	left: -8px; /* 19px; */
	}

	/* Make sure all circles are at the same spot */
	.left::after,
	.right::after {
		top:2.6rem;
		left:18px;
	}
  .left{
	 left:0;
	}
	
	.left::before {
		right: auto;
	}

	/* Make all right containers behave like the left ones */
	.right {
		left: 0%;
	}
}
/* Bootstrap Media Queries/Breakpoints */
@media (min-width: 576px) { /* sm */
	.left::before, .right::before {
		top: 2.8rem;
	}
	.timeline::after {
		top: 2.5rem;
	}
}

@media (min-width: 768px) { /* md */
	.timeline:nth-of-type(n+2) {
		margin-top: 0; /* -5rem */
	}
	.left::before, .right::before {
		top: 2.9rem;
	}
	.timeline::after {
		top: 2.7rem;
	}
}

@media (min-width: 992px) { /* lg */
	.left::before, .right::before {
		top: 3.0rem;
	}
	.timeline::after {
		top: 2.8rem;
	}

	
	.left-box-shadow{
   -webkit-box-shadow: .5rem .5rem 0px 0px  var(--bs-primary-bg-subtle);
    box-shadow: .5rem .5rem 0px 0px  var(--bs-primary-bg-subtle);

}
.right-box-shadow{
  -webkit-box-shadow: -.5rem .5rem 0px 0px var(--bs-primary-bg-subtle);
    box-shadow: -.5rem .5rem 0px 0px var(--bs-primary-bg-subtle);
}
}

@media (min-width: 1200px) { /* xl */
	.left::before, .right::before {
		top: 3.2rem;
	}
	.timeline::after {
		top: 3.0rem;
	}
	.timeline::after {
		left: 48.8%;
	}
}

@media (min-width: 1400px) { /* xxl */
	.left::before, .right::before {
		top: calc(3.2rem + 0.5vw);
	}
	.timeline::after {
		top: calc(2.0rem + 0.5vw);
	}
	.timeline::after {
		left: 49%;
	}
}