.zalo-container img {
max-width: 100%;
height: auto;
}
.zalo-container {
position: fixed;
bottom: 8rem;
z-index: 9;
}
.zalo-container:not(.right) {
left: 2.5rem;
}
.zalo-container.right {
right: 2.5rem;
}
.zalo-container a {
display: block;
}
.zalo-container .zalo-ico {
display: block;
position: relative;
z-index: 12;
cursor: pointer;
}
.zalo-container .zalo-ico:before {
top: 2px;
left: 36px;
z-index: 4;
content: '';
width: 8px;
height: 8px;
border-radius: 100%;
position: absolute;
border: 1px solid #fff;
background-color: #7ed321;
}
.zalo-container .zalo-ico .zalo-ico-main {
display: block;
position: relative;
z-index: 3;
width: 58px;
height: 58px;
}
.zalo-container .zalo-ico em {
position: absolute;
top: 7px;
left: 17px;
}
.zalo-container .zalo-ico em:after, .zalo-container .zalo-ico em:before {
left: -4px;
top: 2px;
content: "";
width: 32px;
height: 32px;
position: absolute;
border-radius: 100%;
-webkit-animation: Grow 1.5s linear infinite;
animation: Grow 1.5s linear infinite;
}
.zalo-container .zalo-ico em:before {
-webkit-box-shadow: 0 0 8px 4px #7ed321;
box-shadow: 0 0 8px 4px #7ed321;
}
.zalo-container .zalo-ico em:after {
-webkit-box-shadow: inset 0 0 6px 2px #7ed321;
box-shadow: inset 0 0 6px 2px #7ed321;
}
@-webkit-keyframes Grow {
0% {
transform:scale(0.1);
-ms-transform:scale(0.1);
-webkit-transform:scale(0.1);
opacity:0;
filter:alpha(opacity=0);
}
50% {
opacity:1;
filter:alpha(opacity=100);
} to {
transform:scale(1.8);
-ms-transform:scale(1.8);
-webkit-transform:scale(1.8);
opacity:0;
filter:alpha(opacity=0);
}
}
@keyframes Grow {
0% {
transform:scale(0.1);
-ms-transform:scale(0.1);
-webkit-transform:scale(0.1);
opacity:0;
filter:alpha(opacity=0);
}
50% {
opacity:1;
filter:alpha(opacity=100);
} to {
transform:scale(1.8);
-ms-transform:scale(1.8);
-webkit-transform:scale(1.8);
opacity:0;
filter:alpha(opacity=0);
}
}