.ribbon{width:150px;height:150px;overflow:hidden;position:absolute;z-index:1}.ribbon:before,.ribbon:after{position:absolute;z-index:-1;content:'';display:block;border:5px solid rgba(0,0,0,.5)}.ribbon span{position:absolute;display:block;width:225px;padding:15px 5px;background-color:var(--mainColor);box-shadow:0 5px 10px rgba(0,0,0,.1);color:#fff;font:700 18px/1 var(--mainFont);text-shadow:0 1px 1px rgba(0,0,0,.2);text-transform:uppercase;text-align:center}.ribbon span.alt{background-color:var(--secondaryColor)}.ribbon span.red{background-color:darkred;color:#fff !important}.ribbon-top-left{top:-10px;left:-10px}.ribbon-top-left:before,.ribbon-top-left:after{border-top-color:transparent;border-left-color:transparent}.ribbon-top-left:before{top:0;right:0}.ribbon-top-left:after{bottom:0;left:0}.ribbon-top-left span{right:-25px;top:30px;transform:rotate(-45deg)}.ribbon-top-right{top:-10px;right:-10px}.ribbon-top-right:before,.ribbon-top-right:after{border-top-color:transparent;border-right-color:transparent}.ribbon-top-right:before{top:0;left:0}.ribbon-top-right:after{bottom:0;right:0}.ribbon-top-right span{left:-25px;top:30px;transform:rotate(45deg)}.ribbon-bottom-left{bottom:-10px;left:-10px}.ribbon-bottom-left:before,.ribbon-bottom-left:after{border-bottom-color:transparent;border-left-color:transparent}.ribbon-bottom-left:before{bottom:0;right:0}.ribbon-bottom-left:after{top:0;left:0}.ribbon-bottom-left span{right:-25px;bottom:30px;transform:rotate(calc( 180deg + 225deg ) )}.ribbon-bottom-right{bottom:-10px;right:-10px}.ribbon-bottom-right:before,.ribbon-bottom-right:after{border-bottom-color:transparent;border-right-color:transparent}.ribbon-bottom-right:before{bottom:0;left:0}.ribbon-bottom-right:after{top:0;right:0}.ribbon-bottom-right span{left:-25px;bottom:30px;transform:rotate(calc( 180deg + -225deg ) )}.ribbon-alt-left{--ribbonWidth:250px;width:var(--ribbonWidth);overflow:visible;left:-10px;bottom:-50px}.ribbon-alt-left:before{top:20px;border-top-color:transparent;border-left-color:transparent}.ribbon-alt-left:after{top:29px;right:-20px;border-top:25px solid transparent;border-right:5px solid transparent;border-bottom:25px solid transparent;border-left:15px solid var(--mainColor);z-index:1}.ribbon-alt-left.r2:after{border-top:34px solid transparent;border-bottom:34px solid transparent}.ribbon-alt-left span{top:30px;width:var(--ribbonWidth)}.ribbon-alt-right{--ribbonWidth:250px;width:var(--ribbonWidth);overflow:visible;right:-10px;bottom:-50px}.ribbon-alt-right:before{top:29px;left:-20px;border-top:25px solid transparent;border-left:5px solid transparent;border-bottom:25px solid transparent;border-right:15px solid var(--mainColor);z-index:1}.ribbon-alt-right.r2:before{border-top:34px solid transparent;border-bottom:34px solid transparent}.ribbon-alt-right:after{border-top-color:transparent;border-right-color:transparent;top:20px;right:0}.ribbon-alt-right span{top:30px;width:var(--ribbonWidth)}