.callback-bt {
background:#38a3fd;
border-radius:50%;
box-shadow:0 8px 10px rgba(56,163,253,0.3);
cursor:pointer;
height:68px;
text-align:center;
width:68px;
position: fixed;
right: 0%;
bottom: 6.5%;
z-index:999;
transition:.3s;
-webkit-animation:hoverWave linear 1s infinite;
animation:hoverWave linear 1s infinite;
}
.callback-bt a.text-call{
display:block;
height:68px;
width:68px;
border-radius:50%;
position:relative;
overflow:hidden;
background:url(phone.svg) no-repeat center center;
opacity: 0.5;
filter: alpha(opacity=50);
transition: 0.3s linear;
}
.callback-bt a.text-call:hover{
opacity: 1;
filter: alpha(opacity=100);
}
@-webkit-keyframes hoverWave {
0% {
box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 0 rgba(56,163,253,0.2),0 0 0 0 rgba(56,163,253,0.2)
}
40% {
box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 15px rgba(56,163,253,0.2),0 0 0 0 rgba(56,163,253,0.2)
}
80% {
box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 30px rgba(56,163,253,0),0 0 0 26.7px rgba(56,163,253,0.067)
}
100% {
box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 30px rgba(56,163,253,0),0 0 0 40px rgba(56,163,253,0.0)
}
}@keyframes hoverWave {
0% {
box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 0 rgba(56,163,253,0.2),0 0 0 0 rgba(56,163,253,0.2)
}
40% {
box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 15px rgba(56,163,253,0.2),0 0 0 0 rgba(56,163,253,0.2)
}
80% {
box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 30px rgba(56,163,253,0),0 0 0 26.7px rgba(56,163,253,0.067)
}
100% {
box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 30px rgba(56,163,253,0),0 0 0 40px rgba(56,163,253,0.0)
}
}
@keyframes shake {
0% {
transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
}
10% {
transform: rotateZ(-30deg);
-ms-transform: rotateZ(-30deg);
-webkit-transform: rotateZ(-30deg);
}
20% {
transform: rotateZ(15deg);
-ms-transform: rotateZ(15deg);
-webkit-transform: rotateZ(15deg);
}
30% {
transform: rotateZ(-10deg);
-ms-transform: rotateZ(-10deg);
-webkit-transform: rotateZ(-10deg);
}
40% {
transform: rotateZ(7.5deg);
-ms-transform: rotateZ(7.5deg);
-webkit-transform: rotateZ(7.5deg);
}
50% {
transform: rotateZ(-6deg);
-ms-transform: rotateZ(-6deg);
-webkit-transform: rotateZ(-6deg);
}
60% {
transform: rotateZ(5deg);
-ms-transform: rotateZ(5deg);
-webkit-transform: rotateZ(5deg);
}
70% {
transform: rotateZ(-4.28571deg);
-ms-transform: rotateZ(-4.28571deg);
-webkit-transform: rotateZ(-4.28571deg);
}
80% {
transform: rotateZ(3.75deg);
-ms-transform: rotateZ(3.75deg);
-webkit-transform: rotateZ(3.75deg);
}
90% {
transform: rotateZ(-3.33333deg);
-ms-transform: rotateZ(-3.33333deg);
-webkit-transform: rotateZ(-3.33333deg);
}
100% {
transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
}
}
.window{
background-color: #fff;
border-radius: 3px;
box-shadow: 0 0 30px #222;
}
.window .a{
min-height: 40px;
text-align: left;
padding: 30px;
}
.window .b{
background-color: #f1f1f1;
border-top: 1px solid #e9e9e9;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
text-align: right;
padding: 12px 30px 13px 30px;
}
.a input[type="text"]{
width: 100%;
box-sizing: border-box;
border: 1px solid #aaa;
border-radius: 2px;
font: 14px Arial, sans-serif;
padding: 10px;
}

.a input[type="text"]:focus{
outline: none;
border: 1px solid #0277bd;
box-shadow: 0 0 3px rgba(0,0,0,0.1);
}
.a button{
border: 1px solid #333;
background-color: #333;
border-radius: 2px;
text-transform: uppercase; 
text-decoration: none; color: #fff;
font: bold 14px Arial, sans-serif;
padding: 10px 16px;
}
.a button:hover{
border: 1px solid #444;
background-color: #444;
text-decoration: none; color: #fff; cursor: pointer;
}