.timeline-tabs .timeline {
  flex-wrap: wrap;
  border-bottom: none;
}

.timeline-tabs .timeline .nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  margin: 0;
  border: none;
  width: 100%;
  background-color: initial;
  text-align: center;
  cursor: pointer;
  flex-basis: 50%;
}

.timeline-tabs .timeline .nav-link .title {
  height: 70px;
  display: flex;
  align-items: flex-end;
}

.timeline-tabs .timeline .nav-link .line {
  margin: 2em 0;
  width: 100%;
  display: flex;
}

.timeline-tabs .timeline .nav-link .line .sx,
.timeline-tabs .timeline .nav-link .line .dx {
  border: 2px solid var(--phddeib-primary);
  flex-basis: 50%;
  transition: 0.2s;
}

.timeline-tabs .timeline .nav-link button {
  width: 24px;
  height: 24px;
  background: #fff;
  border: 3px solid var(--phddeib-primary);
  border-radius: 0;
  padding: 0;
  margin-top: -46px;
  transition: 0.2s;
}

.timeline-tabs .timeline .nav-link.active .title {
	font-size: 1.5em;
	line-height: 1.2em;
	padding: 0 0.8em;
}

.timeline-tabs .timeline .nav-link.active button {
	background: var(--phddeib-primary);
	border-color: var(--phddeib-primary);
	width: 34px;
	height: 34px;
	margin-top: -51px;
}

.timeline-tabs .timeline .nav-link.active .line .sx {
	border-color: var(--phddeib-primary);
	transition: 0.2s;
}

.timeline-tabs .timeline .nav-link.active .line .dx {
	border-color: #fff;
}

.timeline-tabs .timeline .nav-link.active ~ .nav-link .line .sx,
.timeline-tabs .timeline .nav-link.active ~ .nav-link .line .dx,
.timeline-tabs .timeline .nav-link.active ~ .nav-link button {
	border-color: #fff;
}

.timeline-tabs .tab-content {
	padding: 4em 2em;
}

.timeline-tabs .tab-content h3 {
	font-weight: lighter;
	text-align: center;
	color: var(--phddeib-primary);
	margin-bottom: 1em;
}

.timeline-tabs .tab-content *:last-child {
	margin-bottom: 0;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.timeline-tabs .timeline {
	  flex-wrap: nowrap;
	  border-bottom: none;
	}
	
	.timeline-tabs .timeline .nav-link {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  padding: 0;
	  margin: 0;
	  border: none;
	  width: 100%;
	  background-color: initial;
	  text-align: center;
	  cursor: pointer;
	}
	
	.timeline-tabs .timeline .nav-link .title {
	  height: 90px;
	  display: flex;
	  align-items: flex-end;
	}
	
	.timeline-tabs .timeline .nav-link .line {
	  margin: 2em 0;
	  width: 100%;
	  display: flex;
	}
	
	.timeline-tabs .timeline .nav-link .line .sx,
	.timeline-tabs .timeline .nav-link .line .dx {
	  border: 2px solid var(--phddeib-primary);
	  flex-basis: 50%;
	  transition: 0.2s;
	}
	
	.timeline-tabs .timeline .nav-link button {
	  width: 24px;
	  height: 24px;
	  background: #fff;
	  border: 3px solid var(--phddeib-primary);
	  border-radius: 0;
	  padding: 0;
	  margin-top: -46px;
	  transition: 0.2s;
	}
	
	.timeline-tabs .timeline .nav-link.active .title {
		font-size: 1.5em;
		line-height: 1.2em;
		padding: 0 0.8em;
	}
	
	.timeline-tabs .timeline .nav-link.active button {
		background: var(--phddeib-primary);
		border-color: var(--phddeib-primary);
		width: 44px;
		height: 44px;
		margin-top: -56px;
	}
	
	.timeline-tabs .timeline .nav-link.active .line .sx {
		border-color: var(--phddeib-primary);
		transition: 0.2s;
	}
	
	.timeline-tabs .timeline .nav-link.active .line .dx {
		border-color: #fff;
	}
	
	.timeline-tabs .timeline .nav-link.active ~ .nav-link .line .sx,
	.timeline-tabs .timeline .nav-link.active ~ .nav-link .line .dx,
	.timeline-tabs .timeline .nav-link.active ~ .nav-link button {
		border-color: #fff;
	}
	
	.timeline-tabs .tab-content {
		padding: 4em 2em;
	}
	
	.timeline-tabs .tab-content h3 {
		font-weight: lighter;
		text-align: center;
		color: var(--phddeib-primary);
		margin-bottom: 1em;
	}
	
	.timeline-tabs .tab-content *:last-child {
		margin-bottom: 0;
	}
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
	
}