.social_bar{
	position: fixed;
	top: 30%;
	right: 0;
	background-color: #ff0505;
	width: 80px;
	height: 420px;
	border-radius: 50px 0 0 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 5px;
	z-index: 5;
	
}
.social_item{
	width: 60px;
	height: 60px;
	border: 1px solid #fff;
	border-radius: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: .5s;
}
.social_item:hover{
	border-radius: 15px;
	border: 2px solid #fff;
}
.social_item i{
	font-size: 35px;
	color: #fff;
}
/*******************************RESPONSIVE DESING************************************/
@media screen and (max-width: 800px){
	.social_bar{
		position: relative;
		background-color: transparent;
		width: 100%;
		height: 70px;
		flex-direction: initial;
	}
	.social_item{
	border: 1px solid #ff0505;
	}
	.social_item i{
		color: #ff0505;
	}	
}
@media screen and (max-width: 450px){
	.social_item{
		width: 40px;
		height: 40px;
	}
	.social_item i{
		font-size: 30px;
	}	
}