// --------------------------------------------------------------------------------------------
// TEAM MEMBERS 
// --------------------------------------------------------------------------------------------

.team-member {
	margin-bottom:30px;

	.member-image {
		margin-bottom: 20px;
		text-align: center;
	}

	.member-email,
	.member-name,
	.member-position {
		margin-bottom: 5px;
	}

	.member-name {
		font-weight:600;
	}

	.member-position,
	.member-email {
		color:#9e9e9e;
		font-size: 14px;
	}

	.member-email {
		
		a {
			text-decoration: underline;
		}
	}

	.member-bio {
		margin-top: 15px;
		color:$body-color;
	}

	.member-social {
		margin-top: 15px;
	}

	&.color-scheme-light {

		.member-position,
		.member-email,
		.member-bio {
			color:rgba(255,255,255,0.8);  
		}

	}
}

// ---------------------------------------
// WITH HOVER
// ---------------------------------------

.member-layout-hover {

	.member-image-wrapper {
		text-align: center;
	}
	
	.member-image {
		position: relative;
		display: inline-flex;
		display: -webkit-inline-flex;
		display: -ms-inline-flexbox;
		flex-direction: row;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		-webkit-align-items: flex-start;
		-ms-flex-align: flex-start;
		align-items: flex-start;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;

		&:after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: black;
			transition: all 0.2s;
			opacity: 0;
		}
	}

	.member-social {
		position: absolute;
		top: 55%;
		left: 0;
		width: 100%;
		opacity: 0;
		margin: 0;
		padding: 20px;
		z-index: 5;

		transform:translateY(-50%);
		-webkit-transform:translateY(-50%);
		-ms-transform:translateY(-50%);

		-webkit-transition:all 0.25s ease-in-out;
		transition:all 0.25s ease-in-out;
	}

	.social-icons {

		li {
			margin: 5px;
		}
	}

	.icons-design-default {

		a {
			color: rgba(255,255,255,0.8);

			&:hover {
				color: white;
			}
		}
	}

	&:hover {

		.member-image {

			&:after {
				opacity: 0.8;
			}
		}

		.member-social {
			top: 50%;
			opacity: 1;
		}
	}
}