/* ========= INFORMATION ============================
- document:  Bubble Menu - easily create a flyouts bubble menu.
- url:       https://wow-estore.com/item/bubble-menu-pro/
- author:    Wow-Company
- profile:   https://wow-estore.com/
- version:   2.0
- email:     support@wow-company.com
==================================================== */

.wow-bmp, .wow-bmp * { list-style: none; margin: 0; padding: 0; border: 0; outline: none; text-decoration: none; } .wow-bmp { position: fixed; z-index: 1000; width: 48px; height: 48px; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .wow-bmp input { position: absolute; z-index: 3; top: 0; left: 0; display: block; width: 100%; height: 100%; cursor: pointer; opacity: 0; } .wow-bmp a { position: relative; z-index: 2; display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,0.5); transition: background 0.5s; -o-transition: background 0.5s; -ms-transition: background 0.5s; -moz-transition: background 0.5s; -webkit-transition: background 0.5s; } .wow-bmp i { display: block; width: 100%; height: 100%; overflow: hidden; font-size: 30px; line-height: 48px; text-align: center; transition: color 0.5s; -o-transition: color 0.5s; -ms-transition: color 0.5s; -moz-transition: color 0.5s; -webkit-transition: color 0.5s, -webkit-transform 0.5s; } .wow-bmp .icon-plus { line-height: 50px; } .wow-bmp li { position: absolute; top: 50%; left: 50%; display: block; width: 38px; height: 38px; margin: -19px 0 0 -19px; transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; } .wow-bmp li a { position: static; box-shadow: 0 0 6px rgba(0,0,0,0.5); } .wow-bmp li i { font-size: 20px; line-height: 38px; } .wow-bmp input:checked + a i { transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); } .wow-bmp input:checked + a .icon-plus { transform: rotate(315deg); -o-transform: rotate(315deg); -ms-transform: rotate(315deg); -moz-transform: rotate(315deg); -webkit-transform: rotate(315deg); } .wow-bmp li:nth-child(2) { -webkit-transition-delay: 0.1s; } .wow-bmp li:nth-child(3) { -webkit-transition-delay: 0.2s; } .wow-bmp li:nth-child(4) { -webkit-transition-delay: 0.3s; } .wow-bmp li:nth-child(5) { -webkit-transition-delay: 0.4s; } .wow-bmp li:nth-child(6) { -webkit-transition-delay: 0.5s; } .wow-bmp li:nth-child(7) { -webkit-transition-delay: 0.6s; } .wow-bmp li:nth-child(8) { -webkit-transition-delay: 0.7s; } .wow-bmp li:nth-child(9) { -webkit-transition-delay: 0.8s; } .wow-bmp li:nth-child(10) { -webkit-transition-delay: 0.9s; } .wow-bmp li:nth-child(11) { -webkit-transition-delay: 1.0s; } .wow-bmp li:nth-child(12) { -webkit-transition-delay: 1.1s; } .wow-bmp li:nth-child(13) { -webkit-transition-delay: 1.2s; } .wow-bmp li:nth-child(14) { -webkit-transition-delay: 1.3s; } .wow-bmp li:nth-child(15) { -webkit-transition-delay: 1.4s; } .wow-bmp li:nth-child(16) { -webkit-transition-delay: 1.5s; } .wow-bmp.wow-bmp-effect-aao li { -webkit-transition-delay: 0s; } .wow-bmp.wow-bmp-effect-fade li { opacity: 0; } .wow-bmp.wow-bmp-effect-fade input:checked ~ ul li { opacity: 1; } .wow-bmp.wow-bmp-effect-rotate input:checked ~ ul li { transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); } .wow-bmp.wow-bmp-effect-scale li { transform: scale(0.1, 0.1); -o-transform: scale(0.1, 0.1); -ms-transform: scale(0.1, 0.1); -moz-transform: scale(0.1, 0.1); -webkit-transform: scale(0.1, 0.1); } .wow-bmp.wow-bmp-effect-scale input:checked ~ ul li { transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -webkit-transform: scale(1, 1); } .wow-bmp.wow-bmp-effect-rotate.wow-bmp-effect-scale li { transform: rotate(0deg) scale(0.1, 0.1); -o-transform: rotate(0deg) scale(0.1, 0.1); -ms-transform: rotate(0deg) scale(0.1, 0.1); -moz-transform: rotate(0deg) scale(0.1, 0.1); -webkit-transform: rotate(0deg) scale(0.1, 0.1); } .wow-bmp.wow-bmp-effect-rotate.wow-bmp-effect-scale input:checked ~ ul li { transform: rotate(360deg) scale(1, 1); -o-transform: rotate(360deg) scale(1, 1); -ms-transform: rotate(360deg) scale(1, 1); -moz-transform: rotate(360deg) scale(1, 1); -webkit-transform: rotate(360deg) scale(1, 1); } .wow-bmp-pos-tl { top: 20px; left: 20px; } .wow-bmp-pos-t { top: 20px; left: 50%; margin-left: -24px; } .wow-bmp-pos-tr { top: 20px; right: 20px; } .wow-bmp-pos-r { top: 50%; right: 20px; margin-top: -24px; } .wow-bmp-pos-br { right: 20px; bottom: 20px; } .wow-bmp-pos-b { bottom: 20px; left: 50%; margin-left: -24px } .wow-bmp-pos-bl { bottom: 20px; left: 20px; } .wow-bmp-pos-l { top: 50%; left: 20px; margin-top: -24px; } .wow-bmp em { position: absolute; top: -9999px; left: -9999px; padding: 4px 8px; border-radius: 3px; background: rgba(0,0,0,0.8); font-style: normal; font-size: 11px; line-height: 13px; white-space: nowrap; color: #fff; opacity: 0; transition: opacity 0.5s; -o-transition: opacity 0.5s; -ms-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -webkit-transition: opacity 0.5s; } .wow-bmp li:hover em { opacity: 1; } .wow-bmp li:hover .tl { top: auto; right: 100%; bottom: 100%; left: auto; } .wow-bmp li:hover .tr { top: auto; bottom: 100%; left: 100%; } .wow-bmp li:hover .r { top: 50%; left: 100%; margin-top: -11px; margin-left: 7px; } .wow-bmp li:hover  .br { top: 100%; left: 100%; } .wow-bmp li:hover  .bl { top: 100%; right: 100%; left: auto; } .wow-bmp li:hover .l { top: 50%; right: 100%; left: auto; margin-top: -11px; margin-right: 7px; } .wow-bmp-shape-ellipse a, .wow-bmp-shape-ellipse li a { border-radius: 25% 75%; } .wow-bmp-shape-rsquare a, .wow-bmp-shape-rsquare li a { border-radius: 25%; } .wow-bmp-shape-square a, .wow-bmp-shape-square li a { border-radius: 0; } .wow-bmp i.color-white, .wow-bmp i.hcolor-white:hover, .wow-bmp input:hover + a i.hcolor-white { color: #ffffff; } .wow-bmp a.color-white, .wow-bmp a.hcolor-white:hover, .wow-bmp input:hover + a.hcolor-white { background: #ffffff; } .wow-bmp i.color-grey, .wow-bmp i.hcolor-grey:hover, .wow-bmp input:hover + a i.hcolor-grey { color: #808080; } .wow-bmp a.color-grey, .wow-bmp a.hcolor-grey:hover, .wow-bmp input:hover + a.hcolor-grey { background: #808080; } .wow-bmp i.color-black, .wow-bmp i.hcolor-black:hover, .wow-bmp input:hover + a i.hcolor-black { color: #000000; } .wow-bmp a.color-black, .wow-bmp a.hcolor-black:hover, .wow-bmp input:hover + a.hcolor-black { background: #000000; } .wow-bmp i.color-red, .wow-bmp i.hcolor-red:hover, .wow-bmp input:hover + a i.hcolor-red { color: #e3001b; } .wow-bmp a.color-red, .wow-bmp a.hcolor-red:hover, .wow-bmp input:hover + a.hcolor-red { background: #e3001b; } .wow-bmp i.color-orange, .wow-bmp i.hcolor-orange:hover, .wow-bmp input:hover + a i.hcolor-orange { color: #f60; } .wow-bmp a.color-orange, .wow-bmp a.hcolor-orange:hover, .wow-bmp input:hover + a.hcolor-orange { background: #f60; } .wow-bmp i.color-yellow, .wow-bmp i.hcolor-yellow:hover, .wow-bmp input:hover + a i.hcolor-yellow { color: #ffcc01; } .wow-bmp a.color-yellow, .wow-bmp a.hcolor-yellow:hover, .wow-bmp input:hover + a.hcolor-yellow { background: #ffcc01; } .wow-bmp i.color-lime, .wow-bmp i.hcolor-lime:hover, .wow-bmp input:hover + a i.hcolor-lime { color: #b1c903; } .wow-bmp a.color-lime, .wow-bmp a.hcolor-lime:hover, .wow-bmp input:hover + a.hcolor-lime { background: #b1c903; } .wow-bmp i.color-green, .wow-bmp i.hcolor-green:hover, .wow-bmp input:hover + a i.hcolor-green { color: #27a22d; } .wow-bmp a.color-green, .wow-bmp a.hcolor-green:hover, .wow-bmp input:hover + a.hcolor-green { background: #27a22d; } .wow-bmp i.color-cyan, .wow-bmp i.hcolor-cyan:hover, .wow-bmp input:hover + a i.hcolor-cyan { color: #00b1e5; } .wow-bmp a.color-cyan, .wow-bmp a.hcolor-cyan:hover, .wow-bmp input:hover + a.hcolor-cyan { background: #00b1e5; } .wow-bmp i.color-blue, .wow-bmp i.hcolor-blue:hover, .wow-bmp input:hover + a i.hcolor-blue { color: #006bb3; } .wow-bmp a.color-blue, .wow-bmp a.hcolor-blue:hover, .wow-bmp input:hover + a.hcolor-blue { background: #006bb3; } .wow-bmp i.color-purple, .wow-bmp i.hcolor-purple:hover, .wow-bmp input:hover + a i.hcolor-purple { color: #ad007c; } .wow-bmp a.color-purple, .wow-bmp a.hcolor-purple:hover, .wow-bmp input:hover + a.hcolor-purple { background: #ad007c; } .wow-bmp i.color-pink, .wow-bmp i.hcolor-pink:hover, .wow-bmp input:hover + a i.hcolor-pink { color: #ea4c89; } .wow-bmp a.color-pink, .wow-bmp a.hcolor-pink:hover, .wow-bmp input:hover + a.hcolor-pink { background: #ea4c89; }