.ribbon{pointer-events:none;overflow:hidden;position:absolute;top:-6px;left:-4px;opacity:.9;z-index:1}.ribbon::after,.ribbon::before{position:absolute;z-index:-1;content:'';display:block;border-top-color:transparent;border-left-color:transparent}.ribbon::before{top:0;right:0}.ribbon::after{bottom:0;left:0}.ribbon span{pointer-events:all;position:absolute;display:block;-webkit-box-shadow:0 2px 3px rgba(0,0,0,.4);-moz-box-shadow:0 2px 3px rgba(0,0,0,.4);box-shadow:0 2px 3px rgba(0,0,0,.4);color:#fff;font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif;font-size:16px;font-weight:700;line-height:20px;text-shadow:0 1px 1px rgba(0,0,0,.6);text-align:center;-webkit-transform:rotate(-45deg) translate3d(0,0,0);-moz-transform:rotate(-45deg) translate3d(0,0,0);-ms-transform:rotate(-45deg) translate3d(0,0,0);-o-transform:rotate(-45deg) translate3d(0,0,0);transform:rotate(-45deg) translate3d(0,0,0);-moz-transition:all .5s ease-in;-o-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;transition:all .5s ease-in}.ribbon_blue{width:100px;height:100px}.ribbon_blue::after,.ribbon_blue::before{border:2px solid #2980b9}.ribbon_blue span{width:140px;padding:0;background-color:#06c;right:-6px;top:16px}.ribbon_red{width:165px;height:165px}.ribbon_red::after,.ribbon_red::before{border:2px solid #c30}.ribbon_red span{width:240px;padding:12px 0;background-color:#f30;right:-22px;top:45px}.ribbon_black{width:165px;height:165px}.ribbon_black::after,.ribbon_black::before{border:2px solid #202020}.ribbon_black span{width:240px;padding:12px 0;background-color:#333;right:-22px;top:45px}.ribbon_green{width:165px;height:165px}.ribbon_green::after,.ribbon_green::before{border:2px solid #360}.ribbon_green span{width:240px;padding:12px 0;background-color:#390;right:-22px;top:45px}.ribbon_pink{width:165px;height:165px}.ribbon_pink::after,.ribbon_pink::before{border:2px solid #c00e5f}.ribbon_pink span{width:240px;padding:12px 0;background-color:#fb248f;right:-22px;top:45px}.ribbon_sm{top:40px;left:-10px}.ribbon_sm span{font-size:12px;padding:9px 0;line-height:14px}.ribbon_sm::before{border:0}.ribbon_blue.ribbon_sm{width:80px;height:80px}.ribbon_blue.ribbon_sm span{width:124px;padding:0;right:-12px;top:16px}.ribbon_black.ribbon_sm,.ribbon_green.ribbon_sm,.ribbon_pink.ribbon_sm,.ribbon_red.ribbon_sm{width:124px;height:124px}.ribbon_black.ribbon_sm span,.ribbon_green.ribbon_sm span,.ribbon_pink.ribbon_sm span,.ribbon_red.ribbon_sm span{width:174px;padding:8px 0;right:-14px;top:36px}.ribbon_blue span:hover{color:#333;background-color:#6ff}.ribbon_green span:hover{color:#333;background-color:#6f9}.ribbon_red span:hover{color:#333;background-color:#f99}.ribbon_black span:hover{color:#333;background-color:#ccc}.ribbon_pink span:hover{color:#333;background-color:#fee0eb}