/* 
    Created on : 14.12.2015
    Author     : Crumina
	Styles for : New team member module
*/
.dfd-team-member {
	text-align: center;
	position: relative;

	.wrap-delimiter {
		font-size: 0;
	}

	.widget.soc-icons a {
		font-size: 15px;
	}

	.ovh {
		overflow: hidden;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.image-wrap {
		position: relative;
		display: inline-block;

		img {
			display: block;
			min-width: 100%;
		}
	}

	.image-custom-link,
	.overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: block;
	}
	.image-custom-link {
		background: transparent;
	}

	.overlay {
		background: fade(@forth-site-dark-color, 30%);
		.opacity(0);
		visibility: hidden;
		.transition(~"opacity .3s ease, visibility .3s ease");
	}

	&:hover {
		.overlay {
			visibility: visible;
			.opacity(1);
		}
	}

	.delimiter {
		display: inline-block;
		margin: 10px 0;
		border-bottom: 1px solid fade(#000, 10%);
		max-width: 80%;
		width: 100%;
		.transition(border-color .3s ease);
	}

	.team-member-title {
		padding-top: 15px;
	}
	.subtitle {
		font-size: 14px;
		color: #a7a7a7;
		padding: 5px 0;
	}
	.soc-icons {
		margin-top: 20px;
		display: inline-block;
	}
	.content-wrap {
		min-width: 200px;
		overflow: hidden;
	}
	&.team-full-width-owerlay {
		.image-wrap {
			.block();
			img {
				min-width: auto;
				margin: 0 auto;
			}
		}
		.content-wrap {
			max-width: initial !important;
		}
	}
	&.layout-02 {
		.clearfix();
		.image-wrap {
			float: left;
			margin-right: 20px;
		}
		.content-wrap {
			text-align: left;
			.team-member-title {
				padding-top: 0;
			}
			.subtitle {
				padding-bottom: 20px;
				+ .wrap-delimiter {
					margin-top: -15px;
				}
			}
		}
	}
	&.layout-03 {
		.clearfix();
		.image-wrap {
			float: right;
			margin-left: 20px;
		}
		.content-wrap {
			text-align: right;
			.team-member-title {
				padding-top: 0;
			}
			.subtitle {
				padding-bottom: 20px;
				+ .wrap-delimiter {
					margin-top: -15px;
				}
			}
		}
	}
	&.layout-04 {
		.delimiter {
			margin-bottom: 0;
			margin-top: 5px;
		}
		.image-wrap {
			margin: 10px 0 15px;
		}
	}
	&.layout-05,
	&.layout-10 {
		.title-wrap {
			position: absolute;
			bottom: 14px;
			width: 100%;
		}
		.subtitle {
			color: fade(@main-site-dark-color, 75%) !important;
		}
		.wrap-delimiter {
			.hide();
		}
		.team-member-title {
			color:@main-site-dark-color;
		}
		.team-member-description {
			margin-top: 10px;
		}
		.overlay {
			background: linear-gradient(to bottom, transparent 60%, fade(#000, 50%));
		}
	}
	&.layout-05 {
		.overlay {
			opacity: 1;
			visibility: visible;
		}
	}
	&.layout-06,
	&.layout-07 {
		&:hover {
			.delimiter {
				margin: 10px 0 0;
				border-bottom-color: fade(@main-site-dark-color, 20%);
			}
			.title-wrap {
				top: 50%;
				.transform(translateY(-50%));
				.feature-title {
					color: @main-site-dark-color !important;
				}
				.subtitle {
					color: fade(@main-site-dark-color, 75%) !important;
				}
			}
		}

		.team-member-description {
			margin-top: 10px;
		}

		.title-wrap {
			.abs();
			top: 100%;
			left: 20px;
			right: 20px;
			display: block;
			.transition(~"top .3s ease, bottom .3s ease, -webkit-transform .3s ease, -moz-transform .3s ease, -o-transform .3s ease, transform .3s ease");
		}

	}
	&.layout-06,
	&.layout-07,
	&.layout-08,
	&.layout-09,
	&.layout-10 {
		.content-wrap {
			min-height: 80px;
			> div {
				opacity: 0;
				.transform(translateY(110%));
				.transition-transform(.3s ease);
				.transition(~"opacity .3s ease, transform .3s ease");
			}
		}

		&:hover {
			.content-wrap {
				> div {
					.opacity(1);
					.transform(translateY(0));
				}
			}
		}
	}
	&.layout-07 {
		.wrap-delimiter {
			opacity: 1;
			.transition(~"opacity .3s ease");
		}
		&:hover {
			.title-wrap {
				.transform(translateY(-100%));
				top: 100%;
			}
			.wrap-delimiter {
				opacity: 0;
			}
		}
	}
	&.layout-08 {
		.content-wrap {
			margin-top: 10px;
		}
		.wrap-delimiter {
			display: none;
		}
		.title-wrap {
			margin-bottom: 10px;
		}
	}

	&.layout-09 {
		.ovh > .title-wrap {
			position: absolute;
			top: 20%;
			left: 20px;
			right: 20px;
			.opacity(0);
			.transform(translateY(-50%));
			.transition(~"top .3s ease, opacity .3s ease");

			.team-member-description {
				opacity: 0;
				visibility: hidden;
			}
		}
		.content-wrap {
			position: absolute;
			top: 80%;
			left: 20px;
			right: 20px;
			display: block;
			.opacity(0);
			.transform(translateY(-50%));
			.transition(~"top .3s ease, opacity .3s ease");

			.title-wrap {
				opacity: 0;
				visibility: hidden;
			}

		}
		.team-member-description,
		.feature-title{
			color: @main-site-dark-color;
		}
		.subtitle {
			color: fade(@main-site-dark-color, 75%);
		}
		.delimiter {
			border-bottom-color: fade(@main-site-dark-color, 20%);
		}
		.soc-icons-wrap {
			> div {
				opacity: 0;
				.transform(translateY(110%));
				.transition-transform(.3s ease);
				.transition(~"opacity .3s ease, transform .3s ease");
			}
		}
		&:hover {
			.ovh > .title-wrap {
				top: 50%;
				.opacity(1);
			}
			.content-wrap {
				top: 50%;
				.opacity(1);
				> div {
					.transform(translateY(0));
				}
			}
			.soc-icons-wrap {
				> div {
					.opacity(1);
					.transform(translateY(0));
				}
			}

		}
	}
	&.layout-10 {
		.title-wrap {
			opacity: 0;
			.transition(~"opacity .4s ease");
		}
		&:hover {
			.title-wrap {
				opacity: 1;
			}
		}
	}
	&.layout-11 {
		.soc-icon-wrap {
			.abs();
			.block();
			width: 100%;
			bottom: 50%;
			line-height: .5;
			margin-top: 0;
			opacity: 0;
			visibility: hidden;
			.transition(~"bottom .3s ease, opacity .3s ease, visibility .3s ease");
			.soc-icons {
				a {
					color: @main-site-dark-color;
				}
				&.dfd-soc-icons-hover-style-4 a {
					&:after {
						background: @main-site-dark-color;
					}
				}
			}
		}
		.title-wrap {
			.abs();
			top: 100%;
			left: 0;
			.block();
			width: 100%;
			padding: 10px 0;
			.transition(~"top .3s ease, -webkit-transform .3s ease, -moz-transform .3s ease, -o-transform .3s ease, transform .3s ease");
			.team-member-title {
				padding-top: 0;
				.transition(color .3s ease);
			}
			.team-member-subtitle {
				.transition(color .3s ease);
			}
		}
		.content-wrap {
			position: relative;
			overflow: hidden;
			min-height: 60px;
			margin: 0 auto;
			.team-member-description {
				padding: 15px 0;
				.transform(translateY(110%));
				.transition(transform .3s ease);
			}
		}
		&:hover {
			.title-wrap {
				top: 50%;
				.transform(translateY(-50%));
				.team-member-title {
					color: @main-site-dark-color;
				}
				.team-member-subtitle {
					color: rgba(255,255,255,0.5);
				}
			}
			.soc-icon-wrap {
				bottom: 20px;
				visibility: visible;
				opacity: 1;
			}
			.content-wrap {
				.team-member-description {
					.transform(translateY(0));
				}
			}
		}
	}
}
.module-shadow-hover,
.dfd-team-member .module-shadow-hover {
	transition: box-shadow 0.3s ease-in-out;
}
.module-shadow-permanent,
.module-shadow-hover:hover,
.dfd-team-member:hover .module-shadow-hover {
	box-shadow: 0 4px 30px fade((#000), 25%);
}