/* Shared About/team layout styles for corporate themes. */
/* Site-specific accent should be set via --wojo-about-list-accent in theme stylesheet. */

.page-template-page-about {
	color: white;
}

.page-template-page-about #intro p {
	font-weight: normal;
	text-transform: none;
	text-align: left;
}

.page-template-page-about #back a {
	color: white;
	font-family: 'Titillium Web', sans-serif;
	font-size: 20px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.page-template-page-about .half .section-content {
	max-width: 50%;
}

.page-template-page-about .half .section-content p {
	font-weight: 300;
}

.page-template-page-about .half .section-content .col-lg-6:nth-child(1) {
	padding-right: 2rem;
}

@media screen and (max-width: 991px) {
	.page-template-page-about .half .section-content .col-lg-6:nth-child(1) {
		padding-right: 0;
	}
}

.page-template-page-about .section-content,
.page-template-page-about-simple .section-content {
	align-items: flex-start;
	max-width: 69%;
}

.page-template-page-about .senior-executive-bios {
	clear: both;
	min-width: 0;
	width: 100%;
	padding: 2rem 0 4rem;
}

.page-template-page-about .senior-executive-bios p {
	font-size: 23px !important;
}

.page-template-page-about .square.levine-image {
	position: static !important;
}

.page-template-page-about .rectangle,
.page-template-page-about-simple .rectangle {
	height: 440px;
}

.page-template-page-about .section-content ul {
	list-style: none;
	color: var(--wojo-about-list-accent, #f8eb8f);
	padding-inline-start: 0;
	margin: 0;
	font-weight: bold;
}

.page-template-page-about .section-content ul li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.7);
	padding: 1rem 0;
	color: var(--wojo-about-list-accent, #f8eb8f);
}

.page-template-page-about .section-content ul li:last-child {
	border-bottom: none;
}

.page-template-page-about .section-content .top, .page-template-page-about .section-content .team {
	flex-basis: 100%;
}

.page-template-page-about .section-content .col-lg-6 {
	padding-left: 0;
}

.page-template-page-about .team-list ul {
	list-style: none;
	padding: 1rem;
	margin: 0;
}

.page-template-page-about .team-list ul li {
	padding: 0 0 0.5rem;
}

.page-template-page-about .team-list a {
	color: white;
}

.page-template-page-about #team {
	height: auto;
}

@media screen and (max-width: 1200px) {
	.page-template-page-about #team {
		padding-top: 20rem;
	}
	.page-template-page-about #team .section-content {
		max-width: 100%;
		padding: 0;
	}
}

.page-template-page-about #team .intro_text {
	padding-right: 3rem;
}

@media screen and (max-width: 768px) {
	.page-template-page-about #team .intro_text {
		padding-right: 0;
	}
}

.page-template-page-about #team .team-leadership-row {
	align-items: flex-start;
}

.page-template-page-about #team .team-senior-col {
	display: flex;
	flex-direction: column;
}

@media screen and (min-width: 992px) {
	.page-template-page-about #team .team-senior-col {
		flex: 0 0 300px;
		max-width: 300px;
	}
}

.page-template-page-about #team .team-senior-col .tm {
	margin-bottom: 2rem;
}

.page-template-page-about #team .team-senior-col .tm:last-child {
	margin-bottom: 0;
}

.page-template-page-about #team .first {
	margin-right: 25%;
}

@media screen and (max-width: 991px) {
	.page-template-page-about #team .first {
		margin-right: 0;
	}
}

.page-template-page-about #team .square {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin-bottom: 1rem;
}

.page-template-page-about #team .tm h4 {
	font-size: 18px;
	color: white;
}

.page-template-page-about #team .tm p {
	font-size: 12px;
	font-weight: 300;
}

.page-template-page-about #team .square:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.page-template-page-about #team .square.team-portrait-lg:after {
	padding-bottom: 150%;
}

.page-template-page-about #team .square.team-portrait-sm:after {
	padding-bottom: 100%;
}

.page-template-page-about #team .content {
	position: absolute;
	width: 100%;
	height: 100%;
}

.page-template-page-about #team .content img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-template-page-about #team .row {
	margin-left: calc(var(--bs-gutter-x)/ -2);
}

.page-template-page-about #team .col-md-6 {
	margin-bottom: 2rem;
}

.page-template-page-about #team a {
	font-size: 10px;
	position: relative;
	color: white;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: normal;
	font-weight: bold;
	font-family: 'Titillium Web', sans-serif;
}

.page-template-page-about #team .bio {
	min-height: 100vh;
}

@media screen and (max-width: 1200px) {
	.page-template-page-about #team .bio {
		padding-left: 0;
	}
}

.page-template-page-about #team .bio .col {
	float: left;
}

.page-template-page-about #team .bio .col:nth-child(1) {
	width: 300px;
}

.page-template-page-about #team .bio .col:nth-child(2) {
	width: auto;
}

.page-template-page-about #team .bio .square {
	width: 250px;
}

.page-template-page-about #team .bio.bio-executive .square {
	width: 100%;
	max-width: 300px;
}

.page-template-page-about #team .bio.bio-executive .square:after {
	display: none;
}

.page-template-page-about #team .bio.bio-executive .content {
	position: static;
	width: 100%;
	height: auto;
}

.page-template-page-about #team .bio.bio-executive .content img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.page-template-page-about #team .bio-text {
	clear: both;
	padding: 2rem 0 4rem;
}

.page-template-page-about #team .bio-text ul {
	padding: 0;
	margin: 0;
	font-weight: normal;
}

