// Team area 1
.team_area_1{
	@extend .section_padding_2;
	.card{ 
		border-radius: 5px;
		overflow: hidden;
		border: none;
		margin-bottom: 45px;
		&:hover .img_wrapper:after{
			opacity: 1;
			z-index: 2 !important;
		}
		&:hover .img_wrapper .team_social_link{ bottom: 15%; opacity: 1; z-index: 3;}
		.img_wrapper{
			position: relative;
			z-index: 1;
			&:after{
				position: absolute;
				opacity: 0;
				z-index: -1;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				content: '';
				background: rgba(0,0,0, .3);
				@include transition(all,.3s,ease-in-out);
			}	
			.team_social_link{
				background: none;
				text-align: center;
				opacity: 0;
			    position: absolute;
			    z-index: 1;
			    width: 100%;
			    @include transition(all,.3s,ease-in-out);
			    bottom: 5%;
				li{ 
					margin-right: 8px;
					display: inline-block;
					a{ font-size: 0; }
					i {
					    font-size: 16px;
					    display: inline-block;
					    padding: 12px;
					    border-radius: 50%;
					    background: none;
					    @include transition(all,.3s,ease-in-out);
					}
					i.ti-facebook{ 	
						color: $dark;
						background: #fff;
						&:hover{
					    	background: $facebook;
					    	color: #fff;
					    }
					}
					i.ti-vimeo-alt{ 
						background: #fff; 	
						color: $dark;
						&:hover{
					    	background: $vimeo;
					    	color: #fff;
					    }
					}
					i.ti-twitter-alt{ 
							background: #fff;
							color: $dark;
						&:hover{
					    	background: $twitter;
					    	color: #fff;
					    } 
					}
					i.ti-pinterest{
						background: #fff; 	
						color: $dark;
						&:hover{
					    	background: $pinterest;
					    	color: #fff;
					    } 
					}
				}
			}
		}
		.card-body {
		    text-align: center;
		    padding: 35px;
		    background: #07164e;
			h5.card-title {
			    font-size: 24px;
			    @include firasans(700);
			    a{
			    	color: #fff;
			    	@include transition(all, .3s, ease-in-out);
			    	&:hover{
			    		color: $brand;
			    	}
			    }
			}
			p.card-text {
			    font-size: 12px;
			    @include firasans(400);
			    text-transform: uppercase;
			    color: $dark_pink;
			}	
		}
	}
}
	// Team area 2
.team_area_2{
	@extend .section_padding_2;
	margin-top: 50px;
	.card{ 
		border-radius: 5px;
		border: none;
		margin: 35px 0 45px;
		position: relative;
		background: #ffffff1a;
	    top: 0;
	    @include transition(all,.3s,ease-in-out);
		&:hover{
			top: -5px; 
		}
		.img_wrapper{
			position: absolute;
			z-index: 1;
			width: 100px;
			height: 100px;
			left: calc(50% - 50px);
			top:  -50px;
			border-radius: 50%;
			overflow: hidden;
		}	
		.team_social_link{
			background: none;
			text-align: center;
		    width: 100%;
		    @include transition(all,.3s,ease-in-out);
		    bottom: 5%;
			li{ 
				margin-right: 8px;
				display: inline-block;
				a{ font-size: 0; }
				i {
				    font-size: 16px;
				    display: inline-block;
				    padding: 12px;
				    border-radius: 50%;
				    background: none;
				    @include transition(all,.3s,ease-in-out);  
				}
				i.ti-facebook{ 	
					color: $dark;
					background: #fff;
					&:hover{
				    	background: $facebook;
				    	color: #fff;
				    }
				}
				i.ti-vimeo-alt{ 
					background: #fff; 	
					color: $dark;
					&:hover{
				    	background: $vimeo;
				    	color: #fff;
				    }
				}
				i.ti-twitter-alt{ 
						background: #fff;
						color: $dark;
					&:hover{
				    	background: $twitter;
				    	color: #fff;
				    } 
				}
				i.ti-pinterest{
					background: #fff; 	
					color: $dark;
					&:hover{
				    	background: $pinterest;
				    	color: #fff;
				    } 
				}
			}
		}
		.card-body {
		    text-align: center;
		    padding: 25px 20px; 
			h5.card-title {
			    font-size: 24px;
			    margin: 20px 0 20px;
			    @include firasans(700);
			    a{
			    	color: $brand;
			    	margin-bottom: 15px;
			    	@include transition(all, .3s, ease-in-out);
			    	&:hover{ color: $brand; }
			    }
			    span{
				    font-size: 12px;
				    @include firasans(400);
				    text-transform: uppercase;
				    color: $dark_pink;
				    display: block;
			    }
			}
			p.card-text {
			    font-size: 16px;
			    margin-top: 60px;
			    line-height: 1.5;
			    @include firasans(400); 
			    color: $text;
			}	
		}
	}
}