.ribbon-flag {
  margin-right: 10px;
  float: left;
}
/* End demo css */

.ribbon-flag span {
  background: linear-gradient(transparent 0%, transparent 100%) !important;
}

.ribbon-flag {
  display: block;
  left: 10px;
  width: 50px;
  position: absolute;
  color: #fff;
  padding: 20px 0 10px;
  text-align: center;
  z-index: 1;
  font-family: arial, sans-serif;
  font-weight: bold;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
}

.ribbon-flag:before {
  display: block;
  width: 50px;
  height: 0;
  position: absolute;
  top: 4px;
  content: "";
  z-index: 1;
  border-top: 1px dotted rgba(0, 0, 0, 0.2);
  border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
}

.ribbon-flag:after {
  display: block;
  width: 50px;
  height: 0;
  content: "";
  position: relative;
  bottom: -25px;
  z-index: 1;
  border-width: 0 15px 15px 15px;
  border-style: solid;
}

/* 
    ribbon-flag colors 
*/
.ribbon-flag.red {
  background-color: #cb0000;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#fe0000), to(#cb0000));
  background-image: -moz-linear-gradient(top, #fe0000, #cb0000);
  background-image: -ms-linear-gradient(top, #fe0000, #cb0000);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fe0000), color-stop(100%, #cb0000));
  background-image: -webkit-linear-gradient(top, #fe0000, #cb0000);
  background-image: -o-linear-gradient(top, #fe0000, #cb0000);
  background-image: linear-gradient(top, #fe0000, #cb0000);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe0000', endColorstr='#cb0000', GradientType=0);
}
.ribbon-flag.red:after {
  border-color: #cb0000 #cb0000 transparent #cb0000;
}
.ribbon-flag.orange {
  background-color: #e44200;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#ff5b18), to(#e44200));
  background-image: -moz-linear-gradient(top, #ff5b18, #e44200);
  background-image: -ms-linear-gradient(top, #ff5b18, #e44200);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff5b18), color-stop(100%, #e44200));
  background-image: -webkit-linear-gradient(top, #ff5b18, #e44200);
  background-image: -o-linear-gradient(top, #ff5b18, #e44200);
  background-image: linear-gradient(top, #ff5b18, #e44200);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5b18', endColorstr='#e44200', GradientType=0);
}
.ribbon-flag.orange:after {
  border-color: #e44200 #e44200 transparent #e44200;
}
.ribbon-flag.yellow {
  background-color: #cc9b00;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#ffc200), to(#cc9b00));
  background-image: -moz-linear-gradient(top, #ffc200, #cc9b00);
  background-image: -ms-linear-gradient(top, #ffc200, #cc9b00);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffc200), color-stop(100%, #cc9b00));
  background-image: -webkit-linear-gradient(top, #ffc200, #cc9b00);
  background-image: -o-linear-gradient(top, #ffc200, #cc9b00);
  background-image: linear-gradient(top, #ffc200, #cc9b00);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc200', endColorstr='#cc9b00', GradientType=0);
}
.ribbon-flag.yellow:after {
  border-color: #cc9b00 #cc9b00 transparent #cc9b00;
}
.ribbon-flag.green {
  background-color: #6b8d13;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#8dba19), to(#6b8d13));
  background-image: -moz-linear-gradient(top, #8dba19, #6b8d13);
  background-image: -ms-linear-gradient(top, #8dba19, #6b8d13);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8dba19), color-stop(100%, #6b8d13));
  background-image: -webkit-linear-gradient(top, #8dba19, #6b8d13);
  background-image: -o-linear-gradient(top, #8dba19, #6b8d13);
  background-image: linear-gradient(top, #8dba19, #6b8d13);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8dba19', endColorstr='#6b8d13', GradientType=0);
}
.ribbon-flag.green:after {
  border-color: #6b8d13 #6b8d13 transparent #6b8d13;
}
.ribbon-flag.blue {
  background-color: #2989d8;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#1e5799), to(#2989d8));
  background-image: -moz-linear-gradient(top, #1e5799, #2989d8);
  background-image: -ms-linear-gradient(top, #1e5799, #2989d8);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e5799), color-stop(100%, #2989d8));
  background-image: -webkit-linear-gradient(top, #1e5799, #2989d8);
  background-image: -o-linear-gradient(top, #1e5799, #2989d8);
  background-image: linear-gradient(top, #1e5799, #2989d8);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#2989d8', GradientType=0);
}
.ribbon-flag.blue:after {
  border-color: #2989d8 #2989d8 transparent #2989d8;
}

.ribbon-flag.purple {
  background-color: #611b85;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#8024af), to(#611b85));
  background-image: -moz-linear-gradient(top, #8024af, #611b85);
  background-image: -ms-linear-gradient(top, #8024af, #611b85);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8024af), color-stop(100%, #611b85));
  background-image: -webkit-linear-gradient(top, #8024af, #611b85);
  background-image: -o-linear-gradient(top, #8024af, #611b85);
  background-image: linear-gradient(top, #8024af, #611b85);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8024af', endColorstr='#611b85', GradientType=0);
}
.ribbon-flag.purple:after {
  border-color: #611b85 #611b85 transparent #611b85;
}
.ribbon-flag.black {
  background-color: #323232;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#4b4b4b), to(#323232));
  background-image: -moz-linear-gradient(top, #4b4b4b, #323232);
  background-image: -ms-linear-gradient(top, #4b4b4b, #323232);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4b4b4b), color-stop(100%, #323232));
  background-image: -webkit-linear-gradient(top, #4b4b4b, #323232);
  background-image: -o-linear-gradient(top, #4b4b4b, #323232);
  background-image: linear-gradient(top, #4b4b4b, #323232);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4b4b4b', endColorstr='#323232', GradientType=0);
}
.ribbon-flag.black:after {
  border-color: #323232 #323232 transparent #323232;
}

.ribbon-flag.turquoise {
  background-color: #48D1CC;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#00CED1), to(#48D1CC));
  background-image: -moz-linear-gradient(top, #00CED1, #48D1CC);
  background-image: -ms-linear-gradient(top, #00CED1, #48D1CC);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00CED1), color-stop(100%, #48D1CC));
  background-image: -webkit-linear-gradient(top, #00CED1, #48D1CC);
  background-image: -o-linear-gradient(top, #00CED1, #48D1CC);
  background-image: linear-gradient(top, #00CED1, #48D1CC);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CED1', endColorstr='#48D1CC', GradientType=0);
}
.ribbon-flag.turquoise:after {
  border-color: #48D1CC #48D1CC transparent #48D1CC;
}

.ribbon-flag.grey {
  background-color: #ABA7A7;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#696969), to(#ABA7A7));
  background-image: -moz-linear-gradient(top, #696969, #ABA7A7);
  background-image: -ms-linear-gradient(top, #696969, #ABA7A7);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #696969), color-stop(100%, #ABA7A7));
  background-image: -webkit-linear-gradient(top, #696969, #ABA7A7);
  background-image: -o-linear-gradient(top, #696969, #ABA7A7);
  background-image: linear-gradient(top, #696969, #ABA7A7);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#696969', endColorstr='#ABA7A7', GradientType=0);
}
.ribbon-flag.grey:after {
  border-color: #ABA7A7 #ABA7A7 transparent #ABA7A7;
}

.ribbon-flag.white {
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#F4F4F4), to(#FFFFFF));
  background-image: -moz-linear-gradient(top, #F4F4F4, #FFFFFF);
  background-image: -ms-linear-gradient(top, #F4F4F4, #FFFFFF);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F4F4F4), color-stop(100%, #FFFFFF));
  background-image: -webkit-linear-gradient(top, #F4F4F4, #FFFFFF);
  background-image: -o-linear-gradient(top, #F4F4F4, #FFFFFF);
  background-image: linear-gradient(top, #F4F4F4, #FFFFFF);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F4F4F4', endColorstr='#FFFFFF', GradientType=0);
}
.ribbon-flag.white:after {
  border-color: #FFFFFF #FFFFFF transparent #FFFFFF;
}
/*========================================================*/

.ribbon-bar span {
	position: absolute;
	width: 102%;
	height:40px;
	font-size: 1.5em;
	font-weight: bold;
	padding: 6px 20px 6px 70px;
	margin: 10px 0px 0px -20px;
    color: #fff; 
	text-shadow: 0px 1px 2px #bbb;
	-webkit-box-shadow: 0px 2px 4px #888;
	-moz-box-shadow: 0px 2px 4px #888;
	box-shadow: 0px 2px 4px #888;
}

.ribbon-bar span:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	right: -2px;
	top: 0px;
	border-color: transparent #fff transparent transparent;
}
.ribbon-bar span:after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 0px;
	top: 100%;
	border-width: 5px 10px;
	border-style: solid;
	border-color: #666 #666 transparent transparent;
}

/*========================================================*/
.ribbon-bar2 span {
	position: relative;
	font-size: 1.5em;
	font-weight: bold;
	padding: 6px 20px 6px 70px;
	 color: #fff; 
	top:10px;
	left:-20px;
	width: 104%;
	height:40px;
	background-color: #999;
	float: left;
	-webkit-box-shadow: 0px 0px 2px #000;
	-moz-box-shadow: 0px 0px 2px #000;
	box-shadow: 0px 0px 2px #000;
	border-bottom: 1px solid #000;
	}

.ribbon-bar2 span:before {
	z-index: -1;
	position: absolute;
	top:10px;
	left:0;
	width: 20px;
	height: 41px;
	content: '';
	background-color: #444;
	-webkit-transform: skewY(45deg);
	-moz-transform: skewY(45deg);
	-o-transform: skewY(45deg);
	transform: skewY(45deg);
	-webkit-box-shadow: inset 1px -1px 3px #000, 1px 1px 3px #000;
	-moz-box-shadow: inset 1px -1px 3px #000, 1px 1px 3px #000;
	box-shadow: inset 1px -1px 3px #000, 1px 1px 3px #000;
	}
	
.ribbon-bar2 span:after {
	z-index: -2;
	position: absolute;
	top:10px;
	right:0;
	width: 20px;
	height: 41px;
	content: '';
	background-color: #444;
	-webkit-transform: skewY(-45deg);
	-moz-transform: skewY(-45deg);
	-o-transform: skewY(-45deg);
	transform: skewY(-45deg);
	-webkit-box-shadow: inset 1px -1px 3px #000, 1px 1px 3px #000;
	-moz-box-shadow: inset 1px -1px 3px #000, 1px 1px 3px #000;
	box-shadow: inset 1px -1px 3px #000, 1px 1px 3px #000;
	}
	
/*========================================================*/
.ribbon-dcorner {
   position: absolute;
   right: -5px; top: -5px;
   z-index: 1;
   overflow: hidden;
   width: 75px; height: 75px; 
   text-align: right;
}
.ribbon-dcorner span {
   font-size: 10px;
   color: #fff; 
   text-transform: uppercase; 
   text-align: center;
   font-weight: bold; line-height: 20px;
   transform: rotate(45deg);
   width: 100px; 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: 19px; right: -21px;
}
.ribbon-dcorner 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-dcorner 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.white span {color: #525252 !important;background: linear-gradient(#FFFFFF 0%, #BEBEBE 100%);}
.ribbon.white span::before {border-left-color: #BEBEBE; border-top-color: #BEBEBE;}
.ribbon.white span::after {border-right-color: #BEBEBE; border-top-color: #BEBEBE;}

.ribbon.black span {background: linear-gradient(#000000 0%, #696969 100%);}
.ribbon.black span::before {border-left-color: #696969; border-top-color: #696969;}
.ribbon.black span::after {border-right-color: #696969; border-top-color: #696969;}

.ribbon.grey span {background: linear-gradient(#ABA7A7 0%, #696969 100%);}
.ribbon.grey span::before {border-left-color: #696969; border-top-color: #696969;}
.ribbon.grey span::after {border-right-color: #696969; border-top-color: #696969;}

.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;}

.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.orange span {background: linear-gradient(#F79B11 0%, #C97F10 100%);}
.ribbon.orange span::before {border-left-color: #C97F10; border-top-color: #C97F10;}
.ribbon.orange span::after {border-right-color: #C97F10; border-top-color: #C97F10;}

.ribbon.yellow span {background: linear-gradient(#EECC00 0%, #B59B00 100%);}
.ribbon.yellow span::before {border-left-color: #B59B00; border-top-color: #B59B00;}
.ribbon.yellow span::after {border-right-color: #B59B00; border-top-color: #B59B00;}

.ribbon.purple span {background: linear-gradient(#611B85 0%, #8826BA 100%);}
.ribbon.purple span::before {border-left-color: #8826BA; border-top-color: #8826BA;}
.ribbon.purple span::after {border-right-color: #8826BA; border-top-color: #8826BA;}

.ribbon.turquoise span {background: linear-gradient(#48D1CC 0%, #00CED1 100%);}
.ribbon.turquoise span::before {border-left-color: #00CED1; border-top-color: #00CED1;}
.ribbon.turquoise span::after {border-right-color: #00CED1; border-top-color: #00CED1;}
}