/* CSS Document */

.hstylst { 
	display: inline-flex;
    position: relative;
    flex-direction: column;
    width: 50%;
    align-items: flex-end;
	box-sizing: border-box;
}
.hstylst .lstpad {
	padding: 15px 40px; 
	margin: 0;
	max-width: 400px;
	box-sizing: border-box;
}
.hstylst:nth-child(odd) { 
	left: calc(50% + 1px);
	align-items: flex-start;
	text-align: left;
}
.hstylst:nth-child(even) { 
	right: 1px;
	align-items: flex-end;
	text-align: right;
}

.hstylst::before,
.hstylst::after {
	position: absolute; content: '';
	box-sizing: border-box;
}	
.hstylst::before {
	z-index: 1;
    width: 20px; height: 20px;
    background: #9c7d58; 
	top: 50%;
	transform: translateY(-50%);
    border-radius: 100px;
    box-shadow: inset 0px 0px 8px #161719;
    border: 3px solid #9c7d58;
}


/** diamond icon **/
.hstylst:nth-child(odd)::before { left: -11px; }
.hstylst:nth-child(even)::before { right: -11px; }


/** vertical border **/
.hstylst:nth-child(odd)::after {
	height: 100%; width: 2px; z-index: 0;
	top: 0; left: -2px;
	border-left: 2px solid #9c7d58;
}
.hstylst:nth-child(even)::after {
	height: 100%; width: 2px; z-index: 0;
	top: 0; right: -2px;
	border-left: 2px solid #9c7d58;
}

.hstylst:first-of-type::after {
	height: 50%; bottom: 0; top: auto;
}
.hstylst:not(:has(~ .hstylst))::after {
	height: 115%; content: '\f0d7';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	display: flex;
    align-items: flex-end!important;
    justify-content: center!important;
	font-size: 1.5rem!important;
	color: #9c7d58!important;
	text-indent: -2px!important;
    line-height: 0!important;
} 
.hstylst:not(:has(~ .hstylst)) { margin-bottom: 75px; }

.hstylst:only-child::after {
	border: 0; height: 0;
}