.team-one{
	&__single{
		position: relative;
		margin-bottom: 30px;
	}
	&__image{
		border-radius: 15px;
		overflow: hidden;
		img{
			border-radius: 15px;
			transition: all 0.35s;
		}
	}
	&__content{
		position: relative;
		z-index: 1;
		padding-right: 30px;
		margin-top: -70px;
		&:before{
			content: "";
			position: absolute;
			bottom: 30px;
			left: 30px;
			right: 50px;
			display: block;
			-webkit-mask-image: url('#{$image-theme-path-base}polygon-team-2.png');
		    mask-image: url('#{$image-theme-path-base}polygon-team-2.png');
		    -webkit-mask-repeat: no-repeat;
		    mask-repeat: no-repeat;
		    -webkit-mask-size: 100%;
		    mask-size: 100%;
		    min-height: 152px;
		    background: $theme-color-2;
		    transition: all 0.35s;
		    @media(max-width: 375px){
		    	min-height: 135px;
		    }
		}
	}
	&__content-inner{
		background: $bg-gray;
		transition: all 0.35s;
		padding: 40px 10px 20px 25px;
		border-radius: 0 20px 20px 20px;
		position: relative;
	   overflow: hidden;
	   width: 100%;
	   mask-image: url('#{$image-theme-path-base}polygon-team.png');
	   mask-repeat: no-repeat;
	   mask-size: 100%;
	   min-height: 159px;
	   box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.06);
	   display: flex;
	   align-items: flex-end;
	   @media(max-width: 375px){
	    	min-height: 135px;
	   }
	}
	&__socials{
		position: absolute;
		bottom: 100%;
		left: 40px;
		margin-bottom: -65px;
		z-index: 2;
		background: $white;
		padding: 10px;
		border-radius: 30px;
		opacity: 0;
		transform: translateY(30px);
		transition: all 0.35s;
	}
	&__social-control{
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background: $bg-gray;
		line-height: 36px;
		font-size: 14px;
		text-align: center;
		color: $white;
		&:hover{
			cursor: pointer;
			background: $theme-color;
		}
	}
	&__social-links{
		position: relative;
		transform: translateY(30px);
		z-index: -1;
		transition: all 0.35s;
		a{
			display: block;
			margin-bottom: 5px;
			width: 36px;
			height: 36px;
			border-radius: 50%;
			background: $bg-gray;
			line-height: 36px;
			font-size: 14px;
			text-align: center;
			color: $link-color;
			transition: all 0.35s;
			&:hover{
				color: $white;
				background: $theme-color;
			}
		}
	}
	&__name{
		font-weight: 700;
		font-size: 18px;
		margin: 0;
		transition: all 0.35s;
	}
	&__job{
		font-size: 14px;
		font-weight: 500;
		transition: all 0.35s;
	}
	&__single{
		&:hover{
			.team-one{
				&__content:before{
					background: $theme-color;
				}
				&__content-inner{
					background: $theme-color-2;
				}
				&__socials{
					opacity: 1;
					transform: translateY(0);
				}
				&__social-links{
					transform: translateY(0);
				}
				&__name{
					color: $white;
				}
				&__job{
					color: $white;
				}
			}
		}
	}
}
.team-two{
	&__single{
		position: relative;
		margin-bottom: 30px;
	}
	&__image{
		border-radius: 20px;
		position: relative;
	    overflow: hidden;
	    width: 100%;
	    -webkit-mask-image: url('#{$image-theme-path-base}polygon-team-2.png');
	    mask-image: url('#{$image-theme-path-base}polygon-team-2.png');
	    -webkit-mask-repeat: no-repeat;
	    mask-repeat: no-repeat;
	    -webkit-mask-size: 100%;
	    mask-size: 100%;
		img{
			transition: all 0.35s;
			border-radius: 20px;
		}
		&:after {
		    content: '';
		    width: 100%;
		    height: 100%;
		    position: absolute;
		    bottom: 0;
		    left: 0;
		    z-index: 2;
		    -webkit-transition: .5s;
		    transition: .5s;
		    background: var(--e-global-color-primary);
		    background: -webkit-gradient(linear,left top,left bottom,from(rgba(13,13,63,0)),to(#12292B));
		    background: linear-gradient(180deg,rgba(13,13,63,0) 0%,#12292B 100%);
		}
	}
	&__content{
		position: relative;
		z-index: 1;
		border-radius: 20px;
	    padding: 20px 30px;
	    -webkit-transition: all .5s;
	    transition: all .5s;
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	    z-index: 3;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-align: end;
	    -ms-flex-align: end;
	    align-items: flex-end;
	    justify-content: center;
	}
	&__content-inner{
		
	}
	&__social-control{
		position: absolute;
		left: 15px;
		top: 15px;
		width: 39px;
		height: 39px;
		border-radius: 50%;
		background: $theme-color;
		line-height: 36px;
		font-size: 14px;
		text-align: center;
		color: $white;
		&:hover{
			cursor: pointer;
		}
	}
	&__social-links{
		position: absolute;
		top: 0;
		right: 8px;
		z-index: 2;
		transition: all 0.35s;
		border-radius: 30px;
		background: #F1F3F3;
		padding: 10px;
		a{
			display: block;
			margin-bottom: 5px;
			width: 36px;
			height: 36px;
			border-radius: 50%;
			background: $white;
			line-height: 36px;
			font-size: 14px;
			text-align: center;
			color: $theme-color-2;
			transition: all 0.35s;
			&:hover{
				color: $white;
				background: $theme-color;
			}
		}
	}
	&__name{
		font-weight: 600;
		font-size: 22px;
		margin: 0 0 5px;
		color: $white;
	}
	&__job{
		color: $white;
	}
	&__desc{
		color: $white;
	}
	&__single{
		&:hover{
			.team-two{
				&__social-links{
					
				}
			}
		}
	}
}

.team-three{
	&__single{
		position: relative;
		margin-bottom: 30px;
	}
	&__image{
		border-radius: 15px;
		overflow: hidden;
		img{
			border-radius: 15px;
			transition: all 0.35s;
		}
	}
	&__content{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: flex-end;
	}
	&__content-inner{
		background: $white;
		transition: all 0.35s;
		padding: 40px 15px;
		padding-top: 60px;
		border-radius: 0 0 16px 16px;
		text-align: center;
		position: relative;
	    overflow: hidden;
	    width: 100%;
	    -webkit-mask-image: url('#{$image-theme-path-base}polygon-team-3.png');
	    mask-image: url('#{$image-theme-path-base}polygon-team-3.png');
	    -webkit-mask-repeat: no-repeat;
	    mask-repeat: no-repeat;
	    -webkit-mask-size: 100%;
	    mask-size: 100%;
	    &:before{
	    	content: "";
	    	position: absolute;
	    	left: 0;
	    	bottom: 0;
	    	width: 100%;
	    	height: 0;
	    	display: block;
	    	background: $theme-color;
	    	opacity: 0;
	    	z-index: -1;
	    	transition: all 0.35s;
	    }
	}
	&__socials{
		position: absolute;
		top: 25px;
		right: 25px;
		z-index: 2;
	}
	&__social-control{
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background: $theme-color;
		line-height: 36px;
		font-size: 14px;
		text-align: center;
		color: $white;
		&:hover{
			cursor: pointer;
		}
	}
	&__social-links{
		position: relative;
		opacity: 0;
		transform: translateY(30px);
		z-index: -1;
		transition: all 0.35s;
		a{
			display: block;
			margin-top: 5px;
			width: 36px;
			height: 36px;
			border-radius: 50%;
			background: $white;
			line-height: 36px;
			font-size: 14px;
			text-align: center;
			color: $theme-color-2;
			transition: all 0.35s;
			&:hover{
				color: $white;
				background: $theme-color-2;
			}
		}
	}
	&__name{
		font-weight: 600;
		font-size: 22px;
		margin: 0 0 5px;
		transition: all 0.35s;
	}
	&__desc{
		font-size: 16px;
		transition: all 0.35s;
	}
	&__single{
		&:hover{
			.team-three{
				&__social-links{
					opacity: 1;
					transform: translateY(0);
				}
				&__content-inner{
					&:before{
						opacity: 1;
						height: 100%;
					}
				}
				&__name, &__desc{
					color: $white;
				}
			}
		}
	}
}
.item-active.center{
	.team-one{
		&__content:before{
			background: $theme-color;
		}
		&__content-inner{
			background: $theme-color-2;
		}
		&__socials{
			opacity: 1;
			transform: translateY(0);
		}
		&__social-links{
			transform: translateY(0);
		}
		&__name{
			color: $white;
		}
		&__job{
			color: $white;
		}
	}
	.team-three{
		&__social-links{
			opacity: 1;
			transform: translateY(0);
		}
		&__content-inner{
			&:before{
				opacity: 1;
				height: 100%;
			}
		}
		&__name, &__desc{
			color: $white;
		}
	}
}