.profile-back{
	position:relative;
	img{
		width:100%;
		height:25rem;
		object-fit: cover;
		border-radius: 1.25rem;
		@include respond ('phone'){
			height:20rem;
		}
	}	
	.social-btn{
		position:absolute;
		bottom: 3rem;
		#{$dlab-pos-right}: 2rem;
		z-index:1;
		.social{
			background:rgba(239, 239, 239, 0.22);	
			border:0;
			color: $white;
			margin-#{$dlab-pos-right}:1rem;
			
			
		}
		.btn{
			&:hover{
				color:$white;	
			}
			
			&.btn-light{
				&:focus{
					color:$white;
				}
			}
			
		}
		@include respond ('tab-port'){
			bottom:unset;
			top:2rem;
		}
		@include respond ('phone'){
			#{$dlab-pos-right}:0;
			padding:0 15px;
			.social{
				margin-#{$dlab-pos-right}:0.2rem;
				margin-bottom:0.5rem;
			}
		}
		.btn.btn-primary{
			@include respond ('phone'){
				margin-bottom:0.5rem;
			}
		}
			
	}
	&:after{
		position:absolute;
		content:"";
		height:100%;
		width:100%;
		top:0;
		#{$dlab-pos-left}:0;
		border-radius:1.25rem;
		background: linear-gradient(to bottom,  rgba(0,0,0,0.35) 0%,rgba(0,0,0,0.57) 100%);
	}
	
}
.profile-pic{
		margin-top: -9rem;
		position: relative;
		padding-#{$dlab-pos-left}:3rem;
	img{
		height: 11.688rem;
  		width: 11.688rem;
		border-radius:1.25rem;
		border:0.5rem solid $white;
		margin-#{$dlab-pos-right}:1.5rem;
	}
	.profile-info2{
		color:$white;
		padding-top: 1rem;
		h2{
			font-size:2rem;
			font-weight:600;
			color:$white;
			@include respond ('phone'){
				font-size: 1.25rem;
			}
		}
		h4{
			font-size:1rem;
			font-weight:500;
			color:rgba($white,.8);
			@include respond ('phone'){
				font-size: 0.875rem;
			}
		}
	}

	@include respond ('tab-port'){
		margin-top:-8rem;
		align-items:center;
		img{
			height:6.688rem;
			width:6.688rem;	
			margin-#{$dlab-pos-right}:1rem;
			border-width:3px;
		}
		.profile-info2{
			padding-top: 0;
		}
		padding-#{$dlab-pos-left}:1rem;
		padding-#{$dlab-pos-right}:1rem;
	}
	@include respond ('phone'){
		margin-top:-6.7rem;
		img {
			height: 5.688rem;
			width: 5.688rem;
			border-width: 2px;
			border-radius: 10px;
		}
	}
	
}
.contacts-social{
	span{
		i{
			height: 2.563rem;
			width: 2.563rem;
			background: var(--primary);
			color: #fff;
			border-radius: 2.563rem;
			text-align: center;
			line-height: 2.563rem;
			font-size: 1rem;
			display: block;
		}	
	}	
}
.bg-facebook{
	&.light{
		background:rgba(71,113,213,0.15);	
		color: var(--text-dark);
		
		&:hover{
			background-color:#3d6adc;
			color:$white;
			
			.text-facebook{
				color:$white;
			}
		}
	}
}
.bg-linkedin{
	&.light{
		background:rgba(14,121,179,0.15);		
		color: var(--text-dark);
		
		&:hover{
			background-color:#0073b1;
			color:$white;
			
			.text-linkedin{
				color:$white;
			}
			
		}
	}
}	
.bg-dribble{
	&.light{
		background:rgba(231,85,141,0.15);	
		color: var(--text-dark);
			&:hover{
				background-color:#EA4C89;
				color:$white;
				.text-dribble{
					color:$white;
				}
				
			}
	}
}
.bg-youtube{
	&.light{
		background:rgba(251,14,14,0.15);	
		color: var(--text-dark);
		&:hover{
			background-color:#FF0000;
			color:$white;

				.text-youtube{
					color:$white;
				}
		}
	}
}
.text-facebook{
	color:#3D6AD6;	
	
	
}
.text-linkedin{
	color:#0073B1;	
}
.text-dribble{
	color:#EA4C89;	
}
.text-youtube{
	color:#FF0000;	
}
.text-youtube,
.text-linkedin,
.text-facebook,
.text-dribble{
	position:relative;
	margin-#{$dlab-pos-right}:35px;
	
	&:after{
		
		position: absolute;
		content: "";
		background-color: rgba(255, 255, 255, 0.7);
		top: -7px;
		#{$dlab-pos-left}: 22px;
		width: 1px;
		height: 31px;


	}
}

.upload{
	a{
		height: 3.313rem;
		width: 3.313rem;
		border-radius: 2.313rem;
		background: rgba(255, 255, 255, 0.2);
		display: block;
		text-align: center;
		line-height: 3.313rem;
		font-size: 1.5rem;
		color: #fff;
	}	
}