.fa-facebook-messenger::before {
content: "\f39f";
font-family: "Font Awesome 5 Brands" !important;
}
.quick-social-ring .call-icon .quick-contact-icon{
background: rgb(103, 182, 52);
color: #fff;
}
.quick-social-ring .messenger .quick-contact-icon{
background-color: #365899;
color: #fff;
}
.quick-social-ring.left {
left: 30px;
}
.quick-social-ring.right {
right: 30px;
}
.quick-social-ring{
display: inline-grid;
position: fixed;
bottom: 15px;
min-width: 45px;
text-align: center;
z-index: 99999;
}
.social-ring-main{
display: block;
}
.social-ring-content{
display: inline-grid;   
}
.user-support,
.quick-social-ring a {
padding:8px 2px;
cursor: pointer;
position: relative;
margin-bottom: 18px;
}
.quick-social-ring.right .call-icon .quick-contact-icon {
line-height: 1.6;
}
.quick-social-ring .zalo .quick-contact-icon {
font-size: 14px;
font-weight: 600;
line-height: 3;
}
.quick-social-ring .quick-contact-icon {
width: 45px;
height: 45px;
background: #43a1f3;
color: #fff;
border-radius: 100%;
font-size: 22px;
text-align: center;
line-height: 2;
position: relative;
z-index: 999;
-webkit-border-radius:100%;
-moz-border-radius:100%;
border-radius:100%;
opacity:1;
}
@media (min-width: 576px) {
.quick-social-ring .quick-contact-icon.zoom {
animation-name: quick-contact-Animation;
-webkit-animation-name: quick-contact-Animation;
animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
.quick-social-ring .quick-contact-icon.shake p,
.quick-social-ring .quick-contact-icon.shake svg {
-webkit-animation:quick-contact-circle-img-anim 1s infinite ease-in-out;
-moz-animation:quick-contact-circle-img-anim 1s infinite ease-in-out;
-ms-animation:quick-contact-circle-img-anim 1s infinite ease-in-out;
-o-animation:quick-contact-circle-img-anim 1s infinite ease-in-out;
animation:quick-contact-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%
}
}
.quick-social-ring .animated {
z-index: 998;
}
.quick-contact-circle {
width: 80px;
height: 80px;
top: -10px;
left: -16px;
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-contact-circle-anim 1.2s infinite ease-in-out;
-moz-animation:quick-contact-circle-anim 1.2s infinite ease-in-out;
-ms-animation:quick-contact-circle-anim 1.2s infinite ease-in-out;
-o-animation:quick-contact-circle-anim 1.2s infinite ease-in-out;
animation:quick-contact-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-contact-circle-fill {
width: 60px;
height: 60px;
top: 1px;
left: -6px;
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-contact-circle-fill-anim 2.3s infinite ease-in-out;
-moz-animation:quick-contact-circle-fill-anim 2.3s infinite ease-in-out;
-ms-animation:quick-contact-circle-fill-anim 2.3s infinite ease-in-out;
-o-animation:quick-contact-circle-fill-anim 2.3s infinite ease-in-out;
animation:quick-contact-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-social-ring .bar-hover a:hover > span {
opacity:1;
display: block;
transition: all 0.2s ease-in-out 0s;
}
.quick-social-ring .bar-hover .bar-text {
opacity:0;
display: none;
}
.quick-social-ring .bar-show .bar-text {
display: block;
}
.quick-social-ring a .bar-text {
border-radius: 50px;
background: rgb(26 25 25);
width: max-content;
position: absolute;
color: #ffffff;
z-index: 990;
top: 8px;
height: 45px;
line-height: 1.6 !important;
transition: all 0.2s ease-in-out 0s;
}
.quick-social-ring.left .bar-text {
text-align: right;
padding: 8px 15px 8px 55px;
left: 2px;
}
.quick-social-ring.left.slide .bar-hover .bar-text {
-moz-animation: leftAnimation 0.7s 1;
-webkit-animation: leftAnimation 0.7s 1;
-o-animation: leftAnimation 0.7s 1;
animation: leftAnimation 0.7s 1;
}
.quick-social-ring.right .bar-text {
text-align: left;
padding: 8px 55px 8px 15px;
right: 2px;
}
.quick-social-ring.right.slide .bar-hover .bar-text {
-moz-animation: rightAnimation 0.7s 1;
-webkit-animation: rightAnimation 0.7s 1;
-o-animation: rightAnimation 0.7s 1;
animation: rightAnimation 0.7s 1;
}
.quick-social-ring.left.top-down .bar-hover .bar-text {
left: 60px;
padding: 8px 15px;
border-radius: 5px;
}
.quick-social-ring.right.top-down .bar-hover .bar-text {
right: 60px;
padding: 8px 15px;
border-radius: 5px;
}
.quick-social-ring.left.top-down .bar-hover .bar-text,
.quick-social-ring.right.top-down .bar-hover .bar-text {
-moz-animation: topAnimation 0.7s 1;
-webkit-animation: topAnimation 0.7s 1;
-o-animation: topAnimation 0.7s 1;
animation: topAnimation 0.7s 1;
}
.quick-social-ring.left.top-down .bar-hover .bar-text:before {
left: -5px;
}
.quick-social-ring.right.top-down .bar-hover .bar-text:before {
right: -5px;
}
.quick-social-ring.top-down .bar-hover .bar-text:before {
content: "";
width: 15px;
height: 15px;
top: 13px;
display:block;
position:absolute;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
background-color: #67b634;
z-index: 999;
}
.quick-contact-icon {
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
text-align: center;
vertical-align: baseline;
}
.quick-contact-icon svg {
vertical-align: sub;
}
.quick-social-ring .email .quick-contact-icon svg,
.quick-social-ring.left .call-icon .quick-contact-icon svg {
vertical-align: baseline;
}
.quick-contact-icon svg:not([stroke-width]) {
stroke-width: 0;
}
.quick-contact-icon svg:not([stroke]) {
stroke: currentColor;
}
.quick-contact-icon svg:not([fill]) {
fill: currentColor;
}
@media (min-width:992px) {
.desktop-hide {
display: none!important;
}
}
@media (min-width: 768px) and (max-width: 991.98px){
.tablet-hide {
display: none!important;
}
}
@media (max-width:767.98px) {
.mobile-hide {
display: none!important;
}
}
@media (max-width: 575.98px) {
.show_contactfix .quick-social-ring .social-ring-content {
transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
visibility: visible;
opacity: 1;
}
.quick-social-ring .social-ring-content {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
flex-direction: row;
visibility: hidden;
opacity: 0;
transform: translate3d(0,120%,0);
-moz-transform: translate3d(0,120%,0);
-webkit-transform: translate3d(0,120%,0);
transition: all .3s linear;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
}
.quick-social-ring .social-ring-content a {
margin:0;
padding: 0;
flex: 1;
display: block;
}
.mobile-hide,
.quick-social-ring .animated,
.quick-social-ring a .bar-text,
.quick-social-ring.style-block .user-support {
display: none!important;
}
.quick-social-ring .social-ring-content .quick-contact-icon {
width: 100%;
border-radius: 0;
}
}
@-webkit-keyframes "leftAnimation" {
0% { margin-left: -200px; }
100% { margin-left: 0; }
}
@keyframes "leftAnimation" {
0% { margin-left: -200px; }
100% { margin-left: 0; }
}
@-webkit-keyframes "rightAnimation" {
0% { margin-right: -200px; }
100% { margin-right: 0; }
}
@keyframes "rightAnimation" {
0% { margin-right: -200px; }
100% { margin-right: 0; }
}
@-webkit-keyframes "topAnimation" {
0% { margin-top: -70px; }
100% { margin-top: 0; }
}
@keyframes "topAnimation" {
0% { margin-top: -70px; }
100% { margin-top: 0; }
}
@-webkit-keyframes quick-contact-Animation {
0% {
transform: scale(.9)
}
70% {
transform: scale(1);
box-shadow: 0 0 0 15px transparent
}
100% {
transform: scale(.9);
box-shadow: 0 0 0 0 transparent
}
}
@keyframes quick-contact-Animation {
0% {
transform: scale(.9)
}
70% {
transform: scale(1);
box-shadow: 0 0 0 15px transparent
}
100% {
transform: scale(.9);
box-shadow: 0 0 0 0 transparent
}
}
@-moz-keyframes quick-contact-circle-anim{
0%{
-moz-transform:rotate(0) scale(.5) skew(1deg);
opacity:.1;
-moz-opacity:.1;
-webkit-opacity:.1;
-o-opacity:.1
}
30%{
-moz-transform:rotate(0) scale(.7) skew(1deg);
opacity:.5;
-moz-opacity:.5;
-webkit-opacity:.5;
-o-opacity:.5
}
100%{
-moz-transform:rotate(0) scale(1) skew(1deg);
opacity:.6;
-moz-opacity:.6;
-webkit-opacity:.6;
-o-opacity:.1
}
}
@-webkit-keyframes quick-contact-circle-anim{
0%{
-webkit-transform:rotate(0) scale(.5) skew(1deg);
-webkit-opacity:.1
}
30%{
-webkit-transform:rotate(0) scale(.7) skew(1deg);
-webkit-opacity:.5
}
100%{
-webkit-transform:rotate(0) scale(1) skew(1deg);
-webkit-opacity:.1
}
}
@-o-keyframes quick-contact-circle-anim{
0%{
-o-transform:rotate(0) kscale(.5) skew(1deg);
-o-opacity:.1
}
30%{
-o-transform:rotate(0) scale(.7) skew(1deg);
-o-opacity:.5
}
100%{
-o-transform:rotate(0) scale(1) skew(1deg);
-o-opacity:.1
}
}
@-moz-keyframes quick-contact-circle-fill-anim{
0%{
-moz-transform:rotate(0) scale(.7) skew(1deg);
opacity:.2
}
50%{
-moz-transform:rotate(0) -moz-scale(1) skew(1deg);
opacity:.2
}
100%{
-moz-transform:rotate(0) scale(.7) skew(1deg);
opacity:.2
}
}
@-webkit-keyframes quick-contact-circle-fill-anim{
0%{
-webkit-transform:rotate(0) scale(.7) skew(1deg);
opacity:.2
}
50%{
-webkit-transform:rotate(0) scale(1) skew(1deg);
opacity:.2
}
100%{
-webkit-transform:rotate(0) scale(.7) skew(1deg);
opacity:.2
}
}
@-o-keyframes quick-contact-circle-fill-anim{
0%{
-o-transform:rotate(0) scale(.7) skew(1deg);
opacity:.2
}
50%{
-o-transform:rotate(0) scale(1) skew(1deg);
opacity:.2
}
100%{
-o-transform:rotate(0) scale(.7) skew(1deg);
opacity:.2
}
}
@-moz-keyframes quick-contact-circle-img-anim{
10%{
transform:rotate(0) scale(1) skew(1deg)
}
10%{
-moz-transform:rotate(-25deg) scale(1) skew(1deg)
}
20%{
-moz-transform:rotate(25deg) scale(1) skew(1deg)
}
30%{
-moz-transform:rotate(-25deg) scale(1) skew(1deg)
}
40%{
-moz-transform:rotate(25deg) scale(1) skew(1deg)
}
50%{
-moz-transform:rotate(0) scale(1) skew(1deg)
}
100%{
-moz-transform:rotate(0) scale(1) skew(1deg)
}
}
@-webkit-keyframes quick-contact-circle-img-anim{
0%{
-webkit-transform:rotate(0) scale(1) skew(1deg)
}
10%{
-webkit-transform:rotate(-25deg) scale(1) skew(1deg)
}
20%{
-webkit-transform:rotate(25deg) scale(1) skew(1deg)
}
30%{
-webkit-transform:rotate(-25deg) scale(1) skew(1deg)
}
40%{
-webkit-transform:rotate(25deg) scale(1) skew(1deg)
}
50%{
-webkit-transform:rotate(0) scale(1) skew(1deg)
}
100%{
-webkit-transform:rotate(0) scale(1) skew(1deg)
}
}
@-o-keyframes quick-contact-circle-img-anim{
0%{
-o-transform:rotate(0) scale(1) skew(1deg)
}
10%{
-o-transform:rotate(-25deg) scale(1) skew(1deg)
}
20%{
-o-transform:rotate(25deg) scale(1) skew(1deg)
}
30%{
-o-transform:rotate(-25deg) scale(1) skew(1deg)
}
40%{
-o-transform:rotate(25deg) scale(1) skew(1deg)
}
50%{
-o-transform:rotate(0) scale(1) skew(1deg)
}
100%{
-o-transform:rotate(0) scale(1) skew(1deg)
}
}