.kudos{color:#000;position:relative;width:6em;height:6em;margin:.5em auto 1.5em auto;background:#fff;box-shadow:inset 0 0 0 0.25em #000,inset 0 0 0 2em #fff,inset 0 0 0 6em #000;line-height:6em;text-align:center;border-radius:50%;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-transition:box-shadow 0.225s ease-out;-moz-transition:box-shadow 0.225s ease-out;-o-transition:box-shadow 0.225s ease-out;transition:box-shadow 0.225s ease-out}.kudos:before{-webkit-transition:font-size 0.45s ease-in;-moz-transition:font-size 0.45s ease-in;-o-transition:font-size 0.45s ease-in;transition:font-size 0.45s ease-in;font-size:1.75em;line-height:1.75;color:#fff}.kudos.active{-webkit-transition:box-shadow 1.5s linear;-moz-transition:box-shadow 1.5s linear;-o-transition:box-shadow 1.5s linear;transition:box-shadow 1.5s linear;box-shadow:inset 0 0 0 0.25em #000,inset 0 0 0 0 #fff,inset 0 0 0 0.75em rgba(204,61,57,0.75),inset 0 0 0 6em #cc3d39}.kudos.active:after{content:'Don\'t move!'}.kudos.finish{-webkit-transition:box-shadow 0.45s linear,-webkit-transform 0.5625s ease-in-out;-moz-transition:box-shadow 0.45s linear,-moz-transform 0.5625s ease-in-out;-o-transition:box-shadow 0.45s linear,-o-transform 0.5625s ease-in-out;transition:box-shadow 0.45s linear,transform 0.5625s ease-in-out;box-shadow:inset 0 0 0 0.25em rgba(204,61,57,0.5),inset 0 0 0 0.5em #fff,inset 0 0 0 0.75em rgba(204,61,57,0.75),inset 0 0 0 1em #fff,inset 0 0 0 0 #fff,inset 0 0 0 6em #cc3d39}.kudos.finish:hover{-webkit-transform:scale(1.25, 1.25);-moz-transform:scale(1.25, 1.25);-ms-transform:scale(1.25, 1.25);-o-transform:scale(1.25, 1.25);transform:scale(1.25, 1.25)}.kudos.finish:before{font-size:2.25em;line-height:2.25;color:#fff}.kudos:after{position:absolute;content:attr(data-amount) " Kudos";bottom:-1.25em;left:0;width:6em;text-align:center;line-height:1em}