/***************************************************/
/* FlatPrice - Responsive Bootstrap Pricing Tables
/* Designed by : Aqsathemes
/***************************************************/

/*************  RIBBON STYLING *************/
/*******************************************/

/****** 1 - Flag ribbon ******/
.ribbon {
  width: 40px;
  top: 0;
  margin-left: 6px;
  position: absolute;
}
.ribbon:before {
  content: "";
  position: absolute;
  bottom: -34px;
  left: 0;
  width: 0;
  height: 0;
  border-top: 35px solid #b92322;
  border-right: 35px solid transparent;
}
.ribbon:after {
  content: "";
  position: absolute;
  bottom: -34px;
  right: 0;
  width: 0;
  height: 0;
  border-top: 35px solid #b92322;
  border-left: 35px solid transparent;
}
.ribbon .base {
  width: 40px;
  padding-top: 10px;
  background: #b92322;
  position: relative;
}
.ribbon .base:before {
  content: '';
  position: absolute;
  top: 10px;
  width: 31px;
  left: 5px;
  height: 100%;
  border-left: 1px dashed #da5050;
  border-right: 1px dashed #da5050;
  z-index: 2;
}
.ribbon .base:after {
  content: '';
  position: absolute;
  top: 10px;
  width: 31px;
  left: 4px;
  height: 100%;
  border-left: 1px dashed #631a15;
  border-right: 1px dashed #631a15;
  z-index: 2;
}
.ribbon.top-right { right: 10px; }
.ribbon .base span { display: block; padding: 3px 0; font-size: 15px; color: #ffc73f;}

.ribbon.rotate-left-top, .ribbon.rotate-left-bottom { transform: rotate(270deg); -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); left: 10px; }
.ribbon.rotate-left-top .fa-star, .ribbon.rotate-left-bottom .fa-star { transform: rotate(18deg); -webkit-transform: rotate(18deg); -moz-transform: rotate(18deg);}
.ribbon.rotate-left-bottom { top: 70%; }

.ribbon.rotate-right-top, .ribbon.rotate-right-bottom { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); right: 17px; }

.ribbon.rotate-left-top.stars-1 { left: -11px; top: 20px;}
.ribbon.rotate-left-top.stars-2 { left: 0px; top: 10px;}
.ribbon.rotate-left-top.stars-4 { left: 21px; top: -15px;}
.ribbon.rotate-left-top.stars-5 { left: 31px; top: -25px;}
.ribbon.rotate-right-top.stars-1 { right: -5px; top: 20px;}
.ribbon.rotate-right-top.stars-2 { right: 6px; top: 10px;}
.ribbon.rotate-right-top.stars-4 { right: 26px; top: -10px;}
.ribbon.rotate-right-top.stars-5 { right: 36px; top: -20px;}
.ribbon.rotate-left-bottom.stars-1 { left: -11px; top: 78%;}
.ribbon.rotate-left-bottom.stars-2 { left: 0px; top: 75%;}
.ribbon.rotate-left-bottom.stars-4 { left: 21px; top: 65%;}
.ribbon.rotate-left-bottom.stars-5 { left: 31px; top: 60%;}

/*****************************************/
/****** 2- Ribbon left / Right *********/

.ribbon-left, .ribbon-right {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 95px; height: 95px;
  text-align: right;
}
.ribbon-right { right: -5px; left: auto; }
.ribbon-left span, .ribbon-right span {
  font-size: 15px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 30px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 120px;
  display: block;
  background: #b92322;
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -27px;
}
.ribbon-right span {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  right: -28px;
  left: auto;
}
.ribbon-left span::before, .ribbon-right span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #881918;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #881918;
}
.ribbon-left span::after, .ribbon-right span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #881918;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #881918;
}



/***************************************/
/******** 3 - Ribbon-Triangle  *******/
.ribbon-triangle-left .topleft {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-top: 100px solid #b92322;
  border-right: 100px solid transparent;
}
.ribbon-triangle-left .ribbon-text { 
  position: absolute;
  top: 12px;
  left: -6px;
  width: 75px;
  font-size: 17px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
 }

.ribbon-triangle-right .topright {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 100px solid #DB0A5B;
  border-left: 100px solid transparent;
}
.ribbon-triangle-right .ribbon-text { 
  position: absolute;
  top: 12px;
  right: -6px;
  width: 75px;
  font-size: 17px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
 }