.wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;--black:#000;--ch-black:#141414;--eer-black:#1b1b1b;--night-rider:#2e2e2e;--white:#fff;--af-white:#f3f3f3;--ch-white:#e1e1e1}footer .demo{position:absolute;bottom:10px;width:500px;margin:0 auto}footer .demo a{text-align:center;color:#000;text-decoration:none;font-weight:100;border-bottom:1px solid #000}.circle{display:block;position:relative;padding:0;z-index:98;margin:0 auto;box-shadow:0 6px 10px 0 rgba(0,0,0,.3);border-radius:50%;height:60px;width:60px;background-color:var(--white);transition:.2s;text-align:center}.circle:active{transform:scale(.9);box-shadow:0 2px 15px 0 rgba(0,0,0,.3)}.circle:hover{cursor:pointer;background-color:var(--af-white);box-shadow:0 8px 15px 0 rgba(0,0,0,.3)}.circle .svg{position:absolute;top:50%;left:50%;margin-left:-15px;margin-top:-15px;width:30px;height:30px;transition:.5s;transform:rotate(180deg)}.circle svg image{filter:brightness(50%)}.sub-circle{z-index:0;position:absolute;height:70px;width:70px;overflow:hidden;border-radius:50%;transition:.3s;transform:scale(.5);opacity:0;padding:0;margin:0;box-shadow:0 6px 10px 0 rgba(0,0,0,.1);border:none;background-color:#fff;display:flex;justify-content:center;align-items:center}.sub-circle label{background-color:var(--af-white);display:block;color:#fff;width:100%;height:100%;line-height:40px;transition:.5s}.sub-circle label:hover{cursor:pointer;background-color:var(--ch-white)}.subs{left:15px;top:-65px;width:40px;height:40px;text-align:center;z-index:0;margin:0 auto;position:relative}.hidden-sub-trigger{display:none}.hidden-sub-trigger:checked~label{background-color:var(--white)}.hidden-trigger{display:none}.hidden-trigger:checked~.circle{transform:scale(.9);cursor:pointer;background-color:var(--white);box-shadow:0 8px 15px 0 rgba(0,0,0,.1)}.hidden-trigger:checked~.circle .svg{transform:rotate(45deg)}.hidden-trigger:checked~.subs a:first-of-type{transform:translateY(-100px) scale(1);opacity:1;transition:.1s}.hidden-trigger:checked~.subs a:nth-of-type(2){transform:translate(75px,-75px) scale(1);opacity:1;transition:.2s}.hidden-trigger:checked~.subs a:nth-of-type(3){transform:translate(100px) scale(1);opacity:1;transition:.3s}.hidden-trigger:checked~.subs a:nth-of-type(4){transform:translate(75px,75px) scale(1);opacity:1;transition:.4s}.hidden-trigger:checked~.subs a:nth-of-type(5){transform:translateY(100px) scale(1);opacity:1;transition:.5s}.hidden-trigger:checked~.subs a:nth-of-type(6){transform:translate(-75px,75px) scale(1);opacity:1;transition:.6s}.hidden-trigger:checked~.subs a:nth-of-type(7){transform:translate(-100px) scale(1);opacity:1;transition:.7s}.hidden-trigger:checked~.subs a:nth-of-type(8){transform:translate(-75px,-75px) scale(1);opacity:1;transition:.8s}