.ribbon {
	position:relative;
	top: 10px;
	display: inline-block;

	width: 100%;
	padding: 11px 32px;
	margin: 0;
	color: #ffffff;
	font-size: 32px;
	line-height: 1.2em;
	text-align: center;
	letter-spacing:0.05em;
	text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
	box-shadow: inset 0px 1px 0px  rgba(255,255,255,.3),
		    inset 0px 0px 20px rgba(0,0,0,0.1),
		          0px 1px 1px  rgba(0,0,0,0.4);
	/*
	background: -webkit-linear-gradient(top,#1eb2df, #17a7d2);
	background: -moz-linear-gradient(top,#1eb2df, #17a7d2);
	*/
	/* pink
	background: -webkit-linear-gradient(top,#f827a0, #ea0b8c);
	background: -moz-linear-gradient(top,#f827a0, #ea0b8c);
	*/

	/* pink #ea0b8c; */
	/* lighter pink #f827a0; */
	/* darker pink #da0a82 */
	/* much darker pink #b9076e */

	/* blue */
	background: -webkit-linear-gradient(top,#2e85cc, #1d75bc);
	background: -moz-linear-gradient(top,#2e85cc, #1d75bc);
	/* blue #1d75bc; */
	/* lighter blue #2e85cc; */
	/* darker blue #1266aa */
	/* much darker blue #075493 */
}
.ribbon:before, .ribbon:after {
	position:absolute;
	bottom: -9px;
	display:block;

	height:0;
	font-size:40px;
	/* color:#0675b3; */
	color: #075493;	/* the shaded part - tiny triangle */
	line-height: 32px; 		/* this moves the triangle up or down */
	/* border: 29px solid #1eb2df; */ 	/* involved in making tail */
	border: 29px solid #1266aa; 	/* involved in making tail */

 	box-shadow:0px 1px 0px rgba(0,0,0,0.4);
	z-index:-2;
}

.ribbon:before {
	/* content:'\25E5'; */
	content:'\25C6';
	border-left-color:transparent; /* takes bite out of tail */

	width: 58px;
	left: -42px;
	text-indent: 10px;

}
.ribbon:after {
	/* content:'\25E4'; */
	content:'\25C6';
	border-left-width:0;
	border-right-color:transparent; /* takes bite out of tail */

	width: 58px; 		/* moves the triangle and left edge of tail - makes tail longer and pulls the triangle with it */
	right: -40px;		/* moves both the triangle and the tail */
	text-indent: -18px;	/* moves the triangle relative to the tail */
}

/* RIBBON FOR HOMEPAGE (COLOR CHANGE) */
.ribbonHome {
	position:relative;
	top: 10px;
	display: inline-block;

	width: 100%;
	padding: 11px 32px;
	margin: 0;
	color: #ffffff;
	font-size: 32px;
	line-height: 1.2em;
	text-align: center;
	letter-spacing:0.05em;
	text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
	box-shadow: inset 0px 1px 0px  rgba(255,255,255,.3),
		    inset 0px 0px 20px rgba(0,0,0,0.1),
		          0px 1px 1px  rgba(0,0,0,0.4);
	background: -webkit-linear-gradient(top,#ec2127, #df1f25);
	background: -moz-linear-gradient(top,#ec2127, #df1f25);
}
.ribbonHome:before, .ribbonHome:after {
	position:absolute;
	bottom: -9px;
	display:block;

	height:0;
	font-size:40px;
	color:#a31a2b;
	line-height: 32px; 		/* this moves the triangle up or down */
	border: 29px solid #ec2127; 	/* involved in making tail */

 	box-shadow:0px 1px 0px rgba(0,0,0,0.4);
	z-index:-2;
}

.ribbonHome:before {
	/* content:'\25E5'; */
	content:'\25C6';
	border-left-color:transparent; /* takes bite out of tail */

	width: 58px;
	left: -42px;
	text-indent: 10px;

}
.ribbonHome:after {
	/* content:'\25E4'; */
	content:'\25C6';
	border-left-width:0;
	border-right-color:transparent; /* takes bite out of tail */

	width: 58px; 		/* moves the triangle and left edge of tail - makes tail longer and pulls the triangle with it */
	right: -40px;		/* moves both the triangle and the tail */
	text-indent: -18px;	/* moves the triangle relative to the tail */
}

h2.card-title.dribbon, h2.blockTitle.dribbon {
	margin-left: -20px;
	position: relative;
	left: 10px;
	margin-top: 10px;
	text-align: center;
	/* text-shadow: 0px -1px 0px rgba(0,0,0,0.3); */
	box-shadow: inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 20px rgba(0,0,0,0.1), 0px 1px 1px rgba(0,0,0,0.4);
}

/* ---------------------- */
.dribbon::before {
	content: ' ';
  	position:absolute;
  	display:block;
	width: 0; 
	height: 0; 

  	bottom: -9px;
	left: 4px;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
  
	/* border-left: 7px solid green; */
	transform: rotate(-45deg);
	filter: brightness(70%);
}
.dribbon::after {
	content: ' ';
  	position:absolute;
  	display:block;
	width: 0; 
	height: 0; 

  	bottom: -9px;
	right: 4px;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
  
	/* border-right: 7px solid green; */
	transform: rotate(45deg);
	filter: brightness(70%);
}
.dribbon.orangeBkg::before	{ border-left: 7px solid  #f79520;}
.dribbon.redBkg::before		{ border-left: 7px solid  #ec2127;}
.dribbon.lght-yellowBkg::before	{ border-left: 7px solid  #fcee21;}
.dribbon.greenBkg::before	{ border-left: 7px solid  #3bb54a;}
.dribbon.cyanBkg::before	{ border-left: 7px solid  #27a9e1;}
.dribbon.purpleBkg::before	{ border-left: 7px solid  #8f489c;}
.dribbon.pinkBkg::before	{ border-left: 7px solid  #ea0b8c;}
.dribbon.lght-greenBkg::before	{ border-left: 7px solid  #8ec640;}
.dribbon.blueBkg::before	{ border-left: 7px solid  #1d75bc;}
.dribbon.yellowBkg::before	{ border-left: 7px solid  #ffcc0b;}
.dribbon.whiteBkg::before	{ border-left: 7px solid  #ffffff;}

.dribbon.orangeBkg::after	{ border-right: 7px solid  #f79520;}
.dribbon.redBkg::after		{ border-right: 7px solid  #ec2127;}
.dribbon.lght-yellowBkg::after	{ border-right: 7px solid  #fcee21;}
.dribbon.greenBkg::after	{ border-right: 7px solid  #3bb54a;}
.dribbon.cyanBkg::after		{ border-right: 7px solid  #27a9e1;}
.dribbon.purpleBkg::after	{ border-right: 7px solid  #8f489c;}
.dribbon.pinkBkg::after		{ border-right: 7px solid  #ea0b8c;}
.dribbon.lght-greenBkg::after	{ border-right: 7px solid  #8ec640;}
.dribbon.blueBkg::after		{ border-right: 7px solid  #1d75bc;}
.dribbon.yellowBkg::after	{ border-right: 7px solid  #ffcc0b;}
.dribbon.whiteBkg::after	{ border-right: 7px solid  #ffffff;}

@media(max-width: 1023px) {
        .ribbon:before, .ribbon:after {
                display: none;
        }
}