.icons
{
	position: fixed;
	top: 30%;
	right: 0%;
	width: 65px;
	display: flex;
	flex-direction: column;
	z-index: 9999;
}

.icons a
{
	font-family: "Roboto", sans-serif;
	text-decoration: none;
	text-transform: uppercase;
	padding: 10px;
	font-size: 16px;
	margin: 2px;
	text-align: left;
	border-radius: 15px;
	transform: translate(0px, 0px);
	transition: all 0.5s;
	transition-property: transform;
}

.icons a:hover
{
	transform: translate(0px, 0px);
}

.icons a i
{
	margin-right: 20px;
	background-color: #fff;
	height: 40px;
	width: 40px;
	color: #000;
	text-align: center;
	line-height: 40px;
	border-radius: 50%;
	transition: all 0.5s;
	transition-property: transform;
}

.icons a:hover i
{
	transform: rotate(180deg);
}

.icons.dimmed {
  opacity: 0.5;
  transition: opacity 0.5s ease;
}

.icons a i.fa-phone-alt
{
	color: #FFD700;
	font-weight: 600;
}

.icons a i.fa-envelope-open
{
	color: #D9232D;
	font-weight: 600;
}

.icons a i.fa-facebook-messenger
{
	color: #2C80D3;	
	font-weight: 600;
}

.icons a i.fa-whatsapp
{
	color: #25D366;
	font-weight: 600;
}

.icons a i.fa-telegram
{
	color: #0088CC;
	font-weight: 600;
}

.call
{
	background-color: #FFD700;
	color: #fff;
}

.email
{
	background-color: #D9232D;
	color: #fff;
}

.fbm
{
	background-color: #2C80D3;
	color: #fff;
}

.whats
{
	background-color: #25D366;
	color: #fff;
}

.teleg
{
	background-color: #0088CC;
	color: #fff;
}

.call:hover
{	
	color: #fff;
}

.email:hover
{	
	color: #fff;
}

.fbm:hover
{	
	color: #fff;
}

.whats:hover
{	
	color: #fff;
}

.teleg:hover
{	
	color: #fff;
}

@media screen and (min-width: 300px) and (max-width: 600px)
{
	.icons
	{
		position: fixed;
		top: 30%;
		right: 0%;
		width: 45px;
		display: flex;
		flex-direction: column;
		z-index: 2;
	}

	.icons a
	{
		font-family: "Roboto", sans-serif;
		text-decoration: none;
		text-transform: uppercase;
		padding: 10px;
		font-size: 10px;
		margin: 2px;
		text-align: left;
		border-radius: 15px;
		transform: translate(0px, 0px);
		transition: all 0.5s;
		transition-property: transform;
	}

	.icons a:hover
	{
		transform: translate(0px, 0px);
	}

	.icons a i
	{
		margin-right: 20px;
		background-color: #fff;
		height: 20px;
		width: 20px;
		color: #000;
		text-align: center;
		line-height: 20px;
		border-radius: 50%;
		transition: all 0.5s;
		transition-property: transform;
	}

	.icons a:hover i
	{
		transform: rotate(180deg);
	}

	.icons a i.fa-phone-alt
	{
		color: #FFD700;
		font-weight: 600;
	}

	.icons a i.fa-envelope-open
	{
		color: #D9232D;
		font-weight: 600;
	}

	.icons a i.fa-facebook-messenger
	{
		color: #2C80D3;	
		font-weight: 600;
	}

	.icons a i.fa-whatsapp
	{
		color: #25D366;
		font-weight: 600;
	}

	.icons a i.fa-whatsapp:hover
	{
		color: #25D366;
		font-weight: 600;
		/* transform: rotate(180deg); */
	}

	.icons a i.fa-telegram
	{
		color: #0088CC;
		font-weight: 600;
	}

	.call
	{
		background-color: #FFD700;
		color: #fff;
	}

	.email
	{
		background-color: #D9232D;
		color: #fff;
	}

	.fbm
	{
		background-color: #2C80D3;
		color: #fff;
	}

	.whats
	{
		background-color: #25D366;
		color: #fff;
	}

	.teleg
	{
		background-color: #0088CC;
		color: #fff;
	}

	.call:hover
	{	
		color: #fff;
	}

	.email:hover
	{	
		color: #fff;
	}

	.fbm:hover
	{	
		color: #fff;
	}

	.whats:hover
	{	
		color: #fff;
	}

	.teleg:hover
	{	
		color: #fff;
	}
}