.ribbon span::after,.ribbon span::before{top:100%;z-index:-1;border-bottom:3px solid transparent;border-top:3px solid #ffb400;content:""}.ribbon span,.ribbon_a{text-transform:uppercase;color:#fff}.ribbon span,.ribbon1 span{font-size:14px;display:block}.ribbon_box{position:relative}.ribbon{position:absolute;right:-5px;top:-5px;z-index:1;overflow:hidden;width:75px;height:75px;text-align:right}.ribbon span,.ribbon1 span,.ribbon2,.ribbon5{text-align:center}.ribbon span{font-weight:700;line-height:20px;transform:rotate(45deg);-webkit-transform:rotate(45deg);width:100px;background:#ffb400;background:linear-gradient(#ffd266 0,#ffb400 100%);box-shadow:0 3px 6px -5px #000;position:absolute;top:19px;right:-21px}.ribbon span::before{position:absolute;left:0;border-left:3px solid #ffb400;border-right:3px solid transparent}.ribbon span::after{position:absolute;right:0;border-left:3px solid transparent;border-right:3px solid #ffb400}.ribbon_a{height:188px;position:relative;margin-bottom:30px;background:url(https://html5book.ru/wp-content/uploads/2015/10/snow-road.jpg) 0 0/cover}.ribbon3,.ribbon5{height:50px;line-height:50px}.ribbon1{position:absolute;top:-6.1px;right:10px}.ribbon1:after{position:absolute;content:"";width:0;height:0;border-left:53px solid transparent;border-right:53px solid transparent;border-top:10px solid #f8463f}.ribbon1 span{position:relative;background:#f8463f;line-height:1;padding:12px 8px 10px;border-top-right-radius:8px;width:90px}.ribbon1 span:after,.ribbon1 span:before{position:absolute;content:""}.ribbon1 span:before{height:6px;width:6px;left:-6px;top:0;background:#f8463f}.ribbon1 span:after{height:6px;width:8px;left:-8px;top:0;border-radius:8px 8px 0 0;background:#c02031}.ribbon2{width:60px;padding:10px 0;position:absolute;top:-6px;left:25px;border-top-left-radius:3px;background:#f47530}.ribbon2:before{height:0;width:0;right:-5.5px;top:.1px;border-bottom:6px solid #8d5a20;border-right:6px solid transparent}.ribbon-wrapper:after,.ribbon-wrapper:before,.ribbon2:after,.ribbon2:before,.ribbon3:after,.ribbon3:before,.ribbon4:after,.ribbon4:before,.ribbon5:after,.ribbon5:before{content:"";position:absolute}.ribbon2:after{height:0;width:0;bottom:-29.5px;left:0;border-left:30px solid #f47530;border-right:30px solid #f47530;border-bottom:30px solid transparent}.ribbon3{width:150px;padding-left:15px;position:absolute;left:-8px;top:20px;background:#59324c}.ribbon3:before{height:0;width:0;top:-8.5px;left:.1px;border-bottom:9px solid #000;border-left:9px solid transparent}.ribbon3:after{height:0;width:0;right:-14.5px;border-top:25px solid transparent;border-bottom:25px solid transparent;border-left:15px solid #59324c}.ribbon4{position:absolute;top:15px;padding:8px 10px;background:#00b3ed;box-shadow:-1px 2px 3px rgba(0,0,0,.3)}.ribbon4:before{width:7px;height:100%;top:0;left:-6.5px;padding:0 0 7px;background:inherit;border-radius:5px 0 0 5px}.ribbon4:after{width:5px;height:5px;bottom:-5px;left:-4.5px;background:#add8e6;border-radius:5px 0 0 5px}.ribbon5:after,.ribbon5:before{height:0;width:0;bottom:-10px;border-top:10px solid #cd8d11}.ribbon5{display:block;width:calc(100% + 20px);margin-left:-10px;margin-right:-10px;background:#edba19;position:relative;top:20px}.ribbon5:before{left:0;border-left:10px solid transparent}.ribbon5:after{right:0;border-right:10px solid transparent}.ribbon-wrapper{width:100%;height:100%;position:absolute;top:-5px;right:10px;overflow:hidden}.ribbon-wrapper:before{width:64px;height:5px;right:50px;border-radius:8px 8px 0 0;background:#c49000;background:linear-gradient(0deg,#ffb400,#c49000)}.ribbon-wrapper:after{width:5px;height:64px;right:0;top:50px;border-radius:0 8px 8px 0;background:#c49000;background:linear-gradient(90deg,#ffb400,#c49000)}.ribbon_multiline{width:200px;height:40px;position:absolute;top:17px;right:-61px;overflow:visible;transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);border-top:1px dashed #fff;border-bottom:1px dashed #fff;box-shadow:0 0 0 3px #ffb400,0 3px 5px -18px rgba(0,0,0,.6),-10px 2px 3px #000,0 1px 4px #000;background:#ffb400;background:linear-gradient(#ffd266 0,#ffb400 100%);color:#fff;z-index:2}.ribbon_multiline_content{position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);text-align:center;text-shadow:0 0 2px rgba(0,0,0,.5)}.ribbon-wrapper.light:before{background:linear-gradient(0deg,#fefefe,#b8b8b8)}.ribbon-wrapper.light:after{background:linear-gradient(90deg,#fefefe,#b8b8b8)}.ribbon-wrapper.success:before{background:linear-gradient(0deg,#74ad46,#045200)}.ribbon-wrapper.success:after{background:linear-gradient(90deg,#74ad46,#045200)}.ribbon-wrapper.primary:before{background:linear-gradient(0deg,#48a75b,#045200)}.ribbon-wrapper.primary:after{background:linear-gradient(90deg,#48a75b,#045200)}.ribbon-wrapper.info:before{background:linear-gradient(0deg,#38a1a2,#006370)}.ribbon-wrapper.info:after{background:linear-gradient(90deg,#38a1a2,#006370)}.ribbon-wrapper.warning:before{background:linear-gradient(0deg,#ffb400,#877200)}.ribbon-wrapper.warning:after{background:linear-gradient(90deg,#ffb400,#877200)}.ribbon-wrapper.danger:before{background:linear-gradient(0deg,#fa3e29,#7d0000)}.ribbon-wrapper.danger:after{background:linear-gradient(90deg,#fa3e29,#7d0000)}.ribbon-wrapper.dark:before{background:linear-gradient(0deg,#41586e,#1b252e)}.ribbon-wrapper.dark:after{background:linear-gradient(90deg,#41586e,#1b252e)}.ribbon-wrapper.black:before{background:linear-gradient(0deg,#424242,#0f0f0f)}.ribbon-wrapper.black:after{background:linear-gradient(90deg,#424242,#0f0f0f)}.ribbon_multiline.light{box-shadow:0 0 0 3px #e4e4e4,0 3px 5px -18px rgba(0,0,0,.6),-10px 2px 3px #000,0 1px 4px #000;background:linear-gradient(#fefefe 0,#e4e4e4 100%)}.ribbon_multiline.success{box-shadow:0 0 0 3px #74ad46,0 3px 5px -18px rgba(0,0,0,.6),-10px 2px 3px #000,0 1px 4px #000;background:linear-gradient(#9bc877 0,#74ad46 100%)}.ribbon_multiline.primary{box-shadow:0 0 0 3px #48a75b,0 3px 5px -18px rgba(0,0,0,.6),-10px 2px 3px #000,0 1px 4px #000;background:linear-gradient(#65bd77 0,#48a75b 100%)}.ribbon_multiline.info{box-shadow:0 0 0 3px #38a1a2,0 3px 5px -18px rgba(0,0,0,.6),-10px 2px 3px #000,0 1px 4px #000;background:linear-gradient(#5fc7c8 0,#38a1a2 100%)}.ribbon_multiline.warning{box-shadow:0 0 0 3px #ffb400,0 3px 5px -18px rgba(0,0,0,.6),-10px 2px 3px #000,0 1px 4px #000;background:linear-gradient(#ffd266 0,#ffb400 100%)}.ribbon_multiline.danger{box-shadow:0 0 0 3px #fa3e29,0 3px 5px -18px rgba(0,0,0,.6),-10px 2px 3px #000,0 1px 4px #000;background:linear-gradient(#fb6b5b 0,#fa3e29 100%)}.ribbon_multiline.dark{box-shadow:0 0 0 3px #25313e,0 3px 5px -18px rgba(0,0,0,.6),-10px 2px 3px #000,0 1px 4px #000;background:linear-gradient(#41586e 0,#25313e 100%)}.ribbon_multiline.black{box-shadow:0 0 0 3px #0f0f0f,0 3px 5px -18px rgba(0,0,0,.6),-10px 2px 3px #000,0 1px 4px #000;background:linear-gradient(#424242 0,#0f0f0f 100%)}@keyframes rotate{to{--angle:360deg}}@-webkit-keyframes rotate{to{--angle:360deg}}@-moz-keyframes rotate{to{--angle:360deg}}@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}