@font-face{
	font-family: 'sansextrabold';
	src:url('sans-extrabold.ttf');
}
@font-face{
  font-family: 'sanslight';
  src:url('sans-italic.ttf');
}

*{ 
	font-family: 'sanslight',sans-serif;
	font-size: 1.04rem !important;
}
h1,h2,h3,h4,h5,h6{
  font-family: 'sansextrabold',sans-serif !important;
}
.uk-h4{
  font-family: 'sanslight',sans-serif !important;
}
.numberCircle {
  border-radius: 50%;
  /* remove if you don't care about IE8 */
  width: 36px;
  height: 36px;
  padding: 4px 8px 8px 8px;
  background: #fff;
  border: 2px solid #666;
  color: #666;
  text-align: center;
}

.diagonal img{
  width: 70%;
}

.diagonal div{
  text-align: center;
}

.diagonal p{
  color:white;
}

@media screen and (min-width: 900px) {
    .diagonal{
  padding-left: 35px;
}
  .div1, .div2, .div-middle {
      min-height: 300px;
      background: #4fb04f;
      position: relative;
      width: calc(100% - 30px);
      padding: 10px;
      text-align: center;
  }
  .div1 {
      
  }
  .div1:after, .div2:before, .div2:after, .div-middle:after, .div-middle:before {
      content:'';
      position: absolute;
      top: 0;
      width: 0;
      height: 0;
  }
  .div1:after, .div-middle:after {
      left: 100%;
      border-top: 300px solid #4fb04f;
      border-right: 50px solid transparent;
  }
  .div2:before, .div-middle:before {
      right: 100%;
      border-bottom: 300px solid #4fb04f;
      border-left: 50px solid transparent;
  }

  .diagonal img{
    max-height: 220px;
  }
}



/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 900px) {
  .div1, .div2, .div-middle {
    min-height: 200px;
    background: #4fb04f;
    padding:  10px 50px;
  }
}