.ribbon{position:absolute;z-index:100;overflow:hidden;width:75px;height:75px;text-align:right}.ribbon.top-left{left:-5px;top:-5px}.ribbon.top-right{right:-5px;top:-5px}.ribbon.bottom-left{left:-5px;bottom:-5px}.ribbon.bottom-right{right:-5px;bottom:-5px}.ribbon span{font-size:10px;font-weight:700;color:#FFF;text-transform:uppercase;text-align:center;line-height:20px;width:100px;display:block;position:absolute}.ribbon.top-left span{transform:rotate(-45deg);-webkit-transform:rotate(-45deg);top:19px;left:-21px;box-shadow:0 3px 10px -5px rgba(0,0,0,1)}.ribbon.top-right span{transform:rotate(45deg);-webkit-transform:rotate(45deg);top:19px;right:-21px;box-shadow:0 3px 10px -5px rgba(0,0,0,1)}.ribbon.bottom-left span{transform:rotate(45deg);-webkit-transform:rotate(45deg);bottom:19px;left:-21px;box-shadow:0 -2px 10px -6px rgba(0,0,0,1)}.ribbon.bottom-right span{transform:rotate(-45deg);-webkit-transform:rotate(-45deg);bottom:19px;right:-21px;box-shadow:0 -2px 10px -6px rgba(0,0,0,1)}.ribbon.red span{background:#8F0808;background:linear-gradient(#F70505 0%,#8F0808 100%)}.ribbon.green span{background:#79A70A;background:linear-gradient(#9BC90D 0%,#79A70A 100%)}.ribbon.blue span{background:#79A70A;background:linear-gradient(#2989d8 0%,#1e5799 100%)}.ribbon.gold span{background:#8F0808;background:linear-gradient(#F79E05 0%,#8F5408 100%)}.ribbon span::before{content:"";z-index:-1;position:absolute}.ribbon.top-right span::before{left:0;top:100%}.ribbon.top-left span::before{left:0;top:100%}.ribbon.bottom-right span::before{left:0;bottom:100%}.ribbon.bottom-left span::before{left:0;bottom:100%}.ribbon.top-right.red span::before{border-left:3px solid #8F0808;border-right:3px solid transparent;border-bottom:3px solid transparent;border-top:3px solid #8F0808}.ribbon.top-right.green span::before{border-left:3px solid #79A70A;border-right:3px solid transparent;border-bottom:3px solid transparent;border-top:3px solid #79A70A}.ribbon.top-right.blue span::before{border-left:3px solid #1e5799;border-right:3px solid transparent;border-bottom:3px solid transparent;border-top:3px solid #1e5799}.ribbon.top-right.gold span::before{border-left:3px solid #8F5408;border-right:3px solid transparent;border-bottom:3px solid transparent;border-top:3px solid #8F5408}.ribbon.top-left.red span::before{border-left:3px solid #8F0808;border-right:3px solid transparent;border-bottom:3px solid transparent;border-top:3px solid #8F0808}.ribbon.top-left.green span::before{border-left:3px solid #79A70A;border-right:3px solid transparent;border-bottom:3px solid transparent;border-top:3px solid #79A70A}.ribbon.top-left.blue span::before{border-left:3px solid #1e5799;border-right:3px solid transparent;border-bottom:3px solid transparent;border-top:3px solid #1e5799}.ribbon.top-left.gold span::before{border-left:3px solid #8F5408;border-right:3px solid transparent;border-bottom:3px solid transparent;border-top:3px solid #8F5408}.ribbon.bottom-left.red span::before{border-left:3px solid #F70505;border-right:3px solid transparent;border-bottom:3px solid #F70505;border-top:3px solid transparent}.ribbon.bottom-left.green span::before{border-left:3px solid #9BC90D;border-right:3px solid transparent;border-bottom:3px solid #9BC90D;border-top:3px solid transparent}.ribbon.bottom-left.blue span::before{border-left:3px solid #2989d8;border-right:3px solid transparent;border-bottom:3px solid #2989d8;border-top:3px solid transparent}.ribbon.bottom-left.gold span::before{border-left:3px solid #F79E05;border-right:3px solid transparent;border-bottom:3px solid #F79E05;border-top:3px solid transparent}.ribbon.bottom-right.red span::before{border-left:3px solid #F70505;border-right:3px solid transparent;border-bottom:3px solid #F70505;border-top:3px solid transparent}.ribbon.bottom-right.green span::before{border-left:3px solid #9BC90D;border-right:3px solid transparent;border-bottom:3px solid #9BC90D;border-top:3px solid transparent}.ribbon.bottom-right.blue span::before{border-left:3px solid #2989d8;border-right:3px solid transparent;border-bottom:3px solid #2989d8;border-top:3px solid transparent}.ribbon.bottom-right.gold span::before{border-left:3px solid #F79E05;border-right:3px solid transparent;border-bottom:3px solid #F79E05;border-top:3px solid transparent}.ribbon span::after{content:"";position:absolute;z-index:-1}.ribbon.top-right span::after{right:0;top:100%}.ribbon.top-left span::after{right:0;top:100%}.ribbon.bottom-right span::after{right:0;bottom:100%}.ribbon.bottom-left span::after{right:0;bottom:100%}.ribbon.top-right.red span::after{border-left:3px solid transparent;border-right:3px solid #8F0808;border-bottom:3px solid transparent;border-top:3px solid #8F0808}.ribbon.top-right.green span::after{border-left:3px solid transparent;border-right:3px solid #79A70A;border-bottom:3px solid transparent;border-top:3px solid #79A70A}.ribbon.top-right.blue span::after{border-left:3px solid transparent;border-right:3px solid #1e5799;border-bottom:3px solid transparent;border-top:3px solid #1e5799}.ribbon.top-right.gold span::after{border-left:3px solid transparent;border-right:3px solid #8F5408;border-bottom:3px solid transparent;border-top:3px solid #8F5408}.ribbon.top-left.red span::after{border-left:3px solid transparent;border-right:3px solid #8F0808;border-bottom:3px solid transparent;border-top:3px solid #8F0808}.ribbon.top-left.green span::after{border-left:3px solid transparent;border-right:3px solid #79A70A;border-bottom:3px solid transparent;border-top:3px solid #79A70A}.ribbon.top-left.blue span::after{border-left:3px solid transparent;border-right:3px solid #1e5799;border-bottom:3px solid transparent;border-top:3px solid #1e5799}.ribbon.top-left.gold span::after{border-left:3px solid transparent;border-right:3px solid #8F5408;border-bottom:3px solid transparent;border-top:3px solid #8F5408}.ribbon.bottom-right.red span::after{border-left:3px solid transparent;border-right:3px solid #F70505;border-bottom:3px solid #F70505;border-top:3px solid transparent}.ribbon.bottom-right.green span::after{border-left:3px solid transparent;border-right:3px solid #9BC90D;border-bottom:3px solid #9BC90D;border-top:3px solid transparent}.ribbon.bottom-right.blue span::after{border-left:3px solid transparent;border-right:3px solid #2989d8;border-bottom:3px solid #2989d8;border-top:3px solid transparent}.ribbon.bottom-right.gold span::after{border-left:3px solid transparent;border-right:3px solid #F79E05;border-bottom:3px solid #F79E05;border-top:3px solid transparent}.ribbon.bottom-left.red span::after{border-left:3px solid transparent;border-right:3px solid #F70505;border-bottom:3px solid #F70505;border-top:3px solid transparent}.ribbon.bottom-left.green span::after{border-left:3px solid transparent;border-right:3px solid #9BC90D;border-bottom:3px solid #9BC90D;border-top:3px solid transparent}.ribbon.bottom-left.blue span::after{border-left:3px solid transparent;border-right:3px solid #2989d8;border-bottom:3px solid #2989d8;border-top:3px solid transparent}.ribbon.bottom-left.gold span::after{border-left:3px solid transparent;border-right:3px solid #F79E05;border-bottom:3px solid #F79E05;border-top:3px solid transparent}