/* ribbon style */

.ribbon-wrapper {
  position: absolute;
  left: 0;
  right: 0;
}
.ribbon-front {
  background-color: #7b49a0;
  color: #FFFFFF;
  height: 40px;
  position: absolute;
  left: -20px;
  z-index: 2;
  right: -20px;

  /* Internet Explorer 10 */
  display:-ms-flexbox;
  -ms-flex-pack:center;
  -ms-flex-align:center;

  /* Firefox */
  display:-moz-box;
  -moz-box-pack:center;
  -moz-box-align:center;

  /* Safari, Opera, and Chrome */
  display:-webkit-box;
  -webkit-box-pack:center;
  -webkit-box-align:center;

  /* W3C */
  display:box;
  box-pack:center;
  box-align:center;

}

.ribbon-front,
.ribbon-back-left,
.ribbon-back-right
{
  -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -o-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
}

.ribbon-edge-topleft,
.ribbon-edge-topright,
.ribbon-edge-bottomleft,
.ribbon-edge-bottomright {
  position: absolute;
  z-index: 1;
  border-style:solid;
  height:0px;
  width:0px;
}

.ribbon-edge-topleft,
.ribbon-edge-topright {
}

.ribbon-edge-bottomleft,
.ribbon-edge-bottomright {
  top: 40px;
}

.ribbon-edge-topleft,
.ribbon-edge-bottomleft {
  left: -20px;
  border-color: transparent #21142b transparent transparent;
}

.ribbon-edge-topleft {
  top: -10px;
  border-width: 10px 20px 0 0;
}
.ribbon-edge-bottomleft {
  border-width: 0 20px 0px 0;
}

.ribbon-edge-topright,
.ribbon-edge-bottomright {
  right: -20px;
  border-color: transparent transparent transparent #21142b;
}

.ribbon-edge-topright {
  top: -10px;
  border-width: 10px 0 0 20px;
}
.ribbon-edge-bottomright {
  border-width: 0 0 0px 20px;
}

.ribbon-back-left {
  position: absolute;
  top: -10px;
  left: 0px;
  width: 0px;
  height: 40px;
  z-index: 0;
}

.ribbon-back-right {
  position: absolute;
  top: -10px;
  right: 0px;
  width: 0px;
  height: 40px;
  z-index: 0;
}