@charset "UTF-8";
.person {
		font-size: 16px;
		padding-top: 32px;
		padding-bottom: 32px;
}
.person:after {
		content: ' ';
		clear: both;
		display: block;
		width: 0;
		height: 0;
		overflow: hidden;
		font-size: 0;
}
.person .image-circle {
		width: 200px;
		height: 200px;
		margin: 0 0 16px 0;
		display: block;
}
.person .image-circle img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		object-fit: cover;
		object-position: center;
}
.person dl, .person dt, .person dd, .person h2 {
		margin: 0;
		padding: 0;
		display: block;
		font: inherit;
}
.person a:not(.btn) {
		color: inherit;
		text-decoration: none;
}
@media (pointer:fine) {
		.person a:not(.btn):hover {
				color: var(--accent);
		}
}
.person dt, .person h2 {
		font: normal 14px/1.2 var(--font-title);
		font-variant-numeric: lining-nums;
		color: var(--additional-text);
		margin: 16px 0 12px 0;
}
.person h2 ~ dt {
		font: inherit;
		color: inherit;
		margin: 0;
}
.person dd + dd {
		margin-top: 12px;
}
.person .name {
		font: bold 24px/1.25 var(--font-title);
		font-variant-numeric: lining-nums;
		color: var(--title);
		margin: 0 0 16px 0;
}
@media only screen and (min-width: 1200px) {
		.person {
				padding-left: 486px;
				padding-top: 26px;
				padding-bottom: 62px;
		}
		.person .image-circle {
				position: absolute;
				top: 26px;
				left: 26px;
		}
		.person .name, .person h2, .person dt {
				margin-left: -220px;
		}
		.person .name {
				margin-bottom: 40px;
		}
		.person h2, .person dt {
				float: left;
				clear: left;
				width: 220px;
				margin-top: 0;
		}
		.person h2 ~ dt {
				float: none;
				clear: none;
				margin: 0;
				width: auto;
		}
		.person dl, .person dt, .person dd, .person h2 {
				margin-bottom: 14px;
		}
		.person dd + dd {
				margin-top: -2px;
		}
}