forbidals

Back Back Up Advanced Editor

@import '../../common';
 
.rs-team-grid {
	.owl-stage-outer {
		overflow-y: visible;
	}
	.team-item {
		margin-bottom: 125px;
		position: relative;
		overflow: visible;
		margin-left: 20px;
		margin-right: 20px;
		-webkit-transition: 0.3s all ease;
		transition: 0.3s all ease;
		&:before {
			display: none;
			background: transparent;
		}
		.image-wrap {
			overflow: hidden;
			position: relative;
			.social-icons {
				.social-icon {
					svg {
						width: 18px;
						height: 18px;
						fill: #fff;
					}
				}
				a {
					display: inline-block;
					margin: 0 8px;
					i {
						color: #fff;
						font-size: 15px;
						-webkit-transition: 0.3s all ease;
						transition: 0.3s all ease;
					}
				}
			}
			img {
				transform: scale(1);
				transition: 0.3s ease-in-out;
			}
		}
		.team-content {
			background: #fff;
			padding: 20px;
			text-align: center;
			z-index: 9;
			position: absolute;
			z-index: 1;
			opacity: 1;
			width: unset;
			height: unset;
			display: inline-block;
			border-radius: 2px;
			top: unset;
			bottom: -80px;
			padding: 20px 20px 25px;
			left: 50%;
			max-width: 300px;
			transform: translateX(-50%);
			width: 100%;
			.team-name {
				display: block;
				font-size: 24px;
				line-height: 36px;
				margin-bottom: 0px;
				text-transform: capitalize;
				font-weight: 700;
				a {
					color: $titleColor;
				}
			}
			.team-title {
				font-size: 16px;
				font-weight: 400;
				padding-top: 5px;
				display: block;
				color: $bodyColor;
			}
			.team-desc {
				font-size: 14px;
				margin-bottom: 0;
				color: $bodyColor;
				position: relative;
				z-index: 1;
				max-height: 0;
				opacity: 0;
				line-height: 24px;
				-webkit-transition: all 0.6s, max-height 0.5s;
				-o-transition: all 0.6s, max-height 0.5s;
				-moz-transition: all 0.6s, max-height 0.5s;
				transition: all 0.6s, max-height 0.5s;
				overflow: hidden;
				-webkit-transform: scaleY(0);
				-moz-transform: scaleY(0);
				-ms-transform: scaleY(0);
				-o-transform: scaleY(0);
				transform: scaleY(0);
				-webkit-transform-origin: bottom;
				-moz-transform-origin: bottom;
				-ms-transform-origin: bottom;
				-o-transform-origin: bottom;
				transform-origin: bottom;
				&:before {
					content: '';
					position: absolute;
					z-index: 1;
					background: #010d14;
					top: 0;
					left: 50%;
					width: 50px;
					height: 2px;
					margin-left: -25px;
				}
			}
			&:after {
				position: absolute;
				content: "";
				left: 0;
				bottom: 0;
				background-color: $primaryColor;
				height: 2px;
				width: 0;
				-webkit-transition: 0.3s all ease;
				transition: 0.3s all ease;
			}
			
		}
		&:hover {
			.team-content {
				opacity: 1;
				top: unset;
				.team-desc {
					position: relative;
					max-height: 400px;
					opacity: 1;
					text-align: center;
					-webkit-transform: scaleY(1);
					-moz-transform: scaleY(1);
					-ms-transform: scaleY(1);
					-o-transform: scaleY(1);
					transform: scaleY(1);
					-webkit-transition: all 0.4s, max-height 1.5s;
					-o-transition: all 0.4s, max-height 1.5s;
					-moz-transition: all 0.4s, max-height 1.5s;
					transition: all 0.4s, max-height 1.5s;
					padding-top: 18px;
					margin-top: 8px;
				}

&:after {
					width: 100%;
				}
			}
			
		}
	}
	
}

.team-grid-style1 {
	.team-item {
		.image-wrap {
			.social-icons {
				position: absolute;
				height: 39px;
				background-color: $primaryColor;
				border-radius: 2px 0px 0px 2px;
				right: -108px;
				top: 65px;
				-webkit-transition: 0.3s all ease;
				transition: 0.3s all ease;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 10px;
			}

img {
				width: 100%;
			}
		}
		&:hover {
			.image-wrap { 
				.social-icons {			
					right: 0;	
				}
			}
			
		}
	}
	&.clip-path-enable {
		.team-item {
			.image-wrap {
				clip-path: polygon(0% 0%, 88% 0, 100% 10%, 100% 100%, 0% 100%) !important;
			}
		}
	}
}

.team-grid-style2 {
	.team-item {
		.image-wrap {
			.social-icons {
				position: absolute;
				height: 39px;
				background-color: #EA5501;
				border-radius: 2px 0px 0px 2px;
				left: 50%;
				bottom: -8px;
				transform: translate(-50%, 0px);
				-webkit-transition: 0.3s all ease;
				transition: 0.3s all ease;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 10px;
			}
		}
		
		&:hover {
			.image-wrap { 
				.social-icons {			
					bottom: 31px;
				}
				img {
					transform: scale(1.1);
				}
			}
			
		}
	}
}

.team-grid-style3 {
	.team-item {
		.team-content {
			transition: all 0.5s ease;
			bottom: 0;
			opacity: 0;
			visibility: hidden;
			text-align: left;
			&:after {
				display: none;
			}
		}

.image-wrap {
			overflow: hidden;
			img {
				transform: scale(1.01);
				transition: all 0.4s ease;
			}
		}
		.social-icons {
			display: none;
			align-items: center;
			justify-content: center;
			.social-icon {
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				margin: 0 5px;
				transition: all 0.5s ease;
				svg {
					width: 18px;
					height: 18px;
				}
			}
			&.social-enable{
				display: flex;
			}
		}
		
		&:hover {
			.image-wrap { 
				.social-icons {			
					bottom: 31px;
				}
				img {
					transform: scale(1.1);
				}
			}
			.team-content {
				transform: translate(-50%,-35px);
				opacity: 1;
				visibility: visible;
			}
			
		}
	}
}

.rspopup_style1 {
	.rs-social-icons {
		.social-icons1 {
			display: flex;
			.social-icon {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}