.contacto{
	position: fixed;
	top: 25%;
	left: 0;
	width: 50px;
	height: 160px;
	background-color: rgba(0,0,0,0.8);
	border-radius: 0 20px 20px 0;
	display: flex;	
	flex-direction: column;	
	gap: 8px;
	transition: .8s;
	z-index: 5;
	
}
.contacto:hover{
	width: 70px;
	cursor: pointer;
}
.contacto div{
	text-align: center;
	margin: 5px;
}
.contacto h3{
	font-size: 18px;
	transform: rotate(90deg);
	color: #fff;	
}
.contacto i{
	font-size: 30px;
	color: #fff;
}
/*******************************RESPONSIVE DESING************************************/
@media screen and (max-width: 800px){
	.contacto{
		position: relative;
		width: 250px;
		height: 50px;
		text-align: center;
		justify-content: center;
		align-items: center;
		flex-direction: initial;
		border-radius: 50px 50px 50px 50px;
		margin: 20px auto;
	}
	.contacto h3, .contacto i{		
		transform:  rotate(0deg);
	}	
}