.adminz_ctg *{box-sizing: border-box;}.quick-alo-phone {position: fixed; cursor: pointer; z-index: 1041 !important; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); -webkit-transition: visibility 0.5s; -moz-transition: visibility 0.5s; -o-transition: visibility 0.5s; transition: visibility 0.5s; left: 0; bottom: 90px; } .quick-alo-phone .zphone {height: 40px; line-height: 40px; background: #00000054; border-radius: 20px; margin-top: -20px; margin-left: 25px; justify-content: center; align-items: center; padding-left: 68px; padding-right: 15px; transition: all 0.5s; font-weight: bold; } .quick-alo-phone .zphone a{color: white; } @media (min-width: 768px) {body .quick-alo-phone .phone {display: flex; } } .quick-alo-phone .phone .number-phone {font-weight: bold; text-shadow: -1px 1px 4px black; } .quick-alo-phone .phone .number-phone {color: white; margin-top: -3px; text-transform: capitalize; } .quick-alo-phone.quick-alo-hover .quick-alo-ph-circle {border-color: inherit; opacity: 0.5; } .quick-alo-phone.quick-alo-hover .quick-alo-ph-circle {border-color: #75eb50; opacity: 0.5; } .quick-alo-phone .quick-alo-ph-circle {opacity: 0.5; } .quick-alo-phone.quick-alo-hover .quick-alo-ph-circle-fill {opacity: 0.75 !important; } .quick-alo-phone.quick-alo-hover .quick-alo-ph-circle-fill {opacity: 0.75 !important; } .quick-alo-phone .quick-alo-ph-circle-fill {opacity: 0.75 !important; } .quick-alo-phone svg {fill: currentColor; } /*color*/ .quick-alo-phone .quick-alo-ph-circle-fill {background-color: inherit; } .quick-alo-phone .quick-alo-ph-circle {border-color: inherit; } .quick-alo-phone .quick-alo-ph-img-circle {background-color: inherit; } .quick-alo-phone:hover .quick-alo-ph-img-circle {/*background-color: var(--primary-color);*/ } .quick-alo-phone:hover .quick-alo-ph-circle {/*border-color: var(--primary-color);*/ } .quick-alo-phone:hover .quick-alo-ph-circle-fill {/*background-color: var(--primary-color);*/ } .quick-alo-phone:hover .phone {background-color: var(--primary-color); background-color: #000000b8; opacity: 1; } .quick-alo-ph-circle {width: 100px; height: 100px; top: -50px; left: 0px; position: absolute; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid rgba(30, 30, 30, 0.4); opacity: 0.1; -webkit-animation: quick-alo-circle-anim 1.2s infinite ease-in-out; -moz-animation: quick-alo-circle-anim 1.2s infinite ease-in-out; -ms-animation: quick-alo-circle-anim 1.2s infinite ease-in-out; -o-animation: quick-alo-circle-anim 1.2s infinite ease-in-out; animation: quick-alo-circle-anim 1.2s infinite ease-in-out; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.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-alo-phone.quick-alo-active .quick-alo-ph-circle {-webkit-animation: quick-alo-circle-anim 1.1s infinite ease-in-out !important; -moz-animation: quick-alo-circle-anim 1.1s infinite ease-in-out !important; -ms-animation: quick-alo-circle-anim 1.1s infinite ease-in-out !important; -o-animation: quick-alo-circle-anim 1.1s infinite ease-in-out !important; animation: quick-alo-circle-anim 1.1s infinite ease-in-out !important; } .quick-alo-phone.quick-alo-static .quick-alo-ph-circle {-webkit-animation: quick-alo-circle-anim 2.2s infinite ease-in-out !important; -moz-animation: quick-alo-circle-anim 2.2s infinite ease-in-out !important; -ms-animation: quick-alo-circle-anim 2.2s infinite ease-in-out !important; -o-animation: quick-alo-circle-anim 2.2s infinite ease-in-out !important; animation: quick-alo-circle-anim 2.2s infinite ease-in-out !important; } .quick-alo-ph-circle-fill {width: 90px; height: 90px; top: -45px; left: 5px; position: absolute; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid transparent; opacity: 0.1; -webkit-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out; -moz-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out; -ms-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out; -o-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out; animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.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-alo-ph-img-circle {color: white; width: 60px; height: 60px; top: -30px; left: 20px; position: absolute; padding: 13px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid transparent; opacity: 0.7; -webkit-animation: quick-alo-circle-img-anim 1s infinite ease-in-out; -moz-animation: quick-alo-circle-img-anim 1s infinite ease-in-out; -ms-animation: quick-alo-circle-img-anim 1s infinite ease-in-out; -o-animation: quick-alo-circle-img-anim 1s infinite ease-in-out; animation: quick-alo-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-alo-phone .quick-alo-ph-circle-fill {-webkit-animation: quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important; -moz-animation: quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important; -ms-animation: quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important; -o-animation: quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important; animation: quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important; } .quick-alo-phone.quick-alo-static .quick-alo-ph-circle-fill {-webkit-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important; -moz-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important; -ms-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important; -o-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important; animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important; opacity: 0 !important; } .quick-alo-phone.quick-alo-active .quick-alo-ph-img-circle {-webkit-animation: quick-alo-circle-img-anim 1s infinite ease-in-out !important; -moz-animation: quick-alo-circle-img-anim 1s infinite ease-in-out !important; -ms-animation: quick-alo-circle-img-anim 1s infinite ease-in-out !important; -o-animation: quick-alo-circle-img-anim 1s infinite ease-in-out !important; animation: quick-alo-circle-img-anim 1s infinite ease-in-out !important; } .quick-alo-phone.quick-alo-static .quick-alo-ph-img-circle {-webkit-animation: quick-alo-circle-img-anim 0s infinite ease-in-out !important; -moz-animation: quick-alo-circle-img-anim 0s infinite ease-in-out !important; -ms-animation: quick-alo-circle-img-anim 0s infinite ease-in-out !important; -o-animation: quick-alo-circle-img-anim 0s infinite ease-in-out !important; animation: quick-alo-circle-img-anim 0s infinite ease-in-out !important; } @-moz-keyframes quick-alo-circle-anim {0% {-moz-transform: rotate(0) scale(0.5) skew(1deg); opacity: 0.1; -moz-opacity: 0.1; -webkit-opacity: 0.1; -o-opacity: 0.1; } 30% {-moz-transform: rotate(0) scale(0.7) skew(1deg); opacity: 0.5; -moz-opacity: 0.5; -webkit-opacity: 0.5; -o-opacity: 0.5; } 100% {-moz-transform: rotate(0) scale(1) skew(1deg); opacity: 0.6; -moz-opacity: 0.6; -webkit-opacity: 0.6; -o-opacity: 0.1; } } @-webkit-keyframes quick-alo-circle-anim {0% {-webkit-transform: rotate(0) scale(0.5) skew(1deg); -webkit-opacity: 0.1; } 30% {-webkit-transform: rotate(0) scale(0.7) skew(1deg); -webkit-opacity: 0.5; } 100% {-webkit-transform: rotate(0) scale(1) skew(1deg); -webkit-opacity: 0.1; } } @-o-keyframes quick-alo-circle-anim {0% {-o-transform: rotate(0) kscale(0.5) skew(1deg); -o-opacity: 0.1; } 30% {-o-transform: rotate(0) scale(0.7) skew(1deg); -o-opacity: 0.5; } 100% {-o-transform: rotate(0) scale(1) skew(1deg); -o-opacity: 0.1; } } @-moz-keyframes quick-alo-circle-fill-anim {0% {-moz-transform: rotate(0) scale(0.7) skew(1deg); opacity: 0.2; } 50% {-moz-transform: rotate(0) -moz-scale(1) skew(1deg); opacity: 0.2; } 100% {-moz-transform: rotate(0) scale(0.7) skew(1deg); opacity: 0.2; } } @-webkit-keyframes quick-alo-circle-fill-anim {0% {-webkit-transform: rotate(0) scale(0.7) skew(1deg); opacity: 0.2; } 50% {-webkit-transform: rotate(0) scale(1) skew(1deg); opacity: 0.2; } 100% {-webkit-transform: rotate(0) scale(0.7) skew(1deg); opacity: 0.2; } } @-o-keyframes quick-alo-circle-fill-anim {0% {-o-transform: rotate(0) scale(0.7) skew(1deg); opacity: 0.2; } 50% {-o-transform: rotate(0) scale(1) skew(1deg); opacity: 0.2; } 100% {-o-transform: rotate(0) scale(0.7) skew(1deg); opacity: 0.2; } } @-moz-keyframes quick-alo-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-alo-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-alo-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); } }