/***************************************************/
/* 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; }

/*************  Blue bBackground  *************/
.ribbon.bg-blue .base { background-color: #13a4f9; }
.ribbon.bg-blue:before, .ribbon.bg-blue:after { border-top-color: #13a4f9; }
.ribbon.bg-blue .base:before { border-color: #53aff9; }
.ribbon.bg-blue .base:after { border-color: #2380b7; }

/************* Dark Background  ***********/
.ribbon.bg-dark .base { background-color: #000; }
.ribbon.bg-dark:before, .ribbon.bg-dark:after { border-top-color: #000; }
.ribbon.bg-dark .base:before { border-color: #000; }
.ribbon.bg-dark .base:after { border-color: #4f5050; }

/************* Purple Background  ***********/
.ribbon.bg-purple .base { background-color: #9A12B3; }
.ribbon.bg-purple:before, .ribbon.bg-purple:after { border-top-color: #9A12B3; }
.ribbon.bg-purple .base:before { border-color: #d300f9; }
.ribbon.bg-purple .base:after { border-color: #570567; }

/************* Yellow Background  ***********/
.ribbon.bg-yellow .base { background-color: #f39c11; }
.ribbon.bg-yellow:before, .ribbon.bg-yellow:after { border-top-color: #f39c11; }
.ribbon.bg-yellow .base:before { border-color: #f9c46e; }
.ribbon.bg-yellow .base:after { border-color: #885402; }
.ribbon.bg-yellow .fa-star { color: #fff; }


/*****************************************/
/****** 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;
}

/*************  Blue bBackground  *************/
.ribbon-left.bg-blue span, .ribbon-right.bg-blue span { background-color: #13a4f9; }
.ribbon-left.bg-blue span::before, .ribbon-right.bg-blue span::before { border-top-color: #327ba7; border-left-color: #327ba7; }
.ribbon-left.bg-blue span::after, .ribbon-right.bg-blue span::after { border-top-color: #327ba7; border-right-color: #327ba7; }

/************* Dark Background  ***********/
.ribbon-left.bg-dark span, .ribbon-right.bg-dark span { background-color: #000; }
.ribbon-left.bg-dark span::before, .ribbon-right.bg-dark span::before { border-top-color: #000; border-left-color: #000; }
.ribbon-left.bg-dark span::after, .ribbon-right.bg-dark span::after { border-top-color: #000; border-right-color: #000; }

/************* Purple Background  ***********/
.ribbon-left.bg-purple span, .ribbon-right.bg-purple span { background-color: #9A12B3; }
.ribbon-left.bg-purple span::before, .ribbon-right.bg-purple span::before { border-top-color: #691977; border-left-color: #691977; }
.ribbon-left.bg-purple span::after, .ribbon-right.bg-purple span::after { border-top-color: #691977; border-right-color: #691977; }
/************* Yellow Background  ***********/
.ribbon-left.bg-yellow span, .ribbon-right.bg-yellow span { background-color: #f39c11; }
.ribbon-left.bg-yellow span::before, .ribbon-right.bg-yellow span::before { border-top-color: #c5861f; border-left-color: #c5861f; }
.ribbon-left.bg-yellow span::after, .ribbon-right.bg-yellow span::after { border-top-color: #c5861f; border-right-color: #c5861f; }


/***************************************/
/******** 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);
 }
/*************  Blue bBackground  *************/
.ribbon-triangle-left .topleft.bg-blue, .ribbon-triangle-right .topright.bg-blue { border-top-color: #13a4f9; }

/************* Dark Background  ***********/
.ribbon-triangle-left .topleft.bg-dark, .ribbon-triangle-right .topright.bg-dark { border-top-color: #000; }

/************* Purple Background  ***********/
.ribbon-triangle-left .topleft.bg-purple, .ribbon-triangle-right .topright.bg-purple { border-top-color: #9A12B3; }

/************* Yellow Background  ***********/
.ribbon-triangle-left .topleft.bg-yellow, .ribbon-triangle-right .topright.bg-yellow { border-top-color: #f39c11; }