/* PRODUCT LABELS */ .ribbon { position: absolute; left: 10px; top: -5px; z-index: 20; overflow: hidden; width: 75px; height: 75px; text-align: right; } @media (max-width: 767px) { .ribbon { left: 10px; top: -5px; } .view_list .ribbon { left: 10px; top: 25px; } } .ribbon span { font-size: 10px; font-weight: bold; text-transform: uppercase; text-align: center; line-height: 20px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); width: 100px; display: block; position: absolute; top: 19px; left: -21px; } /* Discount Sale */ .ribbon_3 span, .ribbon_2 span { color: #FFF; background: #79A70A; background: linear-gradient(#F70505 0%, #8F0808 100%); box-shadow: 0 3px 10px -5px black; } .ribbon_3 span::before, .ribbon_2 span::before { content: ""; position: absolute; left: 0px; top: 100%; z-index: -1; border-left: 3px solid #8F0808; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #8F0808; } .ribbon_3 span::after, .ribbon_2 span::after { content: ""; position: absolute; right: 0px; top: 100%; z-index: -1; border-left: 3px solid transparent; border-right: 3px solid #8F0808; border-bottom: 3px solid transparent; border-top: 3px solid #8F0808; } /* New */ .ribbon_1 span { color: #FFF; background: #79A70A; background: linear-gradient(#9BC90D 0%, #79A70A 100%); box-shadow: 0 3px 10px -5px black; } .ribbon_1 span::before { content: ""; position: absolute; left: 0px; top: 100%; z-index: -1; border-left: 3px solid #79A70A; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #79A70A; } .ribbon_1 span::after { content: ""; position: absolute; right: 0px; top: 100%; z-index: -1; border-left: 3px solid transparent; border-right: 3px solid #79A70A; border-bottom: 3px solid transparent; border-top: 3px solid #79A70A; } /* Bestseller Best price */ .ribbon_4 span, .ribbon_5 span { color: #FFF; background: #79A70A; background: linear-gradient(#F79E05 0%, #8F5408 100%); box-shadow: 0 3px 10px -5px black; } .ribbon_4 span::before, .ribbon_5 span::before { content: ""; position: absolute; left: 0px; top: 100%; z-index: -1; border-left: 3px solid #8F5408; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #8F5408; } .ribbon_4 span::after, .ribbon_5 span::after { content: ""; position: absolute; right: 0px; top: 100%; z-index: -1; border-left: 3px solid transparent; border-right: 3px solid #8F5408; border-bottom: 3px solid transparent; border-top: 3px solid #8F5408; } /* Product day, Popular */ .ribbon_7 span, .ribbon_8 span { color: #FFF; background: #79A70A; background: linear-gradient(#2989d8 0%, #1e5799 100%); box-shadow: 0 3px 10px -5px black; } .ribbon_7 span::before, .ribbon_8 span::before { content: ""; position: absolute; left: 0px; top: 100%; z-index: -1; border-left: 3px solid #1e5799; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #1e5799; } .ribbon_7 span::after, .ribbon_8 span::after { content: ""; position: absolute; right: 0px; top: 100%; z-index: -1; border-left: 3px solid transparent; border-right: 3px solid #1e5799; border-bottom: 3px solid transparent; border-top: 3px solid #1e5799; } /* Hot deal, recommended */ .ribbon_6 span, .ribbon_10 span { color: #FFF; background: #79A70A; background: linear-gradient(#F7E64A 0%, #A7820A 100%); box-shadow: 0 3px 10px -5px black; } .ribbon_6 span::before, .ribbon_10 span::before { content: ""; position: absolute; left: 0px; top: 100%; z-index: -1; border-left: 3px solid #A7820A; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #A7820A; } .ribbon_6 span::after, .ribbon_10 span::after { content: ""; position: absolute; right: 0px; top: 100%; z-index: -1; border-left: 3px solid transparent; border-right: 3px solid #A7820A; border-bottom: 3px solid transparent; border-top: 3px solid #A7820A; } /* Promo */ .ribbon_9 span { color: #FFF; background: #79A70A; background: linear-gradient(#F74ADA 0%, #9D0AA7 100%); box-shadow: 0 3px 10px -5px black; } .ribbon_9 span::before { content: ""; position: absolute; left: 0px; top: 100%; z-index: -1; border-left: 3px solid #9D0AA7; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #9D0AA7; } .ribbon_9 span::after { content: ""; position: absolute; right: 0px; top: 100%; z-index: -1; border-left: 3px solid transparent; border-right: 3px solid #9D0AA7; border-bottom: 3px solid transparent; border-top: 3px solid #9D0AA7; }