.call-btn {
	position: fixed;
	bottom: 70px;
	right: 80px;
	width: 70px;
	height: 70px;
	border-radius: 50px!important;
	background-color: var(--green);
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 3px 5px #00000057;
	/*text-shadow: 0 3px 5px grey;*/
	color: white;
    z-index: 999;
  	cursor: pointer;
}

.call-btn::before {
	content: '\e825';
	font-family: "icons";
	font-size: 35px;

}

.call-btn:hover {
  	background-color: var(--green-darken);
    border-color: #36991f;
    outline: none;
    text-decoration: none;
    color: #fff;
}

.call-btn:active {box-shadow: none;}

/*.call-btn i {
    font-size: 32px;
}*/

.close {
	position: relative;
	top: -19px;
	right: -25px;
	transform: rotate(45deg);
	font-size: 24px;
	cursor: pointer;
}

.call-popup {
	border-radius: 5px;
    border: 1px solid #e6e6e6;
    padding: 25px 35px;
    display: inline-block;
    width: 410px;
    position: fixed;
    bottom: 171px;
    right: 27px;
    line-height: 35px;
    transition: opacity .5s;
    color: #454545;
    background: #fff;
    z-index: 9999;
    box-shadow: 0 3px 6px -4px black;
}

.popup-arrow {
    position: absolute;
    bottom: -26px;
    right: 39px;
    width: 100px;
    height: 26px;
    overflow: hidden;
}

.popup-arrow::after {
  	content: '';
  	width: 50px;
    height: 50px;
    position: absolute;
    bottom: 18px;
    left: 26px;
    transform: rotate(45deg);
    box-shadow: 2px 2px 6px -4px black;
  	background: #fff;
}

/*.call-popup::before {
	content: '';
	position: absolute;
	width: 0; 
	height: 0; 
	bottom: -31px;
    right: 50px;
    border-left: 26px solid transparent;
    border-right: 9px solid transparent;
    border-top: 31px solid #fff;
	z-index: 10;
}*/

.call-popup .tel {
	text-decoration: none;
	font-size: 22px;
	text-align: center;
    display: block;
    color: var(--main-color-lighten);
}

.call-popup>p {
  	text-align: center;
  	margin-bottom: 0;
}

.visible {
	opacity: 1;
}

.hidden {
	opacity: 0;
}

.vibrate {
	animation: vibrate .2s;
	animation-iteration-count: 3;
}

.pulsate {
	animation: pulsate .3s ease;
	animation-iteration-count: 2;
}

.rotate {
	animation: rotate .5s ease;
	animation-iteration-count: 1;
}

@keyframes vibrate {
	0%{right: 80px}
	50%{right: 90px}
	100%{right: 80px}
}

@keyframes pulsate {
  	
	0%{width: 70px;height: 70px;bottom: 70px;right: 80px;}
	50%{width: 100px;height: 100px;bottom: 55px;right: 65px;}
    100%{width: 70px;height: 70px;bottom: 70px;right: 80px;}
}

@keyframes rotate {
	0%{transform: rotate(0deg);}
	20%{transform: rotate(-16deg);}
    40%{transform: rotate(14deg);}
    60%{transform: rotate(-10deg);}
  	80%{transform: rotate(8deg);}
	100%{transform: rotate(0deg);}
}