.hexagon {
    position: relative;
    width: 39.8900px;
    height: 23.095px;
    margin: 23.095px 0;
    margin: 12.095px 0;
    background-image: url("../../imgs/k.png");
    background-size: auto 46.188px;
    background-position: center;
  }

  .hexTop,
  .hexBottom {
    position: absolute;
    z-index: 1;
    width: 28.285px;
    height: 28.285px;
    overflow: hidden;
    -webkit-transform: scaleY(0.5774) rotate(-45deg);
    -ms-transform: scaleY(0.5774) rotate(-45deg);
    transform: scaleY(0.5774) rotate(-45deg);
    background: inherit;
    left: 5.86px;
  }

  /*counter transform the bg image on the caps*/
  .hexTop:after,
  .hexBottom:after {
    content: "";
    position: absolute;
    width: 39.8900px;
    height: 23.188021535170066px;
    -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-11.504522px);
    -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-11.504522px);
    transform:          rotate(45deg) scaleY(1.7321) translateY(-11.504522px);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    background: inherit;
  }

  .hexTop {
    top: -14.1422px;
  }

  .hexTop:after {
    background-position: center top;
    left:0px;
  }

  .hexBottom {
    bottom: -14.1422px;
  }

  .hexBottom:after {
    background-position: center bottom;
    left:0px;
  }

  .hexagon:after {
    content: "";
    position: absolute;
    top: 0.0000px;
    left: 0;
    width: 39.8900px;
    height: 23.0940px;
    z-index: 2;
    background: inherit;
  }