.box {
  /*
  width: 200px; height: 300px;
  border: 1px solid #BBB;
  background: #EEE;
  */
  position: relative;
}

.ribbon-left {
  position: absolute;
  left: -10px; top: -3px;
  z-index: 1;
  overflow: hidden;
  width: 95px; height: 95px;
  text-align: right;
}
.ribbon-left span {
  font-size: 18px;
  font-weight: bold;
  color: #FFF;
  /*
  text-transform: uppercase;
  */
  text-align: center;
  line-height: 24px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 120px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#05EFF7 0%, #087F8F 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon-left span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #087F8F;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #087F8F;
}
.ribbon-left span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #087F8F;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #087F8F;
}

.ribbon-right {
  position: absolute;
  right: -9px; top: -2px;
  z-index: 1;
  overflow: hidden;
  width: 95px; height: 95px;
  text-align: left;
}
.ribbon-right span {
  font-size: 17px;
  font-weight: bold;
  color: #000;
  /*
  text-transform: uppercase;
  */
  text-align: center;
  line-height: 22px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 120px;
  display: block;
  background: #75A604;
  background: linear-gradient(#EFFA05 0%, #75A604 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; right: -21px;
}
.ribbon-right span::before {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #8F7F08;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F7F08;
}
.ribbon-right span::after {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #8F7F08;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F7F08;
}




.ribbon-website {
  position: absolute;
  right: -9px; top: -2px;
  z-index: 1;
  overflow: hidden;
  width: 95px; height: 95px;
  text-align: left;
}
.ribbon-website span {
  font-size: 14px;
  font-weight: bold;
  color: #000;
  text-transform: uppercase;
  text-align: center;
  line-height: 24px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 120px;
  display: block;
  background: #D69524;
  background: linear-gradient(#FAEF25 0%, #D69524 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; right: -21px;
}
.ribbon-website span::before {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #8F7F08;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F7F08;
}
.ribbon-website span::after {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #8F7F08;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F7F08;
}





////////////////////////////// Flat Bootstrap 4 styles
.ribbon-flat-info {
  position: absolute;
  right: -9px; top: -2px;
  z-index: 1;
  overflow: hidden;
  width: 95px; height: 95px;
  text-align: left;
}
.ribbon-flat-info span {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: #3b99e0;
  text-align: center;
  line-height: 24px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 120px;
  display: block;
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; right: -21px;
}
.ribbon-flat-info span::before {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #8F7F08;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F7F08;
}
.ribbon-flat-info span::after {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #8F7F08;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F7F08;
}


.ribbon-flat-primary {
  position: absolute;
  right: -9px; top: -2px;
  z-index: 1;
  overflow: hidden;
  width: 95px; height: 95px;
  text-align: left;
}
.ribbon-flat-primary span {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: #007bff;
  text-align: center;
  line-height: 24px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 120px;
  display: block;
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; right: -21px;
}
.ribbon-flat-primary span::before {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #8F7F08;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F7F08;
}
.ribbon-flat-primary span::after {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #8F7F08;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F7F08;
}


.ribbon-flat-secondary {
  position: absolute;
  right: -9px; top: -2px;
  z-index: 1;
  overflow: hidden;
  width: 95px; height: 95px;
  text-align: left;
}
.ribbon-flat-secondary span {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: #6c757d;
  text-align: center;
  line-height: 24px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 120px;
  display: block;
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; right: -21px;
}
.ribbon-flat-secondary span::before {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #8F7F08;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F7F08;
}
.ribbon-flat-secondary span::after {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #8F7F08;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F7F08;
}


.ribbon-flat-dark {
  position: absolute;
  right: -9px; top: -2px;
  z-index: 1;
  overflow: hidden;
  width: 95px; height: 95px;
  text-align: left;
}
.ribbon-flat-dark span {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: #343a40;
  text-align: center;
  line-height: 24px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 120px;
  display: block;
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; right: -21px;
}
.ribbon-flat-dark span::before {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #8F7F08;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F7F08;
}
.ribbon-flat-dark span::after {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #8F7F08;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F7F08;
}


.ribbon-flat-light {
  position: absolute;
  right: -9px; top: -2px;
  z-index: 1;
  overflow: hidden;
  width: 95px; height: 95px;
  text-align: left;
}
.ribbon-flat-light span {
  font-size: 14px;
  font-weight: bold;
  color: #000;
  background: #f8f9fa;
  text-align: center;
  line-height: 24px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 120px;
  display: block;
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; right: -21px;
}
.ribbon-flat-light span::before {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #8F7F08;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F7F08;
}
.ribbon-flat-light span::after {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #8F7F08;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F7F08;
}


.ribbon-flat-success {
  position: absolute;
  right: -9px; top: -2px;
  z-index: 1;
  overflow: hidden;
  width: 95px; height: 95px;
  text-align: left;
}
.ribbon-flat-success span {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: #28a745;
  text-align: center;
  line-height: 24px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 120px;
  display: block;
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; right: -21px;
}
.ribbon-flat-success span::before {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #8F7F08;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F7F08;
}
.ribbon-flat-success span::after {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #8F7F08;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F7F08;
}


.ribbon-flat-warning {
  position: absolute;
  right: -9px; top: -2px;
  z-index: 1;
  overflow: hidden;
  width: 95px; height: 95px;
  text-align: left;
}
.ribbon-flat-warning span {
  font-size: 14px;
  font-weight: bold;
  color: #000;
  background: #ffc107;
  text-align: center;
  line-height: 24px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 120px;
  display: block;
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; right: -21px;
}
.ribbon-flat-warning span::before {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #8F7F08;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F7F08;
}
.ribbon-flat-warning span::after {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #8F7F08;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F7F08;
}


.ribbon-flat-danger {
  position: absolute;
  right: -9px; top: -2px;
  z-index: 1;
  overflow: hidden;
  width: 95px; height: 95px;
  text-align: left;
}
.ribbon-flat-danger span {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: #dc3545;
  text-align: center;
  line-height: 24px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 120px;
  display: block;
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; right: -21px;
}
.ribbon-flat-danger span::before {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #8F7F08;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F7F08;
}
.ribbon-flat-danger span::after {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #8F7F08;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F7F08;
}
////////////////////////////// Flat Bootstrap 4 styles