.megamessage{ position:fixed;bottom:30px;z-index:100;}.position-left{ left:30px}.position-right{ right:30px;}.button-msg{ display:block;width:55px;height:55px;overflow:hidden;margin-bottom:10px;transition:all 2s;opacity:1;}.msg-whatsapp{ background:#4ec859;border-radius:50px;background-image:url(../images/megamessage/whatsapp.svg);height:55px;width:55px;background-size:55%;background-position:center center;background-repeat:no-repeat;}.msg-telegram{ background:#3eade5;border-radius:50px;background-image:url(../images/megamessage/plane.svg);height:55px;width:55px;background-size:55%;background-position:center center;background-repeat:no-repeat;}.msg-viber{ background:#665cac;border-radius:50px;background-image:url(../images/megamessage/viber.svg);height:55px;width:55px;background-size:55%;background-position:center center;background-repeat:no-repeat;}.msg-phone{ background:#ec4848;border-radius:50px;background-image:url(../images/megamessage/telephone.svg);height:55px;width:55px;background-size:55%;background-position:center center;background-repeat:no-repeat;}.msg-email{ background:yellow;border-radius:50px;}.msg-skype{ background:#00a9e8;border-radius:50px;background-image:url(../images/megamessage/skype.svg);height:55px;width:55px;background-size:55%;background-position:center center;background-repeat:no-repeat;}.msg-messenger{ background:#018dff;border-radius:50px;background-image:url(../images/megamessage/messenger.svg);height:55px;width:55px;background-size:55%;background-position:center center;background-repeat:no-repeat;}.msg-vk{ background:#5181b8;border-radius:50px;background-image:url(../images/megamessage/vk.svg);height:55px;width:55px;background-size:55%;background-position:center center;background-repeat:no-repeat;}.msg-mail{ background:#999;border-radius:50px;background-image:url(../images/megamessage/envelope.svg);height:55px;width:55px;background-size:55%;background-position:center center;background-repeat:no-repeat;}.msg-sms{ background:#71be00;border-radius:50px;background-image:url(../images/megamessage/sms.svg);height:55px;width:55px;background-size:55%;background-position:center center;background-repeat:no-repeat;}.hidden-msg{ display:none;opacity:0;}.mm-button{ background:red;width:60px;height:60px;border-radius:50px;box-shadow:0px 0px 5px 0px red;-o-transition:transform 3s linear;-ms-transition:transform 3s linear;-moz-transition:transform 3s linear;-webkit-transition:transform 3s linear;transition:transform 3s linear;cursor:pointer;animation:shadow 1s linear infinite alternate;}.mm-button-img{ background-image:url(../images/megamessage/message.svg);height:60px;width:60px;background-size:50%;background-position:center center;background-repeat:no-repeat;-webkit-transition-duration:1s;-moz-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s;}.mm-button.active .mm-button-img{ background-image:url(../images/megamessage/close.svg);}.mm-button.active .mm-button-img:hover{ transform:rotate(180deg);transition:all 1s;}.mm-button-img:hover{ -o-transform:rotate3d(0, 1, 0, 180deg);-ms-transform:rotate3d(0, 1, 0, 180deg);-moz-transform:rotate3d(0, 1, 0, 180deg);-webkit-transform:rotate3d(0, 1, 0, 180deg);transform:rotate3d(0, 1, 0, 180deg);}.active-msg{ animation:slide-up .4s linear;}.megamessage-bg{ position:fixed;top:0;right:0;bottom:0;left:0;background:transparent;z-index:0;display:none;}.megamessage-bg.active{ z-index:1;display:block;opacity:0.7;background:#fff;}@keyframes shadow{ 0%{ box-shadow:0px 0px 0px 0px rgb(255, 69, 69);} to{ box-shadow:0px 0px 25px 0px rgb(255, 69, 69);}}@keyframes slide-up{ 0%{ opacity:0;display:none;margin-top:0;margin-bottom:0;-ms-transform:translateY(15px);-webkit-transform:translateY(15px);-moz-transform:translateY(15px);-o-transform:translateY(15px);transform:translateY(15px) } to{ opacity:1;display:block;margin-top:0;margin-bottom:15px;-ms-transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0) }}@media (max-width:767px){ .position-right{ right:10px !important;} .position-left{ left:10px !important;} .button-msg{ margin-bottom:5px !important;} .mm-button, .button-msg, .mm-button-img{ width:45px;height:45px;} .mm-button.active{ margin-top:10px;} .active-msg{ animation:inherit !important;transition:initial;} .mm-button-img:hover{ transform:initial;} .megamessage-bg.active{ opacity:0.7;background:#fff;}}