/*--------------------------------------------------------------
TEAM GRID
----------------------------------------------------------------
# Team Grid
--------------------------------------------------------------*/
.pxl-team-style1 {
	.pxl-item--image {
		a {
			z-index: 1;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}
	.pxl-item--holder {
		background-color: #fff;
		padding: 15px 20px;
		position: absolute;
		bottom: 15px;
		left: 15px;
		right: 15px;
		text-align: center;
		z-index: 2;
	}
	.pxl-item--divider {
		height: 100%;
		position: absolute;
		top: 0;
		width: 15px;
		@include transition(all 220ms linear 0ms);
		&:before, &:after {
			content: '';
			height: 100%;
			position: absolute;
			top: 0;
		}
		&:before {
			width: 8px;
			background-color: $primary_color;
		}
		&:after {
			width: 7px;
			background-color: #fff;
		}
	}
	.pxl-item--divider1 {
		left: -15px;
		transform-origin: center right;
		transform: perspective(500px) rotateY(-90deg);
		&:before {
			left: 0;
		}
		&:after {
			right: 0;
		}
	}
	.pxl-item--divider2 {
		right: -15px;
		transform-origin: center left;
		transform: perspective(500px) rotateY(90deg);
		&:before {
			right: 0;
		}
		&:after {
			left: 0;
		}
	}
	.pxl-item--title {
		margin-bottom: 0;
	}
	.pxl-item--position {
		font-size: 16px;
		line-height: 1.625;
		color: $primary_color;
	}
	.pxl-item--social {
		position: absolute;
		top: -64px;
		left: 0;
		right: 0;
		display: inline-flex;
		flex-wrap: wrap;
		justify-content: center;
		a {
			display: inline-flex;
			width: 38px;
			height: 38px;
			background-color: #fff;
			border-radius: 38px;
			justify-content: center;
			align-items: center;
			font-size: 15px;
			color: $primary_color;
			margin: 6px;
			@include transition(all 220ms linear 0ms);
			transform: translateY(-24px);
			opacity: 0;
			&:hover {
				color: #fff;
				background-color: $primary_color;
			}
		}
	}
	.pxl-item--inner {
		margin-bottom: 30px;
		position: relative;
		&:hover {
			.pxl-item--divider {
				transform: perspective(500px) rotateY(0deg);
			}
			.pxl-item--social a {
				opacity: 1;
				transform: translateY(0px);
				&:nth-child(2) {
					transition-delay: 0.1s;
				}
				&:nth-child(3) {
					transition-delay: 0.18s;
				}
				&:nth-child(4) {
					transition-delay: 0.26s;
				}
				&:nth-child(5) {
					transition-delay: 0.34s;
				}
				&:nth-child(5) {
					transition-delay: 0.42s;
				}
			}
		}
	}
}

.pxl-team-style2 {
	.pxl-item--image {
		position: relative;
		margin-bottom: 20px;
		a {
			@extend .pxl-spill;
			z-index: 99;
		}
	}
	.pxl-item--title {
		margin-bottom: 10px;
		color: #2E3D62;
	}
	.pxl-item--position {
		font-size: 13px;
		color: #677788;
		margin-bottom: 2px;
	}
	.pxl-item--social {
		display: inline-flex;
		margin: 0 -14px;
		a {
			font-size: 14px;
			color: #677788;
			display: inline-flex;
			padding: 0 14px;
			&:hover {
				color: $primary_color;
			}
		}
	}
}