@charset "UTF-8";
/* CSS Document */

	
	/* --------------------------------- */	
	/* team-member Blocks */	
	/* --------------------------------- */

		
		.team-members {
			text-align: center;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			gap: 18px;
		}
				
		.team-member {
			opacity: 1;
			flex-basis: calc(24% - 50px);
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			text-align: center;
			background-color: rgba(255, 255, 255, 0.75);
			border-radius: 12px;
			padding: 14px 24px;
			margin-block-start: 0 !important;
			-moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
		}
	
		.team-member.active {
		}
	
		.team-member.ghost {
			opacity: 0.5;
			-webkit-transition: opacity 300ms;
			transition: opacity 300ms;
		}
	
		.team-member .biopic {
			flex-basis: 90%;
			margin: 0 auto;
			padding: 4% 0;
			text-align: center;
		}	
	
			.team-member .biopic img.pic {
				width: 80%;
				height: auto;
				display: block;
				border-radius: 50%;
				margin: 10px auto 0 auto;
				border: 4px solid rgba(139,136,124,0.1);
			}
	
	
		
		.team-member .bioinfo {
			flex-basis: 100%;
			padding: 0;
			text-align: center;
		}	
	
			.team-member .bioinfo h4 {
				font-size: 24px;
				line-height: 24px;
				color: rgb(31,78,139);
				margin-block-start: 24px !important;
				margin-block-end: 6px !important;
			}
		
			.team-member .bioinfo h5 {
				font-family: 'proxima-nova', sans-serif;
				font-size: 14px;
				line-height: 18px;
				font-weight: 700;
				color: rgba(102,102,102,1);
				margin-block-start: 0 !important;
				margin-block-end: 24px !important;
			}
	
			.team-member .bioinfo h6 {
				font-size: 14px;
				line-height: 21px;
				margin: 0 0 20px 20px;
				font-weight: 500;
				display: inline-block;
			}
	
			.team-member .bioinfo h6:first-of-type {
				margin: 0 0 20px 0;
			}
	
				.team-member .bioinfo h6 i {
					margin-right: 6px;
				}
	
	
	
			.team-member .bioinfo p {
				font-size: 16px;
				line-height: 28px;
				margin-bottom: 25px;
			}
		
	
			.fullbio {
				display: none;
			}
	
	
	
	
	
	
		/* --------------------------------- */
		/* Bio Popovers */
		/* --------------------------------- */


			.team-member .bioinfo p.openbio {
				display: inline-block;
				padding: 14px 24px 14px 24px;
				border-radius: 8px;
				color: rgba(255,255,255,1.0);
				background-color: rgba(54,126,224,1);
				font-size: 14px;
				line-height: 14px;
				font-weight: 500;
				margin: 0 0 30px 0;
				-moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
			}

			.team-member .bioinfo p.openbio:hover {
				cursor: pointer;
				color: rgba(255,255,255,1.0);
				background-color: rgba(31,78,139,1.0);
				-moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
			}

			.fullbio {
				position: fixed;
				z-index: 15000;
				top: 0;
				left: 0;
				width: 100%;
				height: calc(100% - 100px);
				padding: 100px 0 0 0;
				display: flex;
				align-items: center;
				opacity: 0;
				-webkit-backdrop-filter: saturate(180%) blur(20px);
				backdrop-filter: saturate(180%) blur(20px);
				background-color: rgba(255,255,255,0.72);
				-webkit-transition: opacity 300ms;
				transition: opacity 300ms;
				visibility: hidden;
			}

				.fullbio.open {
					visibility: visible;
					-webkit-transition: opacity 300ms;
					transition: opacity 300ms;
				}

			.fullbiocontent {
				position: relative;
				width: 68%;
				max-width: 1000px;
				height: 68%;
				max-height: 560px;
				margin: 0 auto;
				padding: 4%;
				background-color: rgb(255,255,255);
				border-radius: 20px;
				box-shadow: 0 0 4px rgba(0,0,0,0.07),0 0 4px rgba(0,0,0,0.14);
			}

				.closebio {
					position: absolute;
					top: 20px;
					right: 30px;
					display: flex;
					align-items: center;
					color: rgb(39,101,216);
					font-size: 16px;
					z-index: 110;
					-moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
				}

				.closebio i {
					font-size: 32px;
					margin-left: 10px;
				}

				.closebio:hover {
					color: rgb(31,78,139);
					cursor: pointer;
				}


				/* Bio Popover Content */

					.fullbiocontent .biopic {
						position: absolute;
						top: -90px;
						left: calc(50% - 92px);
						margin: 0 auto;
						padding: 0;
						z-index: 100;
						border-radius: 50%;
					}

						.fullbiocontent .biopic img.pic {
							width: 180px;
							height: 180px;
							margin: 0;
							border: none;
							box-shadow: 0 0 4px rgba(0,0,0,0.07),0 0 4px rgba(0,0,0,0.14);
							/* mix-blend-mode: lighten; */
						}
	
	
					.linkedin {
						position: absolute;
						bottom: 14px;
						right: 4px;
						background-color: rgb(39,101,216);
						width: 34px;
						height: 34px;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						-moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
					}
	
					.linkedin i {
						color: #ffffff;						
					}
	
					.linkedin:hover {
						background-color: rgb(31,78,139);
					}
						
	
	
					.fullbiocontent .info-wrapper {
						position: absolute;
						width: auto;
						height: auto;
						top: 100px;
						right: 40px;
						bottom: 67px;
						left: 0;
						z-index: 90;
						padding: 0 4%;
						overflow-y: scroll;
					}	
	
					.fullbiocontent .info {
						padding: 0 2%;
						text-align: left;
					}

					.team-member .bioinfo .fullbiocontent h4 {
						font-size: 36px;
						line-height: 36px;
						margin: 30px 0 6px 0;
						color: rgb(31,78,139);
					}

					.team-member .bioinfo .fullbiocontent h6 {
						font-family: 'proxima-nova', sans-serif;
						font-size: 16px;
						line-height: 21px;
						margin: 0 0 20px 0;
						font-weight: 700;
						color: #13325b;
					}

					.team-member .bioinfo .fullbiocontent p {
						font-size: 16px;
						line-height: 24px;
						margin-bottom: 24px;
					}

						.team-member .bioinfo .fullbiocontent p:last-of-type {
							margin-bottom: 64px;
						}

					
					.team-member .bioinfo .btn {
						display: inline-block;
						padding: 14px 24px 14px 24px;
						border-radius: 8px;
						color: rgba(255,255,255,1.0);
						background-color: rgba(54,126,224,1);
						font-size: 14px;
						line-height: 14px;
						font-weight: 500;
						margin: 0 18px 18px 0;
						-moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
					}

					.team-member .bioinfo .btn:hover {
						cursor: pointer;
						color: rgba(255,255,255,1.0);
						background-color: rgba(31,78,139,1.0);
						-moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
					}
	
	
	

	/* --------------- */
	/* --------------- */
	/* Mobile */

	@media screen and (max-width:769px){	


		.team-member {
			flex-basis: 70%;
		}
	
		.fullbio {
			padding: 80px 0 0 0;
		}
		
		.fullbiocontent {
			height: 80%;
			max-height: 80%;
		}
		
		.fullbiocontent .biopic {
			top: -90px;
			left: calc(50% - 72px);
		}

			.fullbiocontent .biopic img.pic {
				width: 140px;
				height: 140px;
			}

		
		.fullbiocontent .info-wrapper {
			top: 40px;
			right: 20px;
			bottom: 70px;
			left: 10px;
		}
		
		.team-member .bioinfo .fullbiocontent h4 {
			font-size: 24px;
			line-height: 24px;
			margin: 40px 0 6px 0;
		}
		
		.team-member .bioinfo .fullbiocontent h6 {
			font-size: 14px;
			line-height: 21px;
		}
		
		.team-member .bioinfo .fullbiocontent p {
			font-size: 14px;
			line-height: 21px;
			margin-bottom: 24px;
			text-align: left;
		}
		
		
		
		.closebio {
		  top: 10px;
		  right: 10px;
		}
		
		.closebio span {display: none;}
	
	
	}
	
	
	/* --------------- */
	/* --------------- */
	/* Mobile */

	@media screen and (min-width:800px) and (max-width:1180px) {	
		
		.team-member {
			flex-basis: calc(32% - 50px);
		}
	
	}