.lt-custom-popup { position: fixed; right: 8px; top: 50%; z-index: 1000; display: none; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; border-radius: 64px; box-shadow: 0 0 25px rgba(0,0,0,.08); padding: 20px 10px 20px 10px; background-color: #fff; } .lt-custom-popup img { margin-bottom: 12px; } .lt-custom-popup .close { font-size: 14px; border-radius: 50%; position: absolute; top: 0; right: 0; font-size: 20px; color: #CE4F4D; z-index: 20; text-align: center; line-height: 20px; width: 20px; height: 20px; display: block; opacity: 1; background-color: #EEEEEE; transition: all 0.5s ease; } .lt-custom-popup.closed { padding: 15px 8px 6px 10px; right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; transition: all 0.25s ease; } .lt-custom-popup.closed:hover { padding-right: 14px; } .ltx-font-selector:hover { cursor: pointer; } .lt-custom-popup.closed img:hover { cursor: pointer; } .lt-custom-popup.closed .close { display: none; } .lt-custom-popup.closed div { display: none; } .lt-custom-popup.closed .img { display: block; overflow: hidden; height: 35px; width: 35px; text-align: center; } .lt-custom-popup.closed .img img { margin: 0; } .lt-custom-popup .close:hover { opacity: 1; color: #000; } @media (max-width: 991px) { .lt-custom-popup { display: none !important; } } .ltx-font-selector div, .ltx-color-selector div { border-radius: 50%; width: 35px; height: 35px; border: 4px solid #fff; display: block; margin: 4px auto 0; box-shadow: 0 0 5px rgba(0,0,0,.1); cursor: pointer; transition: all 0.5s ease; } .ltx-font-selector div:hover, .ltx-color-selector div:hover { box-shadow: 0 0 5px rgba(0,0,0,.2); } .lt-custom-field { padding: 0; border: 0; width: 20px; height: 20px; border-radius: 50%; margin-bottom: 14px; margin-left: auto; margin-right: auto; cursor: pointer; display: block; }