@import url(https://fonts.googleapis.com/css?family=Merriweather);

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.hexagon {
  position: relative;
  display: inline-block;
  /* left/right margin approx. 25% of .hexagon width + spacing */
  margin: 1px 16px;
  background-color:  hsla(220, 89%, 54%, 0.782);
  /* hsla(220, 89%, 54%, 0.782) */
  text-align: center;
  width:500px;
  margin-left: 40px;
}

.hexagon, .hexagon::before, .hexagon::after {
  /* easy way: height is width * 1.732
  actual formula is 2*(width/(2*Math.tan(Math.PI/6)))
  remove border-radius for sharp corners on hexagons */
  width: 100px;
  height: 149px;
  border-radius: 25%/10%;
}
.hexagon::before {
  background-color: inherit;
  content: "";
  position: absolute;
  left: 0;
  transform: rotate(-60deg);
}
.hexagon::after {
  background-color: inherit;
  content: "";
  position: absolute;
  left: 0;
  transform: rotate(60deg);
}
.hexagon:nth-child(even) {
  /* top approx. 50% of .hexagon height + spacing */
  top: 80px;
}
.hexagon:hover {
  background-color: #121b80;
  cursor: pointer;
  z-index: 105;
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2);
  
}
.hexagon:active {
  background-color: rgb(23, 137, 165);
  z-index: 110;
}
.hexanone {
  position: relative;
  display: inline-block;
  width: 00px;
  height: 116px;
  margin: 10px 18px;
}
.hexanone:nth-child(even) {
  top: 59px;
}
.hexagontent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: fit-content;
  font-size: 20px;
  font-weight: bold;
  color: white;
  line-height: 1.2;
  z-index: 100;
}
.ibws-fix {
  /* inline-block whitespace fix */
  font-size: 0;
  /* height: 50px; */
}
.honeycomb {
  margin: 0 auto;
  text-align: center;
}