@font-face { 
	font-family: DinPro-Bold; src: url('../font/DINPro-Bold.otf');
}

@font-face { 
	font-family: DINPro-Black; src: url('../font/DINPro-Black.otf');
}

@font-face { 
	font-family: DINPro-Light; src: url('../font/DINPro-Light.otf');
}

@font-face { 
	font-family: DINPro-Medium; src: url('../font/DINPro-Medium.otf');
}

@font-face { 
	font-family: DINPro-Regular; src: url('../font/DINPro-Regular.otf');
}

.font-regular { font-family: DINPro-Regular; }
.font-medium { font-family: DINPro-Medium; }
.font-bold { font-family: DinPro-Bold; }
.font-light { font-family: DINPro-Light; }
.font-black { font-family: DINPro-Black; }


@font-face { 
	font-family: Montserrat-Regular; src: url('../font/Montserrat/static/Montserrat-Regular.ttf');
	font-family: Montserrat-Thin; src: url('../font/Montserrat/static/Montserrat-Thin.ttf');
	font-family: Montserrat-Light; src: url('../font/Montserrat/static/Montserrat-Light.ttf');
}

.montserrat-regular { font-family: Montserrat-Regular; }
.montserrat-thin { font-family: Montserrat-Thin; }
.montserrat-light { font-family: Montserrat-Light; }


.box {
  width: 200px;
  height: 300px;
  position: relative;
  border: 1px solid #bbb;
  background: #eee;
  float: left;
  margin: 20px;
}
.ribbon {
	  position: absolute;
	  right: -5px;
	  top: -5px;
	  z-index: 1;
	  overflow: hidden;
	  width: 93px;
	  height: 93px;
	  text-align: right;
}
.ribbon span {
  font-size: 0.8rem;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  line-height: 32px;
  transform: rotate(45deg);
  width: 125px;
  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: 17px; // change this, if no border
  right: -29px; // change this, if no border
}

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

.red span {
  background: linear-gradient(#f70505 0%, #8f0808 100%);
}
.red span::before {
  border-left-color: #8f0808;
  border-top-color: #8f0808;
}
.red span::after {
  border-right-color: #8f0808;
  border-top-color: #8f0808;
}

.blue span {
  background: linear-gradient(#2989d8 0%, #1e5799 100%);
}
.blue span::before {
  border-left-color: #1e5799;
  border-top-color: #1e5799;
}
.blue span::after {
  border-right-color: #1e5799;
  border-top-color: #1e5799;
}

.foo {
  clear: both;
}

.bar {
  content: "";
  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;
}

.baz {
  font-size: 1rem;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  line-height: 2em;
  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: 100px;
  left: 1000px;
}