.timeline {
	overflow: hidden;
	position: relative;
}

.timeline .line {
	content: '';
	position: absolute;
	margin-left: 50%;
	bottom: 0px;
	-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
	width: 4px;
	height: 100%;
	background-color: #000;
	z-index: 1000;
	overflow: hidden;
  }

.timeline .entries {
	width: 100%;
	margin: 0px;
	position: relative;
	overflow: hidden;
  }

.timeline .entries .entry .content {
	width: 100%;
	background: cyan;
	padding: 5px;
	position: relative;
}

.timeline .left {
	float: left;
	width: calc(50% - 20px);
	text-align: right;
}

.timeline .right {
	float: right;
	width: calc(50% - 20px);
	text-align: left;
}

.timeline .entries .entry {
	width: 100%;
	float: left;
	padding: 10px;
	clear: both;
	text-align: right;
	position: relative;
  }

.timeline .entries .entry .title-big {
	font-size: 18px;
	position: relative;
	color: #fff;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #1d1d1d;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
  }

  .timeline .entries .entry .title {
	font-size: 14px;
	position: relative;
	color: #fff;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #1d1d1d;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
  }

.timeline .entries .entry .body {
	width: 100%;
	position: relative;
	border-left: 1px solid #1d1d1d;
	border-right: 1px solid #1d1d1d;
	border-bottom: 1px solid #1d1d1d;
}

.timeline .entries .entry .date {
	background-color: #ccc;
	border-left: 1px solid #1d1d1d;
	border-right: 1px solid #1d1d1d;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 11px;
}

.timeline .entries .marker {
	position: relative;
	width: 1.5em;
	height: 1.5em;
	border: 0.125em solid #000;
	background-color: #fff;
	border-radius: 100%;
	-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
	margin-left: calc(50% - 0.75em);
	margin-top: calc(0.5em + 6px);
	z-index: 1000;
  }

  .timeline .entries .entry .marker i {
	text-align: center;
	display: inline-block;
	width: 100%;
	height: 100%;
	margin-top: 0.125em;
}

  .timeline .entries .marker-big {
	position: relative;
	width: 2.5em;
	height: 2.5em;
	border: 4px solid #000;
	background-color: #fff;
	border-radius: 100%;
	-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
	margin-left: calc(50% - 1.25em);
	margin-top: calc(1em + 6px);
	z-index: 1000;
	padding: 0px;
  }

  .timeline .entries .entry .marker-big i {
	  text-align: center;
	  display: inline-block;
	  width: 100%;
	  height: 100%;
	  margin-top: 0.5em;
  }
  .timeline .entries .entry ..timeline {
	color: #000;
  }
  .timeline .entries .entry ..timeline p {
	line-height: 1.4em;
  }

  .timeline .entries .section {
	  border: 1px solid red;
	  position: relative;
	  display: inline-block;
	  min-width: 10px;
	  min-height: 10px;
  }
  .timeline .entries .section h1 {
	  display: inline-block;
  }