﻿.team-member-list {
	display: flex;
	flex-wrap: wrap;
	gap: 23px; /* replaces margin! */
	margin: 20px 0px;
}

.team-member {
	width: 280px;
	height: 450px;
	perspective: 1000px; /* enables 3D flip */
	position: relative;
	display:inline-block;
	vertical-align:top;
}

/* INNER WRAPPER */
.team-member-inner {
	width: 100%;
	height: 100%;
	position: relative;
	transition: transform .6s;
	transform-style: preserve-3d;
}

/* When flipped */
.team-member.flip .team-member-inner {
	transform: rotateY(180deg);
}

/* FRONT & BACK PANELS */
.team-member-front,
.team-member-back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 15px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 8px;
	background: #fff;
	box-shadow: 1px 1px 9px #ddd;
	line-height:1.3em;
}

.team-member-pic {
	width: 280px;
	height: 280px;
	overflow: hidden;
	margin-left: -15px;
	margin-top: -15px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.team-member-pic img {
	width: 100%;
	height: 100%;
}

/* BACK SIDE */
.team-member-back {
	transform: rotateY(180deg);
	background: #f7f7f7;
}

/* Flip icon */
.team-member-flip {
	text-align: right;
	position: absolute;
	z-index:10;
	bottom:5px;
	right:10px;
	width:36px;
	transition:0.25s;
	filter:grayscale(1);
	opacity:0.5;
}

	.team-member-flip:hover {
		filter: grayscale(0);
		opacity:1;
		cursor: pointer;
	}

	.team-member-flip img {
		width: 100%;
	}

/* Simple example styling */
.team-member-name {
	font-size: 1.1em;
	font-weight: 600;
	margin-top: 10px;
	margin-bottom: 3px;
	color: #155CAC;
}

.team-member-job {
	font-size: 0.9em;
	color: #888;
	margin-bottom: 8px;
	line-height:1.4em;
	height:60px;
	overflow:hidden;
}

.team-member-line {
	font-size: 1.0em;
	margin-bottom: 5px;
	font-weight:300;
}

.team-member-desc {
	font-size: 0.9em;
	line-height: 1.4;
	height:100%;
	overflow-y:auto;
	margin-left:-15px;
	margin-top:-15px;
	padding:15px;
	width:100%;
}

.team-members .box { 
	display:inline-block;
	vertical-align:middle;
	margin-right:10px;
}

.team-members .clear { 
	clear:both;
	height:10px;
}

.team-members .input:focus { 
	outline:none;
}
