/* Original Q geometry and colors, with the complete painted mark centered in tiles. */
.brand-mark{position:relative;width:27px;height:27px;border:5px solid #bbf879;border-radius:50%;display:inline-block}
.brand-mark:after{content:'';position:absolute;width:12px;height:5px;background:#bbf879;transform:rotate(45deg);right:-7px;bottom:-4px;border-radius:2px}
.rail .brand-mark{width:25px;height:25px;border-width:4px}

/* Preserve sizing when reused outside the demo reset. */
.brand-mark{box-sizing:border-box}

/* The tail extends beyond the ring's layout box. Center both together. */
.brand-tile>.brand-mark{transform:translate(-.590990px,-.840990px)}
.rail .brand-tile>.brand-mark{transform:translate(-1.090990px,-1.340990px)}