#sy-whatshelp {
	right: 25px;
	bottom: 25px;
	position: fixed;
	z-index: 999;

	a {
		position: relative;
		text-decoration: none;

		&.sywh-open-services {
			background-color: #129BF4;
			color: #fff;
			line-height: 55px;
			margin-top: 10px;
			border: none;
			cursor: pointer;
			font-size: 23px;
			width: 55px;
			height: 55px;
			text-align: center;
			box-shadow: 2px 2px 8px -3px #000;
			border-radius: 100%;
			-webkit-border-radius: 100%;
			-moz-border-radius: 100%;
			-ms-border-radius: 100%;
			display: inline-block;

			i {
				line-height: 55px;

				&.fa-times {
					display: none;
				}
			}

			&[data-tooltip] {
				&::before, &::after {
					display: block;
				}

				&[data-placement="left"] {
					&::before {
						top: 11px;
					}
				}
			}
		}
	}

	.sywh-services {
		width: 55px;
		height: auto;

		a {
			display: none;

			i {
				background-color: #129BF4;color: #fff;line-height: 55px;margin-top: 10px;border: none;cursor: pointer;font-size: 23px;width: 55px;height: 55px;text-align: center;box-shadow: 2px 2px 8px -3px #000;border-radius: 100%;-webkit-border-radius: 100%;-moz-border-radius: 100%;-ms-border-radius: 100%
			}

			&.email {
				i {
					background-color: #b92b27;
				}
			}

			&.instagram {
				i {
					background-color: #e4405f;
				}
			}

			&.facebook {
				i {
					background-color: #3b5999;
				}
			}

			&.twitter {
				i {
					background-color: #55acee;
				}
			}

			&.youtube {
				i {
					background-color: #cd201f;
				}
			}

			&.linkedin {
				i {
					background-color: #0077B5;
				}
			}

			&.google-plus {
				i {
					background-color: #dd4b39;
				}
			}

			&.pinterest {
				i {
					background-color: #bd081c;
				}
			}

			&.skype {
				i {
					background-color: #00AFF0;
				}
			}

			&.messenger {
				i {
					background-color: #0084ff;
				}
			}

			&.whatsapp {
				i {
					background-color: #25D366;
				}
			}

			&.call {
				i {
					background-color: #f60;
				}
			}
		}

		.c-content {
			background-color: #fff;
			width: 250px;
			height: auto;
			right: 0;
			bottom: 66px;
			position: absolute;
			box-shadow: 2px 2px 8px -3px #000;
			border-radius: 10px;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			-ms-border-radius: 10px;
			overflow: hidden;
			display: none;

			span.c-title {
				background-color: #f60;
				color: #fff;
				width: calc(100% - 38px);
				font-size: 14px;
				line-height: 40px;
				height: auto;
				display: inline-block;
				padding: 0 0 0 38px;

				i.fa-phone {
					font-size: 20px;
					position: absolute;
					left: 10px;
					top: 10px;
				}

				i.fa-times {
					float: right;
					font-size: 20px;
					position: absolute;
					right: 10px;
					top: 10px;
					cursor: pointer;
				}
			}

			span.c-phone {
				a {
					color: #f60;
					display: inline-block !important;
					width: 100%;
					padding: 36px 0;
					text-align: center;
					font-weight: 700;
					font-size: 21px;
				}
			}
		}
	}
}

