.ribbon{position:absolute;top:10px;right:-1px;color:#fff;background:#00a8ff;padding:5px 12px 5px 9px;white-space:nowrap}.ribbon.right-top{top:10px;bottom:auto;right:-1px;left:auto}.ribbon.right-top:after{position:absolute;left:-10px;top:0;display:block;content:'';width:0;height:0;border-style:solid;border-width:0 10px 17px 0;border-top-color:transparent!important;border-right-color:#00a8ff;border-bottom-color:transparent!important;border-left-color:transparent!important}.ribbon.right-top:before{position:absolute;left:-10px;bottom:0;display:block;content:'';width:0;height:0;border-style:solid;border-width:0 0 17px 10px;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:#00a8ff;border-left-color:transparent!important}.ribbon.right-bottom{top:auto;bottom:10px;right:-1px;left:auto}.ribbon.right-bottom:after{position:absolute;left:-10px;top:0;display:block;content:'';width:0;height:0;border-style:solid;border-width:0 10px 17px 0;border-top-color:transparent!important;border-right-color:#00a8ff;border-bottom-color:transparent!important;border-left-color:transparent!important}.ribbon.right-bottom:before{position:absolute;left:-10px;bottom:0;display:block;content:'';width:0;height:0;border-style:solid;border-width:0 0 17px 10px;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:#00a8ff;border-left-color:transparent!important}.ribbon.left-top{padding:5px 9px 5px 12px;top:10px;bottom:auto;right:auto;left:-1px}.ribbon.left-top:after{position:absolute;right:-10px;left:auto;top:0;display:block;content:'';width:0;height:0;border-style:solid;border-width:17px 10px 0 0;border-top-color:#00a8ff;border-right-color:transparent!important;border-bottom-color:transparent!important;border-left-color:transparent!important}.ribbon.left-top:before{position:absolute;right:-10px;left:auto;bottom:0;display:block;content:'';width:0;height:0;border-style:solid;border-width:17px 0 0 10px;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important;border-left-color:#00a8ff}.ribbon.left-bottom{padding:5px 9px 5px 12px;top:auto;bottom:10px;right:auto;left:-1px}.ribbon.left-bottom:after{position:absolute;right:-10px;left:auto;top:0;display:block;content:'';width:0;height:0;border-style:solid;border-width:17px 10px 0 0;border-top-color:#00a8ff;border-right-color:transparent!important;border-bottom-color:transparent!important;border-left-color:transparent!important}.ribbon.left-bottom:before{position:absolute;right:-10px;left:auto;bottom:0;display:block;content:'';width:0;height:0;border-style:solid;border-width:17px 0 0 10px;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important;border-left-color:#00a8ff}.ribbon.green{background-color:#4cc159}.ribbon.green:after,.ribbon.green:before{border-color:#4cc159}.ribbon.purple{background-color:#00bbd4}.ribbon.purple:after,.ribbon.purple:before{border-color:#00bbd4}.ribbon.yellow{background-color:#fdc006}.ribbon.yellow:after,.ribbon.yellow:before{border-color:#fdc006}.ribbon.red{background-color:#f34135}.ribbon.red:after,.ribbon.red:before{border-color:#f34135}.ribbon.transparent{background-color:rgba(255,255,255,.5)}.ribbon.transparent:after,.ribbon.transparent:before{border-color:rgba(255,255,255,.5)}