.ribbon {
    position: absolute;
    top: 0;
    right: 0
}

.ribbon .banner,.ribbon .text,.ribbon a {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: 0 0
}

.ribbon a {
    color: #fff;
    text-decoration: none
}

.no-css-transforms .ribbon {
    font-size: 1em;
    position: relative;
    width: 100%
}

.ribbon .banner {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    color: #fff;
    -webkit-font-smoothing: antialiased;
    display: block;
    float: right;
    position: relative;
    right: -14px;
    top: 22px;
    width: 100px
}

.ribbon-small .banner {
    right: -8px;
    top: 15px;
    width: 65px
}

.ribbon-large .banner {
    right: -20px;
    top: 32px;
    width: 150px
}

.ribbon .banner::after,.ribbon .banner::before {
    content: '';
    display: block;
    height: 12px;
    position: absolute;
    width: 30px
}

.ribbon-small .banner::after,.ribbon-small .banner::before {
    height: 6px;
    width: 20px
}

.ribbon-large .banner::after,.ribbon-large .banner::before {
    height: 18px;
    width: 45px
}

.ribbon .banner::before {
    -webkit-transform: skewY(-45deg) translate(50%,15px);
    -moz-transform: skewY(-45deg) translate(50%,15px);
    -ms-transform: skewY(-45deg) translate(50%,15px);
    -o-transform: skewY(-45deg) translate(50%,15px);
    -webkit-transform-origin: 100% center;
    -moz-transform-origin: 100% center;
    -ms-transform-origin: 100% center;
    -o-transform-origin: 100% center;
    left: -45px
}

.ribbon-small .banner::before {
    top: -5px;
    left: -30px
}

.ribbon-large .banner::before {
    top: 9px;
    left: -68px
}

.ribbon .banner::after {
    -webkit-transform: translate(100%,-100%) skewY(45deg) translateX(-58%);
    -moz-transform: translate(100%,-100%) skewY(45deg) translateX(-58%);
    -ms-transform: translate(100%,-100%) skewY(45deg) translateX(-58%);
    -o-transform: translate(100%,-100%) skewY(45deg) translateX(-58%);
    -webkit-transform-origin: 0 center;
    -moz-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    -o-transform-origin: 0 center;
    right: -17px
}

.ribbon-small .banner::after {
    top: 18px;
    right: -12px
}

.ribbon-large .banner::after {
    top: 45px;
    right: -26px
}

.no-css-transforms .ribbon .banner {
    position: static;
    width: 100%;
    float: none;
    font-size: 10px
}

.ribbon .text {
    position: relative;
    z-index: 2;
    padding: 6px 0;
    font-size: 12px;
    font-weight: 700;
    min-height: 18px;
    line-height: 18px;
    text-shadow: 1px 1px 1px rgba(0,0,0,.2);
    white-space: nowrap;
    text-overflow: ellipsis
}

.ribbon-small .text {
    padding: 3px 0;
    font-size: 8px;
    min-height: 14px;
    line-height: 14px
}

.ribbon-large .text {
    padding: 9px 0;
    font-size: 18px;
    min-height: 28px;
    line-height: 28px
}

.ribbon .text::after,.ribbon .text::before {
    content: '';
    display: block;
    height: 30px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

.ribbon.ribbon-small .text::after,.ribbon.ribbon-small .text::before {
    height: 20px
}

.ribbon.ribbon-large .text::after,.ribbon.ribbon-large .text::before {
    height: 46px
}

.ribbon .text::before {
    -webkit-transform: translateX(-15%) skewX(-45deg);
    -moz-transform: translateX(-15%) skewX(-45deg);
    -ms-transform: translateX(-15%) skewX(-45deg);
    -o-transform: translateX(-15%) skewX(-45deg)
}

.ribbon .text::after {
    -webkit-transform: translateX(15%) skewX(45deg);
    -moz-transform: translateX(15%) skewX(45deg);
    -ms-transform: translateX(15%) skewX(45deg);
    -o-transform: translateX(15%) skewX(45deg)
}

.no-css-transforms .ribbon .text {
    height: 25px;
    padding: 3px
}

.ribbon .banner::after,.ribbon .banner::before {
    background-color: #51a351
}

.no-css-transforms .ribbon .text,.ribbon .text::after,.ribbon .text::before {
    background-color: #62c462
}

.ribbon-green .banner::after,.ribbon-green .banner::before {
    background-color: #51a351
}

.no-css-transforms .ribbon-green .text,.ribbon-green .text::after,.ribbon-green .text::before {
    background-color: #62c462
}

.ribbon-blue .banner::after,.ribbon-blue .banner::before {
    background-color: #04c
}

.no-css-transforms .ribbon-blue .text,.ribbon-blue .text::after,.ribbon-blue .text::before {
    background-color: #08c
}

.ribbon-blue-mms .banner::after,.ribbon-blue-mms .banner::before {
    background-color: #2d5b98
}

.no-css-transforms .ribbon-blue-mms .text,.ribbon-blue-mms .text::after,.ribbon-blue-mms .text::before {
    background-color: #367ab3
}

.ribbon-blue-light .banner::after,.ribbon-blue-light .banner::before {
    background-color: #2f96b4
}

.no-css-transforms .ribbon-blue-light .text,.ribbon-blue-light .text::after,.ribbon-blue-light .text::before {
    background-color: #5bc0de
}

.ribbon-yellow .banner::after,.ribbon-yellow .banner::before {
    background-color: #f2ba00
}

.no-css-transforms .ribbon-yellow .text,.ribbon-yellow .text::after,.ribbon-yellow .text::before {
    background-color: #ffd95e
}

.ribbon-orange .banner::after,.ribbon-orange .banner::before {
    background-color: #f89406
}

.no-css-transforms .ribbon-orange .text,.ribbon-orange .text::after,.ribbon-orange .text::before {
    background-color: #fbb450
}

.ribbon-red .banner::after,.ribbon-red .banner::before {
    background-color: #bd362f
}

.no-css-transforms .ribbon-red .text,.ribbon-red .text::after,.ribbon-red .text::before {
    background-color: #ee5f5b
}

.ribbon-purple .banner::after,.ribbon-purple .banner::before {
    background-color: #611bbd
}

.no-css-transforms .ribbon-purple .text,.ribbon-purple .text::after,.ribbon-purple .text::before {
    background-color: #af4ce8
}

.ribbon-pink .banner::after,.ribbon-pink .banner::before {
    background-color: #f000c0
}

.no-css-transforms .ribbon-pink .text,.ribbon-pink .text::after,.ribbon-pink .text::before {
    background-color: #ff5edf
}

.ribbon-black .banner::after,.ribbon-black .banner::before {
    background-color: #222
}

.no-css-transforms .ribbon-black .text,.ribbon-black .text::after,.ribbon-black .text::before {
    background-color: #444
}