ul#bm_quicklinks { position: relative; margin: 0; padding-left: 0px; top: 50%; margin-top: 0px; top: 50%; margin-left: 0px; position:fixed; z-index: 9990; right: 0; } /*ul#bm_quicklinks li:first-child { margin-left:calc(-11% - 4px); }*/ ul#bm_quicklinks li { width: 50px; margin-left: 0px; list-style: none; } ul#bm_quicklinks li div { width: 50px; height: 50px; vertical-align: middle; text-align: center; transition: all .5s ease; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } ul#bm_quicklinks li div span.message { opacity: 0; font-weight:bold; position: absolute; top:50%; -webkit-transform: translate(0%, -50%) !important; -moz-transform: translate(0%, -50%) !important; -ms-transform: translate(0%, -50%) !important; transform: translate(0%, -50%) !important; text-align: center; margin:auto; left:0; right:0; margin: 0px 10px 0px 0px; } ul#bm_quicklinks li:hover div span.message { opacity: 1; } ul#bm_quicklinks li div:hover { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } ul#bm_quicklinks li div:hover { -webkit-transform: translatex(0); -moz-transform: translatex(0); -ms-transform: translatex(0); transform: translatex(0); } ul#bm_quicklinks li:hover:nth-child(1n+1) div { width: 160px; } ul#bm_quicklinks li div span.message { white-space:nowrap; } ul#bm_quicklinks li a { text-decoration: none; } ul#bm_quicklinks li a:focus { outline: none; } .bm_quicklinks span.bym-heading { display: block; text-align : left; line-height: 60px; font-size: 60px; font-weight: 400; padding: 0px 30px 10px 30px; } .pins { white-space: initial !important; } ul#bm_quicklinks li:nth-child(1) div { background-color: #56aaff; border: 1px solid #56aaff; } ul#bm_quicklinks li:hover:nth-child(1) div { background-color: #56aaff; background-image:none !important; border: 1px solid #56aaff; } ul#bm_quicklinks li span.fa { width: inherit; height: inherit; display: table-cell; vertical-align: middle; text-align: center; font-size: 20px; padding: 0px 0px 0px 0px; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; } ul#bm_quicklinks li:nth-child(1) span.fa { color: #ffffff; } ul#bm_quicklinks li:hover:nth-child(1) span.fa { position: relative; color: transparent; } ul#bm_quicklinks li:hover:nth-child(1) div span.message { } ul#bm_quicklinks li:hover:nth-child(1) div span.message, ul#bm_quicklinks li:hover:nth-child(1) div span.message p, ul#bm_quicklinks li:hover:nth-child(1) div span.message:hover p { color: #ffffff; } ul#bm_quicklinks li:nth-child(1) span.fa { width: 50px; } ul#bm_quicklinks li:nth-child(1) div { float: right; } ul#bm_quicklinks li:nth-child(2) div { background-color: #56aaff; border: 1px solid #56aaff; } ul#bm_quicklinks li:hover:nth-child(2) div { background-color: #56aaff; background-image:none !important; border: 1px solid #56aaff; } ul#bm_quicklinks li span.fa { width: inherit; height: inherit; display: table-cell; vertical-align: middle; text-align: center; font-size: 20px; padding: 0px 0px 0px 0px; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; } ul#bm_quicklinks li:nth-child(2) span.fa { color: #ffffff; } ul#bm_quicklinks li:hover:nth-child(2) span.fa { position: relative; color: transparent; } ul#bm_quicklinks li:hover:nth-child(2) div span.message { } ul#bm_quicklinks li:hover:nth-child(2) div span.message, ul#bm_quicklinks li:hover:nth-child(2) div span.message p, ul#bm_quicklinks li:hover:nth-child(2) div span.message:hover p { color: #ffffff; } ul#bm_quicklinks li:nth-child(2) span.fa { width: 50px; } ul#bm_quicklinks li:nth-child(2) div { float: right; } ul#bm_quicklinks li:nth-child(3) div { background-color: #56aaff; border: 1px solid #56aaff; } ul#bm_quicklinks li:hover:nth-child(3) div { background-color: #56aaff; background-image:none !important; border: 1px solid #56aaff; } ul#bm_quicklinks li span.fa { width: inherit; height: inherit; display: table-cell; vertical-align: middle; text-align: center; font-size: 20px; padding: 0px 0px 0px 0px; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; } ul#bm_quicklinks li:nth-child(3) span.fa { color: #ffffff; } ul#bm_quicklinks li:hover:nth-child(3) span.fa { position: relative; color: transparent; } ul#bm_quicklinks li:hover:nth-child(3) div span.message { } ul#bm_quicklinks li:hover:nth-child(3) div span.message, ul#bm_quicklinks li:hover:nth-child(3) div span.message p, ul#bm_quicklinks li:hover:nth-child(3) div span.message:hover p { color: #ffffff; } ul#bm_quicklinks li:nth-child(3) span.fa { width: 50px; } ul#bm_quicklinks li:nth-child(3) div { float: right; } ul#bm_quicklinks li:nth-child(4) div { background-color: #56aaff; border: 1px solid #56aaff; } ul#bm_quicklinks li:hover:nth-child(4) div { background-color: #56aaff; background-image:none !important; border: 1px solid #56aaff; } ul#bm_quicklinks li span.fa { width: inherit; height: inherit; display: table-cell; vertical-align: middle; text-align: center; font-size: 20px; padding: 0px 0px 0px 0px; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; } ul#bm_quicklinks li:nth-child(4) span.fa { color: #ffffff; } ul#bm_quicklinks li:hover:nth-child(4) span.fa { position: relative; color: transparent; } ul#bm_quicklinks li:hover:nth-child(4) div span.message { } ul#bm_quicklinks li:hover:nth-child(4) div span.message, ul#bm_quicklinks li:hover:nth-child(4) div span.message p, ul#bm_quicklinks li:hover:nth-child(4) div span.message:hover p { color: #ffffff; } ul#bm_quicklinks li:nth-child(4) span.fa { width: 50px; } ul#bm_quicklinks li:nth-child(4) div { float: right; } ul#bm_quicklinks li:nth-child(5) div { background-color:transparent; border: 1px solid #56aaff; } ul#bm_quicklinks li:hover:nth-child(5) div { background-color: #56aaff; background-image:none !important; border: 1px solid #56aaff; } ul#bm_quicklinks li span.fa { width: inherit; height: inherit; display: table-cell; vertical-align: middle; text-align: center; font-size: 20px; padding: 0px 0px 0px 0px; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; } ul#bm_quicklinks li:nth-child(5) span.fa { color: #56aaff; } ul#bm_quicklinks li:hover:nth-child(5) span.fa { position: relative; color: #ffffff; } ul#bm_quicklinks li:hover:nth-child(5) div span.message { display: none; } ul#bm_quicklinks li:nth-child(5) span.fa { width: 50px; } ul#bm_quicklinks li:nth-child(5) div { float: right; } .modal-dialog { position: absolute !important; top: 40% !important; left: 50% !important; -moz-transform: translate(-50%, -50%) !important; -webkit-transform: translate(-50%, -50%) !important; -ms-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; z-index:99999; } a.bym-popup:hover { cursor: cell; } bm_quicklinks li div span.message { font-weight: bold; width: 100% !important; } ul#bm_quicklinks li:hover:nth-child(5) div { width: 50px; } .modal-body { max-height: calc(100vh - 210px); overflow-y: auto; } .modal-dialog { width: 80% !important; text-align: center; -ms-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; } @media (max-width: 767px) { .modal-dialog { width: 90% !important; } } bm_quicklinks li div span.message { font-weight: bold; width: 100% !important; } ul#bm_quicklinks li:hover:nth-child(5) div { width: 50px; } .modal-body { max-height: calc(100vh - 210px); overflow-y: auto; } .modal-dialog { width: 80% !important; text-align: center; -ms-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; } @media (max-width: 767px) { .modal-dialog { width: 90% !important; } }  ul#bm_spinningsocial { position: relative; display: inline-block; transform: translatez(0); -ms-transform: translatez(0); -moz-transform: translatez(0); -webkit-transform: translatez(0); margin: 0; padding-left: 0px; top: 50%; margin-top: 10px; right : 0px; } /*ul#bm_spinningsocial li:first-child { margin-left:calc(-11% - 3px); }*/ ul#bm_spinningsocial li { width: 46px; display: inline-block; vertical-align: middle; margin-left: 3px; list-style: none; } ul#bm_spinningsocial li div { width: 46px; height: 46px; transition: all .5s ease; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-transform: initial; -moz-transform: initial; -ms-transform: initial; transform: initial; } ul#bm_spinningsocial li div span.message { opacity: 0; font-weight:bold; position: absolute; top:50%; -webkit-transform: translate(0%, -50%) !important; -moz-transform: translate(0%, -50%) !important; -ms-transform: translate(0%, -50%) !important; transform: translate(0%, -50%) !important; right: 0; text-align: right; margin: 0px 0px 0px 0px; } ul#bm_spinningsocial li:hover div span.message { opacity: 1; } ul#bm_spinningsocial li div:hover { transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } ul#bm_spinningsocial li a { text-decoration: none; } ul#bm_spinningsocial li a:focus { outline: none; } .bm_spinningsocial span.bym-heading { display: block; text-align : right; line-height: 60px; font-size: 60px; font-weight: 400; padding: 0px 30px 10px 30px; } .pins { white-space: initial !important; } ul#bm_spinningsocial li:nth-child(1) div { background-color:transparent; border: 1px solid #3B5998; } ul#bm_spinningsocial li:hover:nth-child(1) div { background-color: #3B5998; background-image:none !important; border: 1px solid #3B5998; } ul#bm_spinningsocial li span.fa { width: inherit; height: inherit; display: table-cell; vertical-align: middle; text-align: center; font-size: 20px; padding: 0px 0px 0px 0px; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; } ul#bm_spinningsocial li:nth-child(1) span.fa { color: #3B5998; } ul#bm_spinningsocial li:hover:nth-child(1) span.fa { position: relative; color: #ffffff; } ul#bm_spinningsocial li:nth-child(2) div { background-color:transparent; border: 1px solid #1DA1F2; } ul#bm_spinningsocial li:hover:nth-child(2) div { background-color: #1DA1F2; background-image:none !important; border: 1px solid #1DA1F2; } ul#bm_spinningsocial li span.fa { width: inherit; height: inherit; display: table-cell; vertical-align: middle; text-align: center; font-size: 20px; padding: 0px 0px 0px 0px; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; } ul#bm_spinningsocial li:nth-child(2) span.fa { color: #1DA1F2; } ul#bm_spinningsocial li:hover:nth-child(2) span.fa { position: relative; color: #ffffff; } ul#bm_spinningsocial li:nth-child(3) div { background-color:transparent; border: 1px solid #3e4c5b; } ul#bm_spinningsocial li:hover:nth-child(3) div { background-color: #3e4c5b; background-image: url("https://mysensualmagick.net/store/image/catalog/demo/links_bymona/instagram.jpg"); background-size: cover; background-position: 50% 50%; border: 1px solid #8247bb; } ul#bm_spinningsocial li span.fa { width: inherit; height: inherit; display: table-cell; vertical-align: middle; text-align: center; font-size: 20px; padding: 0px 0px 0px 0px; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; } ul#bm_spinningsocial li:nth-child(3) span.fa { color: #3e4c5b; } ul#bm_spinningsocial li:hover:nth-child(3) span.fa { position: relative; color: #ffffff; } ul#bm_spinningsocial li:nth-child(4) div { background-color:transparent; border: 1px solid #56aaff; } ul#bm_spinningsocial li:hover:nth-child(4) div { background-color: #56aaff; background-image:none !important; border: 1px solid #56aaff; } ul#bm_spinningsocial li span.fa { width: inherit; height: inherit; display: table-cell; vertical-align: middle; text-align: center; font-size: 20px; padding: 0px 0px 0px 0px; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; } ul#bm_spinningsocial li:nth-child(4) span.fa { color: #56aaff; } ul#bm_spinningsocial li:hover:nth-child(4) span.fa { position: relative; color: transparent; }