.dock-container{z-index:1000;position:fixed;width:100%;height:100%;pointer-events:none;display:flex}.dock{border:1px solid #ffffff1c;padding:.8em;border-radius:20px;transition:opacity .2s ease-out,transform .2s ease-out}.dock,.dock-item{display:flex;pointer-events:auto}.dock-item{background-color:#060606;margin:5px;width:50px;height:50px;padding:10px;border-radius:10px;border:1px solid #ffffff1c;position:relative;z-index:0;font-size:1.5em;align-items:center;justify-content:center;transition:transform .1s ease-out,background-color .3s ease-out;will-change:transform;cursor:pointer}.dock-item:hover{z-index:2;background-color:#111;transition:background-color .3s ease}.dock-container.left{top:0;left:1em;justify-content:flex-start;align-items:center;height:100%}.dock-container.right{top:0;right:1em;justify-content:flex-end;align-items:center;height:100%}.dock-container.top{top:1em;left:0;justify-content:center;align-items:flex-start;width:100%}.dock-container.bottom{bottom:1em;left:0;justify-content:center;align-items:flex-end;width:100%}.masonry{position:relative;width:100%;height:100%}.masonry>div{position:absolute;will-change:transform,width,height,opacity;padding:15px}.masonry>div>div{position:relative;background-size:cover;background-position:50%;width:100%;height:100%;overflow:hidden;text-transform:uppercase;font-size:10px;line-height:10px;border-radius:4px;box-shadow:0 10px 50px -10px rgba(0,0,0,.2);transition:.3s ease}.masonry>div>div:hover{transform:scale(1.1);transition:.3s ease}