.tree {
	position: relative;
	left: -700px;
	width: 2000px;
	overflow: hidden;
	padding: 20px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: -20px;
}
.tree ul {
	padding-top: 20px; 
	position: relative;
	display: flex;
	justify-content: center;
}
.tree li {
	float: left; 
	text-align: center;
	list-style-type: none;
	position: relative;
	padding: 20px 5px 0 5px;
}
.tree li::before, 
.tree li::after {
	content: '';
	position: absolute; top: 0; right: 50%;
	border-top: 1px solid #adadad;
	width: 50%; height: 20px;
}
.tree li::after {
	right: auto; left: 50%;
	border-left: 1px solid #adadad;
}
.tree li:only-child::after, 
.tree li:only-child::before {
	display: none;
}
.tree li:only-child { 
	padding-top: 0;
}
.tree li:first-child::before, 
.tree li:last-child::after {
	border: 0 none;
}
.tree li:last-child::before {
	border-right: 1px solid #adadad;
	border-radius: 0 2px 0 0;
	-webkit-border-radius: 0 2px 0 0;
	-moz-border-radius: 0 2px 0 0;
}
.tree li:first-child::after {
	border-radius: 2px 0 0 0;
	-webkit-border-radius: 2px 0 0 0;
	-moz-border-radius: 2px 0 0 0;
}
.tree ul ul::before {
	content: '';
	position: absolute; top: 0; left: 50%;
	border-left: 1px solid #adadad;
	width: 0; height: 20px;
}
.tree li a {
	position: relative;
	text-decoration: none;
	color: #888;
	font-family: arial, verdana, tahoma;
	font-size: 11px;
	display: inline-block;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	width: 80px;
	padding-top: 5px;
	
	transition: all .2s;
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
}
.name {
	display: block;
	padding: 5px 0;
	word-wrap: break-word;
	font-size: 10px;
}
.tree li img {
	background: #eee;
	max-width: 100%;
	width: 50px;
	border: 0;
	margin: 0 auto;
	display: block;
}
.tree li a:hover + a + ul li a:not(.foreign-spouse), 
.tree li a:hover + ul li a:not(.foreign-spouse),
.tree li a:hover {
	color: #444;
}
.tree li a:hover + ul li::after, 
.tree li a:hover + ul li::before, 
.tree li a:hover + ul::before, 
.tree li a:hover + ul ul::before,
.tree li a:hover + a + ul li::after,
.tree li a:hover + a + ul li::before,
.tree li a:hover + a + ul::before,
.tree li a:hover + a + ul ul::before,
.tree li a:hover::before,
.tree li a:hover::after {
	/*border-color:  #EF8403;*/
}
.spouse {
	margin-left: 5px;
}
.spouse:first-of-type {
	margin-left: 2px;
}
.foreign-spouse {
	display: block;
}
.foreign-spouse::before {
    content: '';
    position: absolute;
    top: 45px;
    width: 13px;
    height: 1px;
    border-bottom: 1px solid #adadad;
    left: -12px;
}
.foreign-spouse::first-of-type::before {
    width: 23px;
    left: -24px;
}
.relationship {
	display: block;
	text-transform: uppercase;
	color: #888;
	font-size: 10px;
}
.tree li a.active {
	width: 120px;
}
.tree li a.active img {
	width: 90px;
}
.tree li a.active .name {
	font-size: 13px;
	color: #EF8403;
}
.tree li a .name {
	color: #3a3a3a;
}
.tree li.active {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.tree li .activePerson {
	border: 1px solid #e6e6e6;
	background: #fafafa;
    align-self: center;
	padding: 10px 20px;
}