a {
	&[data-tooltip] {
		position: relative;

		&::before, &::after {
			position: absolute;
			display: none;
			opacity: .85;
			transition: all .3s ease-in-out;
			-webkit-transition: all .3s ease-in-out;
			-moz-transition: all .3s ease-in-out;
		}

		&::before {
			content: attr(data-tooltip);
			background: #000;
			color: #fff;
			font-size: 13px;
			padding: 7px 11px;
			white-space: nowrap;
			text-decoration: none;
			border-radius: 5px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			-ms-border-radius: 5px;
		}

		&::after {
			width: 0;
			height: 0;
			border: 6px solid transparent;
			content: '';
		}

		&:hover {
			&::before, &::after {
				display: block;
			}
		}

		&[data-placement="left"] {
			&::before {
				top: -7px;
				right: 100%;
				line-height: normal;
				margin-right: 10px;
			}

			&::after {
				border-left-color: #000;
				border-right: none;
				top: 50%;
				right: 100%;
				margin-top: -6px;
				margin-right: 4px;
			}
		}

		&[data-placement="right"] {
			&::before {
				top: -7px;
				left: 100%;
				line-height: normal;
				margin-left: 10px;
			}

			&::after {
				border-right-color: #000;
				border-left: none;
				top: 50%;
				left: 100%;
				margin-top: -6px;
				margin-left: 4px;
			}
		}

		&[data-placement="top"] {
			&::before {
				bottom: 100%;
				left: 0;
				margin-bottom: 10px;
			}

			&::after {
				border-top-color: #000;
				border-bottom: none;
				bottom: 100%;
				left: 10px;
				margin-bottom: 4px;
			}
		}

		&[data-placement="bottom"] {
			&::before {
				top: 100%;
				left: 0;
				margin-top: 10px;
			}

			&::after {
				border-bottom-color: #000;
				border-top: none;
				top: 100%;
				left: 10px;
				margin-top: 4px;
			}
		}
	}

	&.data-tooltip-hide {
		&[data-tooltip] {
			&::before, &::after {
				display: none !important;
			}
		}
	}
}

@media screen and (max-width: 768px) {
	#sy-whatshelp {
		right: 8px;
		bottom: 8px;

		a.sywh-open-services {
			width: 75px;
			height: 75px;
			line-height: 75px;

			i {
				line-height: 75px;
			}
		}

		.sywh-services {
			a {
				i {
					line-height: 75px;
					width: 75px;
					height: 75px;
				}
			}

			.c-content {
				right: 2px;
				bottom: 83px;
			}
		}

		a.sywh-open-services::before, a.sywh-open-services::after {
			display: none !important;
		}
	}
}

@media screen and (max-width: 380px) {
	#sy-whatshelp {
		right: 8px;
		bottom: 8px;

		a.sywh-open-services {
			width: 66px;
			height: 66px;
			line-height: 66px;

			i {
				line-height: 66px;
			}
		}

		.sywh-services {
			a {
				i {
					line-height: 66px;
					width: 66px;
					height: 66px;
				}
			}

			.c-content {
				right: 2px;
				bottom: 72px;
			}
		}
	}
}

/* Call Now: Start */

a.call-now {
	width: calc(100% - 100px);
	display: none;
	color: #000;
	position: fixed;
	bottom: 8px;
	left: 8px;
	right: 8px;
	z-index: 6000;
	background: #fff;
	padding: 2px 1px 1px 1px;
	border-radius: 60px;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	-ms-border-radius: 60px;
	box-shadow: 2px 2px 8px -3px #000;

	.avatar {
		float: left;
		padding-right: 10px;

		img {
			width: 55px;
			margin: 8px 0 2px 11px !important;
			padding: 0;
			height: auto;
			background-color: rgba(219, 9, 97, 0.03);
			box-shadow: 0 0 0 3px #0000000f;
			border-radius: 100%;
			-webkit-border-radius: 100%;
			-moz-border-radius: 100%;
			-ms-border-radius: 100%;
		}
	}

	.cn-details {
		float: left;
		padding: 11px 0 0;

		span.cn-title {
			display: block;
			font-weight: 700;
			font-size: 15px;
			margin: 0 0 -4px;
		}

		span.cn-slogan {
			font-size: 14px;
			font-weight: 300;
		}
	}

	.icon {
		float: right;

		i {
			font-size: 33px;
			float: right;
			margin: 19px 20px 0 0;
			color: #db0962;
		}
	}
}

@media screen and (max-width: 768px) {
	a.call-now {
		display: inline-block;
	}
}
@media screen and (max-width: 380px) {
	a.call-now {
		width: calc(100% - 100px)!important;

		.icon {
			display: none!important;
		}

		.avatar {
			padding-right: 4px;

			img {
				width: 45px;
			}
		}

		.cn-details {
			span.cn-title {
				font-size: 13px;
				margin: -2px 0 -6px;
			}

			span.cn-slogan {
				font-size: 13px
			}
		}
	}
}

/* Call Now: Finish */