.page-template-page-about #team .bio-text ul li {
	list-style-type: none;
	position: relative;
	color: white;
	padding-left: 50px;
	border: none;
	font-weight: 300;
}

.page-template-page-about #team .bio-text ul li:before {
	content: "♦";
	transform: rotate(90deg);
	color: #e0251b;
	font-size: 18px;
	position: absolute;
	top: 13px;
	left: 0;
}

.page-template-page-about #team .bio-text h3 {
	padding-top: 2rem;
}

.page-template-page-about #team .bio .top {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 0 1.5rem;
}

.page-template-page-about #team .bio .top .col {
	float: none;
}

.page-template-page-about #team .bio .top .col:nth-child(1) {
	flex: 0 0 300px;
	max-width: 300px;
}

.page-template-page-about #team .bio .top .col:nth-child(2) {
	flex: 1 1 240px;
	width: auto;
	min-width: 0;
}

.page-template-page-about #team .bio .senior-executive-bios,
.page-template-page-about #team .bio .bio-text {
	clear: both;
	width: 100%;
}

.page-template-page-about #team .team-detail-back {
	margin-bottom: 1.25rem;
}

.page-template-page-about #team .team-detail-back a {
	color: white;
	font-family: 'Titillium Web', sans-serif;
	font-size: 20px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2px;
}

@media screen and (max-width: 991px) {
	.page-template-page-about #team .bio .top {
		display: block;
	}
	.page-template-page-about #team .bio .top .col:nth-child(1),
	.page-template-page-about #team .bio .top .col:nth-child(2) {
		flex: none;
		max-width: none;
		width: 100%;
	}
	.page-template-page-about #team .bio .square {
		width: 100%;
		max-width: 360px;
	}
	.page-template-page-about #team .bio.bio-executive .square {
		max-width: 360px;
	}
	.page-template-page-about #team .bio .top .col:nth-child(2) {
		margin-top: 0.5rem;
	}
	.page-template-page-about #team .senior-executive-bios p {
		font-size: inherit !important;
	}
}

.page-template-page-about #valued-partners .section-content {
	max-width: unset;
}

.page-template-page-about #mobile-nav ul li {
	border: none;
}

.page-template-page-about #mobile-nav ul li a {
	font-size: 16px;
	text-transform: none;
	letter-spacing: 1px;
	line-height: normal;
	font-weight: normal;
	font-family: "Roboto", sans-serif;
}

.page-template-page-about #mobile-nav ul li a:after {
	content: none;
}

.page-template-page-about #mobile-nav #back a {
	color: white;
	font-family: 'Titillium Web', sans-serif;
	font-size: 20px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.page-template-page-about #mobile-nav #back a:after {
	content: none;
}

@media screen and (max-width: 1200px) {
	.page-template-page-about #title {
		position: absolute;
		top: 150px;
		width: 100%;
		padding-right: 4rem;
	}
	.page-template-page-about #title + section {
		padding-top: 20rem;
	}
	.page-template-page-about #intro {
		padding-top: 10rem;
	}
	.page-template-page-about .section-content {
		max-width: unset !important;
	}
	.page-template-page-about .desktop-nav {
		display: none;
	}
}

@media screen and (min-width: 1200px) {
	.page-template-page-about #mobile-nav {
		display: none;
	}
	.page-template-page-about #team .team-detail-back {
		display: none !important;
	}
}

@media screen and (max-width: 1200px) {
	.page-template-page-about #title {
		position: relative;
		top: 0;
		left: 0;
		padding: 150px 2rem 0;
	}
	.page-template-page-about #title .section-title {
		width: 100%;
		left: 0;
		position: relative;
	}
	.page-template-page-about #title + section {
		padding-top: 4rem;
	}
}

/* Shared About timeline styles. */
#history {
	height: auto;
	/* Timeline */
}

#history .section-content {
	max-width: 70%;
	margin-left: 17%;
}

#history #content {
	margin-top: 50px;
	text-align: center;
}

#history #time_container {
	padding-top: 4rem;
}

#history .timeline {
	margin: 50px auto;
	position: relative;
	line-height: 1.4em;
	font-size: 1.03em;
	list-style: none;
	text-align: left;
}

#history .timeline .event {
	margin-bottom: 50px;
	position: relative;
	border: none;
	color: white;
	padding: 0;
}

#history .timeline .event:first-of-type {
	margin-top: -60px;
}

#history .timeline .event .head {
	position: absolute;
	left: -15%;
	border-bottom: 1px solid white;
	width: 115%;
}

@media screen and (max-width: 1200px) {
	#history .timeline .event .head {
		left: 0;
		width: 100%;
	}
}

#history .timeline .event .head p {
	margin: 0;
}

#history .timeline .event .head span {
	background: white;
	color: #26272b;
	padding: 2px 10px;
}

#history .timeline .event .inner {
	padding-bottom: .5rem;
}

#history .timeline .event .content {
	font-weight: 300;
	padding-top: 4rem;
}

@media screen and (max-width: 1200px) {
	#history .timeline .event .content {
		padding-top: var(--wojo-about-history-mobile-content-padding-top, 4rem);
	}
}

@media screen and (max-width: 768px) {
	#history .timeline .event .col.img {
		max-width: 100%;
		flex: 0 0 100%;
	}
	#history .timeline .event .text {
		padding: 2rem 0 0;
	}
}

#history .timeline .event:last-of-type {
	padding-bottom: 0;
	margin-bottom: 0;
	border: none;
}

#history .timeline .event:before,
#history .timeline .event:after {
	position: absolute;
	display: block;
	top: 5px;
}

@media screen and (max-width: 1200px) {
	#history .section-content {
		max-width: 100%;
		margin-left: 0;
	}
}