*{margin:0;padding:0;box-sizing:border-box}body{background:#FEFBFD}colorsBox{position:fixed;width:300px;height:300px;bottom:0;left:-260px;color:#3C8137;z-index:9999;font-family:sans-serif;transition:.5s cubic-bezier(1,1.48,.76,.95) left}colorsBox .blast-frame,colorsBox icon{position:absolute;background:#89D279;text-align:center;color:#3C8137}colorsBox icon{width:40px;line-height:40px;right:0;bottom:0;font-size:30px;cursor:pointer;border:1px solid #3C8137;perspective:1000px;transition:.5s ease all;transform-origin:left;transition-delay:.5s;z-index:9999}colorsBox .blast-frame{width:calc(100% - 40px);height:300px;top:0;left:0;text-transform:uppercase;letter-spacing:10px;padding:20px 5px}colorsBox .blast-colors{margin:20px;padding-bottom:20px}colorsBox .blast-color{position:relative;float:left;margin:2px;height:25px;width:25px;max-height:25px;max-width:25px;background:#000;color:transparent;overflow:hidden;cursor:pointer;border:2px solid #fff}colorsBox .blast-custom-colors{clear:both;padding-top:40px}colorsBox input[name=blastCustomColor]{margin-top:20px;cursor:pointer;height:30px;width:100px;border:none;outline:0;background:0 0;padding:0}.appear-it{left:0}.flip-it{transform:rotateY(180deg);border-left:none}