/* demo stuff */
.box-ribbon {
  background: black;
  color: #888;
  border: 1px solid black;
  padding: 40px;
  margin: 25px;
  position: relative;
  float: left;
  width: 80px;
}
.pad-0{
  padding: 0;
}
/*** ribbons */
.ribbon {
  z-index: 10;
  position: absolute;
  top: 10px;
  left: -22px;
  border-radius: 2px;
  color: #000;
  background: #8ec320;
}
.ribbon:after {
  content: " ";
  position: absolute;
  left: 1px;
  top: 100%;
  z-index: 9;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 8px 0;
  border-color: transparent #526d1b transparent transparent;
}
.ribbon span {
  display: block;
  padding: 0px 40px;
  color: #ffffff;
  font-size: 24px;
}
.ribbon-type2 {
  border-radius: 2px 0 0 2px;
}
.ribbon-type2 span {
  position: relative;
  overflow: hidden;
  margin-right: -60px;
  padding-right: 70px;
}
.ribbon-type2 span:before,
.ribbon-type2 span:after {
  content: " ";
  position: absolute;
  margin-left: -60px;
  left: 100%;
  width: 0px;
  height: 0px;
  border-style: solid;
  z-index: -1;
}
.ribbon-type2 span:before {
  bottom: 50%;
  border-width: 200px 90px 0 0;
  border-color: #ffeea3 transparent transparent transparent;
}
.ribbon-type2 span:after {
  top: 50%;
  border-width: 200px 0 0 90px;
  border-color: transparent transparent transparent #ffeea3;
}
.ribbon-right {
  left: auto;
  right: -22px;
}
.ribbon-right:after {
  left: auto;
  right: 1px;
  border-width: 8px 20px 0 0;
  border-color: #e0bb4c transparent transparent transparent;
}
.ribbon-right.ribbon-type2 {
  border-radius: 0 2px 2px 0;
}
.ribbon-right.ribbon-type2 span {
  margin-right: 0;
  padding-right: 10px;
  margin-left: -60px;
  padding-left: 70px;
}
.ribbon-right.ribbon-type2 span:before,
.ribbon-right.ribbon-type2 span:after {
  margin-left: auto;
  left: auto;
  margin-right: -60px;
  right: 100%;
}
.ribbon-right.ribbon-type2 span:before {
  border-width: 0 90px 200px 0;
  border-color: transparent #ffeea3 transparent transparent;
}
.ribbon-right.ribbon-type2 span:after {
  border-width: 0 0 200px 90px;
  border-color: transparent transparent #ffeea3 transparent;
}
.ribbon-promoted {
  color: #fff;
  background: #77a76f;
}
.ribbon-promoted:after {
  border-color: transparent #4c7647 transparent transparent;
}
.ribbon-promoted span:before {
  border-color: #77a76f transparent transparent transparent;
}
.ribbon-promoted span:after {
  border-color: transparent transparent transparent #77a76f;
}
.ribbon-promoted.ribbon-right:after {
  border-color: #4c7647 transparent transparent transparent;
}
.ribbon-promoted.ribbon-right span:before {
  border-color: transparent #77a76f transparent transparent;
}
.ribbon-promoted.ribbon-right span:after {
  border-color: transparent transparent #77a76f transparent;
}
.ribbon-victory {
  color: #fff;
  background: #ed2d23;
}
.ribbon-victory:after {
  border-color: transparent #b1312a transparent transparent;
}
.ribbon-victory span:before {
  border-color: #ed2d23 transparent transparent transparent;
}
.ribbon-victory span:after {
  border-color: transparent transparent transparent #ed2d23;
}
.ribbon-victory.ribbon-right:after {
  border-color: #b1312a transparent transparent transparent;
}
.ribbon-victory.ribbon-right span:before {
  border-color: transparent #ed2d23 transparent transparent;
}
.ribbon-victory.ribbon-right span:after {
  border-color: transparent transparent #ed2d23 transparent;
}