*{margin:0;padding:0;box-sizing:border-box}.blast-box{position:fixed;width:300px;height:300px;bottom:0;right:-260px;color:#3C8137;z-index:9999;font-family:sans-serif;transition:0.5s cubic-bezier(1, 1.48, 0.76, 0.95) left}.blast-icon{position:absolute;width:40px;line-height:40px;right:0;bottom:0;color:#fff;background:#333;text-align:center;font-size:30px;cursor:pointer;border:1px solid #333;perspective:1000px;transition:0.5s ease all;transform-origin:left;transition-delay:0.5s;z-index:9999}.blast-box .blast-frame{position:absolute;width:calc(100% - 40px);height:210px;top:92px;right:0;background:#333;text-align:center;text-transform:uppercase;letter-spacing:10px;color:#fff;padding:20px 5px}
.blast-box .blast-colors{margin:22px;padding-bottom:20px}.blast-box .blast-color{position:relative;float:left;margin:2px;height:35px;width:35px;max-height:40px;max-width:40px;background:black;color:transparent;overflow:hidden;cursor:pointer;border:2px solid white}.blast-box .blast-custom-colors{clear:both;padding-top:40px}.blast-box input[name="blastCustomColor"]{margin-top:20px;cursor:pointer;height:30px;width:100px;border:none;outline:none;background:transparent;padding:0}.appear-it{right:0}.flip-it{border-left:none;}
@media (max-width: 500px){
  .blast-box .blast-frame{height: 297px;font-size: 10px;letter-spacing: 3px;top: 93px;}
    .blast-box {width: 120px;right:-80px;}
.blast-box .blast-icon{top: 114% !important;}
.appear-it{right:0 !important;}
.blast-box .blast-colors{margin:11px;}
}