.hexagon_elie {
    background-image: url("../images/committee/elie_bursztein.jpeg");
}

.hexagon_niels {
    background-image: url("../images/committee/niels_provos.jpg");
}

.hexagon_alex {
    background-image: url("../images/committee/alex_stamos.jpg");
}

.hexagon_bob {
    background-image: url("../images/committee/bob_lord.jpg");
}


.hexagon {
  position: relative;
  width: 180px;
  height: 103.92px;
  margin: 51.96px 0;
  background-size: auto 203.2273px;
  background-position: center;
  border-left: solid 2px #333333;
  border-right: solid 2px #333333;
}

.hexagon:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

.hexTop,
.hexBottom {
  position: absolute;
  z-index: 1;
  width: 127.28px;
  height: 127.28px;
  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: 24.36px;
}

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

.hexTop {
  top: -63.6396px;
  border-top: solid 2.8284px #333333;
  border-right: solid 2.8284px #333333;
}

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

.hexBottom {
  bottom: -63.6396px;
  border-bottom: solid 2.8284px #333333;
  border-left: solid 2.8284px #333333;
}

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

.hexagon:after {
  content: "";
  position: absolute;
  top: 1.1547px;
  left: 0;
  width: 176.0000px;
  height: 101.6136px;
  z-index: 2;
  background: inherit;
}