/* Adapted from https://codepen.io/eode9/pen/twkKm */

.corner-ribbon-box {
overflow: hidden;
top: 0;
right: 0;
position: absolute;
width: 300px;
height: 300px;
pointer-events: none;
}

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

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

/* Different positions */
@media (min-width: 768px) {
  #corner-ribbon-mobile{
    font-size: 200%;
    top: 50px;
    right: -100px;
    line-height: 50px;
    width: 400px;
  }
}

.corner-ribbon{
pointer-events: auto;
z-index: 1;
top: 35px;

position: absolute;
text-align: center;
line-height: 25px;
letter-spacing: 1px;

width: 250px;
font-size: 100%;
color: white;
right: -75px;

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: #e43;}
.corner-ribbon.orange{background: #e82;}
.corner-ribbon.yellow{background: #ec0;}