/* The ribbons */

.corner-ribbon {
	width: 300px;
	/* background: #e43; */
	position: absolute;
	top: 35px;
	left: -70px;
	text-align: center;
	line-height: 35px;
	letter-spacing: 1px;
	padding-bottom: 4px;
	color: white;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	/* font-family: "Open Sans"; */
	font-family: "Amatic SC";
	font-size: 1.6rem;
	font-weight: bold;
	z-index: 5;
}

/* Custom styles */

.corner-ribbon.sticky {
	position: fixed;
}

.corner-ribbon.shadow {
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

/* Different positions */

.corner-ribbon.top-left {
	top: 25px;
	left: -50px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.corner-ribbon.top-right {
	top: 25px;
	right: -50px;
	left: auto;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

.corner-ribbon.bottom-left {
	top: auto;
	bottom: 35px;
	left: -70px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

.corner-ribbon.bottom-right {
	top: auto;
	right: -70px;
	bottom: 35px;
	left: auto;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

/* Colors */

.corner-ribbon.white {
	background: #f0f0f0;
	color: #555;
}
.corner-ribbon.black {
	background: #333;
}
.corner-ribbon.grey {
	background: #999;
}
.corner-ribbon.blue {
	background: #39d;
}
.corner-ribbon.green {
	background: #2c7;
}
.corner-ribbon.turquoise {
	background: #1b9;
}
.corner-ribbon.purple {
	background: #95b;
}
.corner-ribbon.red {
	/* background: linear-gradient(#d93131 0%, #ac2727 100%); */
	background: linear-gradient(0deg, #b82b2b 0%, #d93131 30%, #d93131 70%, #b82b2b 100%);
}
.corner-ribbon.orange {
	background: #e82;
}
.corner-ribbon.yellow {
	background: #ec0;
}

.corner-ribbon.gold {
	background: linear-gradient(0deg, #be903a 0%, #e0ab48 30%, #e0aa46 70%, #bb8f3d 100%);
}

@media screen and (max-width: 767px) {
	.corner-ribbon {
		display: none;
	}
}