﻿.call-now-button {
	display: none;
	z-index: 9999;
	clear: both;
	margin: 0 auto;
	position: fixed;
	border-radius: 50px;
}

.call-now-button div {
	display: flex;
}

.call-now-button div a .quick-alo-ph-img-circle, .call-now-button div a .quick-alo-phone-img-circle {
	background-color: #0c3;
}

.quick-alo-ph-circle.active {
	width: 130px;
	height: 130px;
	top: -40px;
	left: -40px;
	position: absolute;
	background-color: transparent;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	border: 2px solid rgba(30,30,30,.4);
	opacity: 1;
	-webkit-animation: quick-alo-circle-anim 1.2s infinite ease-in-out;
	-moz-animation: quick-alo-circle-anim 1.2s infinite ease-in-out;
	-ms-animation: quick-alo-circle-anim 1.2s infinite ease-in-out;
	-o-animation: quick-alo-circle-anim 1.2s infinite ease-in-out;
	animation: quick-alo-circle-anim 1.2s infinite ease-in-out;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

.quick-alo-ph-circle-fill.active {
	width: 80px;
	height: 80px;
	top: -15px;
	left: -15px;
	position: absolute;
	background-color: #000;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	border: 2px solid transparent;
	opacity: 1;
	-webkit-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
	-moz-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
	-ms-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
	-o-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
	animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

.quick-alo-phone-img-circle.shake {
	width: 50px;
	height: 50px;
	top: 0;
	left: 0;
	position: absolute;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	border: 2px solid transparent;
	opacity: 1;
	background: url(../img/quick-call-button-phone.png) no-repeat center center;
	-webkit-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
	-moz-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
	-ms-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
	-o-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
	animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

@keyframes quick-alo-circle-anim {
	0% {
		-webkit-transform:rotate(0) scale(.5) skew(1deg);
		transform:rotate(0) scale(.5) skew(1deg);
		opacity:.1
	}

	30% {
		-webkit-transform:rotate(0) scale(.7) skew(1deg);
		transform:rotate(0) scale(.7) skew(1deg);
		opacity:.5
	}

	100% {
		-webkit-transform:rotate(0) scale(1) skew(1deg);
		transform:rotate(0) scale(1) skew(1deg);
		opacity:.1
	}
}

@keyframes quick-alo-circle-fill-anim {
	0% {
		-webkit-transform: rotate(0) scale(.7) skew(1deg);
		transform: rotate(0) scale(.7) skew(1deg);
		opacity: .2;
	}

	50% {
		-webkit-transform: rotate(0) scale(1) skew(1deg);
		transform: rotate(0) scale(1) skew(1deg);
		opacity: .2;
	}

	100% {
		-webkit-transform: rotate(0) scale(.7) skew(1deg);
		transform: rotate(0) scale(.7) skew(1deg);
		opacity: .2;
	}
}

@keyframes quick-alo-circle-img-anim {
	0% {
		-webkit-transform: rotate(0) scale(1) skew(1deg);
		transform: rotate(0) scale(1) skew(1deg);
	}

	10% {
		-webkit-transform: rotate(-25deg) scale(1) skew(1deg);
		transform: rotate(-25deg) scale(1) skew(1deg);
	}

	20% {
		-webkit-transform: rotate(25deg) scale(1) skew(1deg);
		transform: rotate(25deg) scale(1) skew(1deg);
	}

	30% {
		-webkit-transform: rotate(-25deg) scale(1) skew(1deg);
		transform: rotate(-25deg) scale(1) skew(1deg);
	}

	40% {
		-webkit-transform: rotate(25deg) scale(1) skew(1deg);
		transform: rotate(25deg) scale(1) skew(1deg);
	}

	50% {
		-webkit-transform: rotate(0) scale(1) skew(1deg);
		transform: rotate(0) scale(1) skew(1deg);
	}

	100% {
		-webkit-transform: rotate(0) scale(1) skew(1deg);
		transform: rotate(0) scale(1) skew(1deg);
	}
}

@media screen and (max-width: 680px) {
	.call-now-button {
		top: calc(85% - 40px);
		left: 5%;
		display: flex !important;
		background: transparent;
	}
}