/* Ribbon Label */
.ribbon {
   position: absolute;
   right: 10px; 
   top: 5px;
   z-index: 1;
   overflow: hidden;
   width: 95px; 
   height: 95px; 
   text-align: right;
   background:none !important;
}
.ribbon span {
   font-size: 12px;
   color: #fff; 
   text-align: center;
   font-weight: 700; line-height: 22px;
   transform: rotate(45deg);
   -webkit-transform: rotate(-45deg); /* Needed for Safari */
   width: 120px; display: block;
   background: #79A70A;
   background: linear-gradient(#9BC90D 0%, #79A70A 100%);
   box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
   position: absolute;
   top: 24px; right: -24px;
}
.ribbon span::before {
   content: '';
   position: absolute; 
   left: 0px; top: 100%;
   z-index: -1;
   border-left: 3px solid #79A70A;
   border-right: 3px solid transparent;
   border-bottom: 3px solid transparent;
   border-top: 3px solid #79A70A;
}
.ribbon span::after {
   content: '';
   position: absolute; 
   right: 0%; top: 100%;
   z-index: -1;
   border-right: 3px solid #79A70A;
   border-left: 3px solid transparent;
   border-bottom: 3px solid transparent;
   border-top: 3px solid #79A70A;
}
.ribbon.red {background:none !important;}
.ribbon.blue {background:none !important;}
.ribbon.red span {background: linear-gradient(#F70505 0%, #8F0808 100%);}
.ribbon.red span::before {border-left-color: #8F0808; border-top-color: #8F0808;}
.ribbon.red span::after {border-right-color: #8F0808; border-top-color: #8F0808;}
.ribbon.blue span {background: linear-gradient(#2989d8 0%, #1e5799 100%);}
.ribbon.blue span::before {border-left-color: #1e5799; border-top-color: #1e5799;}
.ribbon.blue span::after {border-right-color: #1e5799; border-top-color: #1e5799;}

.ribbon135 {
   position: absolute;
   left: -6px; 
   top: -6px;
   z-index: 1;
   overflow: hidden;
   width: 95px; 
   height: 95px; 
   text-align: right;
}
.ribbon135 span {
   font-size: 10px;
   color: #fff; 
   text-transform: uppercase; 
   text-align: center;
   font-weight: bold; 
   line-height: 20px;
   transform: rotate(-45deg);
   width: 120px; 
   display: block;
   background: #79A70A;
   background: linear-gradient(#9BC90D 0%, #79A70A 100%);
   box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
   position: absolute;
   top: 26px; 
   left: -24px;
}
.ribbon135 span::before {
   content: '';
   position: absolute; 
   left: 0px; top: 100%;
   z-index: -1;
   border-left: 3px solid #79A70A;
   border-right: 3px solid transparent;
   border-bottom: 3px solid transparent;
   border-top: 3px solid #79A70A;
}
.ribbon135 span::after {
   content: '';
   position: absolute; 
   right: 0%; top: 100%;
   z-index: -1;
   border-right: 3px solid #79A70A;
   border-left: 3px solid transparent;
   border-bottom: 3px solid transparent;
   border-top: 3px solid #79A70A;
}
.ribbon135.red {background:none !important;}
.ribbon135.blue {background:none !important;}
.ribbon135.red span {background: linear-gradient(#F70505 0%, #8F0808 100%);}
.ribbon135.red span::before {border-left-color: #8F0808; border-top-color: #8F0808;}
.ribbon135.red span::after {border-right-color: #8F0808; border-top-color: #8F0808;}
.ribbon135.blue span {background: linear-gradient(#2989d8 0%, #1e5799 100%);}
.ribbon135.blue span::before {border-left-color: #1e5799; border-top-color: #1e5799;}
.ribbon135.blue span::after {border-right-color: #1e5799; border-top-color: #1e5799;}
/*-------------------*/
[class^="ribbon-"] {
  position: relative;
  margin-bottom: 15px;
  margin-top: 15px;
  z-index:1001;
}
[class^="ribbon-"] > div {
  text-shadow: 1px 1px #444;
}
[class^="ribbon-"]:before, [class^="ribbon-"]:after {
  content: "";
  position: absolute;
  z-index:1001;
}
.rib1-success {background: #9BC90D;}
.rib1-success:before {border-bottom: 6px solid #79A70A;}
.rib1-success:after {border-left: 30px solid #9BC90D;border-right: 30px solid #9BC90D;}

.rib1-danger {background: #ee583a;}
.rib1-danger:before {border-bottom: 6px solid #ca3011;}
.rib1-danger:after {border-left: 20px solid #ee583a;border-right: 20px solid #ee583a;}

.rib1-info {background: #00abf0;}
.rib1-info:before {border-bottom: 6px solid #176180;}
.rib1-info:after {border-left: 30px solid #00abf0;border-right: 30px solid #00abf0;}

.rib1-warning {background: #ff9f1a;}
.rib1-warning:before {border-bottom: 6px solid #cc8b0a;}
.rib1-warning:after {border-left: 30px solid #ff9f1a;border-right: 30px solid #ff9f1a;}

.rib1-primary {background: #21749a;}
.rib1-primary:before {border-bottom: 6px solid #14455b;}
.rib1-primary:after {border-left: 30px solid #21749a;border-right: 30px solid #21749a;}

.ribbon-1 {
  width: 40px;
  margin-top:0;
  top: -6px;
  left: 25px;
  position: absolute;
}
.ribbon-1:before {
  height: 0;
  width: 0;
  border-right: 6px solid transparent;
  right: -6px;
}
.ribbon-1:after {
  height: 0;
  width: 0;
  border-bottom: 20px solid transparent;
  bottom: -20px;
  left:0;
}
.ribbon-1 > div {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
	display: inline-block;
	overflow: visible;
	font-weight:600;
	color:#fff;
	line-height:40px;
	padding:5px 0 10px 0;
}
/* //////////////// */
.rib2-success {background: #9BC90D;}
.rib2-success:before {border-bottom: 8px solid #79A70A;}
.rib2-success:after {border-left: 15px solid #9BC90D;}

.rib2-danger {background: #ee583a;}
.rib2-danger:before {border-bottom: 8px solid #ca3011;}
.rib2-danger:after {border-left: 15px solid #ee583a;}

.rib2-info {background: #00abf0;}
.rib2-info:before {border-bottom: 8px solid #176180;}
.rib2-info:after {border-left: 15px solid #00abf0;}

.rib2-warning {background: #ff9f1a;}
.rib2-warning:before {border-bottom: 8px solid #cc8b0a;}
.rib2-warning:after {border-left: 15px solid #ff9f1a;}

.rib2-primary {background: #21749a;}
.rib2-primary:before {border-bottom: 8px solid #14455b;}
.rib2-primary:after {border-left: 15px solid #21749a;}
.ribbon-2 {
  width: auto;
  height: 50px;
  line-height: 50px;
  left: -8px;
  position: absolute;
}
.header-ribbon-2 {
	min-height:1px;
}
.ribbon-2 > div {
	font-weight:600;
	color:#fff;
	padding:0 10px;
}
.ribbon-2:before {
  height: 0;
  width: 0;
  border-left: 8px solid transparent;
  top: -8px;
}
.ribbon-2:after {
  height: 0;
  width: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  right: -15px;
  top:0;
}
/* //////////////// */
.rib3-success {background: #9BC90D;}
.rib3-success:before {border-top: 10px solid #79A70A;}
.rib3-success:after {border-top: 10px solid #79A70A;}

.rib3-danger {background: #ee583a;}
.rib3-danger:before {border-top: 10px solid #ca3011;}
.rib3-danger:after {border-top: 10px solid #ca3011;}

.rib3-info {background: #00abf0;}
.rib3-info:before {border-top: 10px solid #176180;}
.rib3-info:after {border-top: 10px solid #176180;}

.rib3-warning {background: #ff9f1a;}
.rib3-warning:before {border-top: 10px solid #cc8b0a;}
.rib3-warning:after {border-top: 10px solid #cc8b0a;}

.rib3-primary {background: #21749a;}
.rib3-primary:before {border-top: 10px solid #14455b;}
.rib3-primary:after {border-top: 10px solid #14455b;}
.ribbon-3, .ribbon-4 {
  height: 50px;
  margin-left: -10px;
  margin-right: -10px;
}
.ribbon-3 > div {
	font-weight:600;
	color:#fff;
	padding-left:10px;
	line-height:50px;
}
.ribbon-3:before, .ribbon-4:before {
  height: 0;
  width: 0;
  border-left: 10px solid transparent;
  bottom: -10px;
}
.ribbon-3:after, .ribbon-4:after {
  height: 0;
  width: 0;
  border-right: 10px solid transparent;
  right: 0;
  bottom: -10px;
}
/* //////////////// */
.rib4-success .ribbon-content {background: #9BC90D;}
.rib4-success:before { border-color: #8FBC07 #8FBC07 #8FBC07 transparent;}
.rib4-success:after {border-color: #8FBC07 transparent #8FBC07 #8FBC07;}
.rib4-success .ribbon-content:before, .rib4-success .ribbon-content:after {border-top: 10px solid #5D8302;}

.rib4-danger .ribbon-content {background: #ee583a;}
.rib4-danger:before { border-color: #e74626 #e74626 #e74626 transparent;}
.rib4-danger:after {border-color: #e74626 transparent #e74626 #e74626;}
.rib4-danger .ribbon-content:before, .rib4-danger .ribbon-content:after {border-top: 10px solid #ca3011;}

.rib4-info .ribbon-content {background: #37b7c7;}
.rib4-info:before { border-color: #16b1c5 #16b1c5 #16b1c5 transparent;}
.rib4-info:after {border-color: #16b1c5 transparent #16b1c5 #16b1c5;}
.rib4-info .ribbon-content:before, .rib4-info .ribbon-content:after {border-top: 10px solid #176180;}

.rib4-warning .ribbon-content {background: #ff9f1a;}
.rib4-warning:before { border-color: #ef9416 #ef9416 #ef9416 transparent;}
.rib4-warning:after {border-color: #ef9416 transparent #ef9416 #ef9416;}
.rib4-warning .ribbon-content:before, .rib4-warning .ribbon-content:after {border-top: 10px solid #cc8b0a;}

.rib4-primary .ribbon-content {background: #21749a;}
.rib4-primary:before { border-color: #0d6b96 #0d6b96 #0d6b96 transparent;}
.rib4-primary:after {border-color: #0d6b96 transparent #0d6b96 #0d6b96;}
.rib4-primary .ribbon-content:before, .rib4-primary .ribbon-content:after {border-top: 10px solid #14455b;}

.ribbon-4:before {
  height: 0;
  width: 0;
  border-width: 20px 20px;
  border-style: solid; 
  top: 20px;
  left: -30px;
}
.ribbon-4:after {
  height: 0;
  width: 0;
  border-width: 20px 20px;
  border-style: solid;  
  top: 20px;
  right: -30px;
}

.ribbon-content {
  height: inherit;
  margin-bottom: 0;
  z-index:1002;
}
.ribbon-4 .ribbon-content > div {
	font-weight:600;
	color:#fff;
	padding-left:10px;
	line-height:50px;
}
.ribbon-content:before {
  height: 0;
  width: 0;
  border-left: 10px solid transparent;
  bottom: -10px;
}
.ribbon-content:after {
  height: 0;
  width: 0;
  border-right: 10px solid transparent;
  right: 0;
  bottom: -10px;
}