/* PEOPLE CPT CSS */
/* Shared by vc-addons/people.php and vc-addons/people-api.php so both grids look identical. */
.grid-design.outer.people {
	padding-bottom: 24px;
}

.vc_col-sm-4.grid-design.people {
	border-radius: 3px;
	max-width: 287px;
	transform: translateZ(0);
	transition-duration: 0.3s;
	transition-property: transform;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	margin: 12px;
	display: flex;
	flex-direction: column;
}

.vc_col-sm-4.grid-design.people:hover {
	transform: scale(1.013);
}

.grid-design.link-wrap.people {
	padding: 0;
	display: initial;
	height: auto;
}

.grid-design.link-wrap.people img {
	margin: 0;
	border-radius: 3px 3px 0 0;
	max-height: 100%;
	height: 300px;
	width: 300px !important;
	object-fit: cover;
}

.grid-design.body-wrapper.people {
	padding: 24px;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #ffffff;
}

.social.people {
	margin-top: auto;
}

.social.people a {
	margin-right: 10px;
	margin-top: 16px;
	display: inline-block;
	vertical-align: middle;
	/* or bottom */
}

.social.people i[class^='icon-'] {
	display: initial;
	text-align: center;
	vertical-align: inherit !important;
}

.social.people .dashicons {
	vertical-align: unset !important;
}

h3.name.people {
	font-size: 22px !important;
	line-height: 130% !important;
	color: #333;
}

.pronoun.people {
	color: #333;
	font-size: 10px;
	font-weight: 700;
	line-height: 140%;
	margin-top: 2px;
	padding-bottom: 16px;
	font-style: italic;
}

h4.title.people,
h4.company.people {
	color: #333;
	font-size: 16px !important;
	line-height: 140% !important;
	width: 100%;
}

h4.title.people {
	font-weight: 400 !important;
	font-style: italic !important;
}

h4.company.people {
	font-weight: 700;
}

h4.role-tier.people {
	font-style: normal;
	color: #000;
	font-size: 16px !important;
	line-height: 140% !important;
	width: 100%;
}

/* MODAL OF PEOPLE */
.modal.people {
	display: flex;
	flex-direction: row;
}

.biography.people {
	font-size: 12px;
	letter-spacing: 0.02em;
	line-height: 150%;
}

.modal.people img {
	max-height: 100%;
	height: 300px;
	width: 300px;
	object-fit: cover;
}

.content.people {
	margin: 24px 50px 0 50px;
}

.modal .title.people {
	display: inline-block;
	margin-right: 16px;
}

@media only screen and (max-width: 853px) {
	/* PEOPLES MOBILE MODAL*/
	.modal.people {
		flex-direction: column;
	}

	h3.title.people {
		margin: 5px 0 !important;
	}

	h4.title.people {
		margin: 5px 0 10px 0 !important;
	}

	.content.people {
		margin: 10px 0;
	}
}