.ribbon{position:absolute;right:-5px;top:-6px;z-index:1;overflow:hidden;width:75px;height:75px;text-align:right;}
.ribbon span{font-size:10px;font-weight:bold;color:#FFF;text-transform:uppercase;text-align:center;line-height:20px;transform:rotate(45deg);-webkit-transform:rotate(45deg);width:100px;display:block;background:#B6BAC9;background:linear-gradient(#B6BAC9 0%,#808080 100%);box-shadow:0 3px 10px -5px rgba(0,0,0,1);position:absolute;top:19px;right:-21px;}
.ribbon span::before{content:"";position:absolute;left:0px;top:100%;z-index:-1;border-left:3px solid #808080;border-right:3px solid transparent;border-bottom:3px solid transparent;border-top:3px solid #808080;}
.ribbon span::after{content:"";position:absolute;right:0px;top:100%;z-index:-1;border-left:3px solid transparent;border-right:3px solid #808080;border-bottom:3px solid transparent;border-top:3px solid #808080;}
.ribbon.doubleLine{width:135px;height:85px;}
.ribbon.doubleLine span{font-size:9px;width:130px;line-height:15px;transform:rotate(35deg);-webkit-transform:rotate(35deg);top:13px;right:-20px;}
.ribbon.doubleLine span::before{border-left:none;}
.ribbon.smallFont span{font-size:9px;width:120px;top:26px;right:-25px;}
.ribbon.smallFont{width:90px;height:90px;}
.ribbon.blue span{background:#B6BAC9;background:linear-gradient(#05EFF7 0%,#087F8F 100%);}
.ribbon.blue span::before{border-left:3px solid #087F8F;border-top:3px solid #087F8F;}
.ribbon.blue span::after{border-right:3px solid #087F8F;border-top:3px solid #087F8F;}
.ribbon.darkblue span{background:#0c2340;background:linear-gradient(#2e76d2 0%,#0c2340 100%);}
.ribbon.darkblue span::before{border-left:3px solid #087F8F;border-top:3px solid #087F8F;}
.ribbon.darkblue span::after{border-right:3px solid #087F8F;border-top:3px solid #087F8F;}
.ribbon.red span{background:#B6BAC9;background:linear-gradient(#f34c4c 0%,#ab0000 100%);}