/* АНИМАЦИЯ СALLBACK */
.phone2 {
	display:block;
	background-color:transparent;
	cursor:pointer;
	position:absolute;
	width:auto; height:auto;
	right:1vw; top:70vh;
	transition:.6s all;
	z-index:1000;
}

/* img-circle */
@keyframes circle-img-anim {
	0% {transform:rotate(0deg) scale(1) skew(1deg);}
	10% {transform:rotate(-25deg) scale(1) skew(1deg);}
	20% {transform:rotate(25deg) scale(1) skew(1deg);}
	30% {transform:rotate(-25deg) scale(1) skew(1deg);}
	40% {transform:rotate(25deg) scale(1) skew(1deg);}
	100%, 50% {transform:rotate(0deg) scale(1) skew(1deg);}
}
@-webkit-keyframes circle-img-anim {
	0% {transform:rotate(0deg) scale(1) skew(1deg);}
	10% {transform:rotate(-25deg) scale(1) skew(1deg);}
	20% {transform:rotate(25deg) scale(1) skew(1deg);}
	30% {transform:rotate(-25deg) scale(1) skew(1deg);}
	40% {transform:rotate(25deg) scale(1) skew(1deg);}
	100%, 50% {transform:rotate(0deg) scale(1) skew(1deg);}
}
.img-circle {
	animation:2s ease-in-out 2s normal none infinite running circle-img-anim;
	-webkit-animation:2s ease-in-out 2s normal none infinite running circle-img-anim;
	-moz-animation:2s ease-in-out 2s normal none infinite running circle-img-anim;
	background-color:#E48005;
	background-image:url(../images/phone2.png);
	background-position:center center;
	background-repeat:no-repeat;
	border:2px solid transparent;
	border-radius:100%;
	height:70px;
	width:70px;
	left:70px;
	top:70px;
	position:absolute;
}

/* circle */
@keyframes circle-anim {
	0% {opacity:0.1; transform:rotate(0deg) scale(0.3) skew(1deg);}
	30% {opacity:0.5; transform:rotate(0deg) scale(0.7) skew(1deg);}
	100% {opacity:0.1; transform:rotate(0deg) scale(1) skew(1deg);}
}
@-webkit-keyframes circle-anim {
	0% {opacity:0.1; transform:rotate(0deg) scale(0.3) skew(1deg);}
	30% {opacity:0.5; transform:rotate(0deg) scale(0.7) skew(1deg);}
	100% {opacity:0.1; transform:rotate(0deg) scale(1) skew(1deg);}
}
.circle {
	animation:1s ease-in-out 0s normal none infinite running circle-anim;
	-webkit-animation:1s ease-in-out 0s normal none infinite running circle-anim;
	-moz-animation:1s ease-in-out 0s normal none infinite running circle-anim;
	background-color:transparent;
	border:2px solid #E48005;
	border-radius:100%;
	height:100px;
	width:100px;
	left:55px;
	top:55px;
	opacity:0.5;
	position:absolute;
	transition:all 0.5s ease 0s;
}
.phone:hover .circle {
	border-color:#00AD5D;
}

/* circle-fill */
@keyframes circle-fill-anim {
	0% {opacity:0.2; transform:rotate(0deg) scale(0.7) skew(1deg);}
	50% {opacity:0.25; transform:rotate(0deg) scale(1) skew(1deg);}
	100% {opacity:0.2; transform:rotate(0deg) scale(0.7) skew(1deg);}
}
@-webkit-keyframes circle-fill-anim {
	0% {opacity:0.2; transform:rotate(0deg) scale(0.7) skew(1deg);}
	50% {opacity:0.25; transform:rotate(0deg) scale(1) skew(1deg);}
	100% {opacity:0.2; transform:rotate(0deg) scale(0.7) skew(1deg);}
}
.circle-fill {
	animation:1s ease-in-out 0s normal none infinite running circle-fill-anim;
	-webkit-animation:1s ease-in-out 0s normal none infinite running circle-fill-anim;
	-moz-animation:1s ease-in-out 0s normal none infinite running circle-fill-anim;
	background-color:#E48005;
	border:2px solid transparent;
	border-radius:100%;
	height:85px;
	width:85px;
	left:62px;
	top:62px;
	opacity:0.75;
	position:absolute;
	transition:all 0.5s ease 0s;
}
.phone2:hover .circle-fill {
	background-color:#00AD5D;
}


@media only screen and (max-width:769px) {
	.phone2 {
		position:relative;
		right:auto; bottom:auto;
		margin:20px auto 100px;
		text-align:center;
	}
}