.container2 {
  position: relative;
  width: 60vh;
  height: 60vh;
  max-width: 90vw;
  max-height: 90vw;
  margin: 0 auto;
  }

.hex {
  display: inline-block;
/*  filter: url('#goo');*/
/*  opacity: 50%;*/
 color: #e8e9eb;
  width: 40%;
  position: absolute;
  filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.5));
}

.hex::before {
  content: "";
  display: block;
/*  background: #e8e9eb;*/
  padding-top: 86.6%;
  /* 100%*cos(30) */
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.5));
/*  clip-path: circle(25% at 25% 25%);*/
}
 
.hexCenter {
  display: inline-block;
/*  filter: url('#goo');*/
/*  opacity: 50%;*/
 color: #e8e9eb;
  width: 40%;
  position: absolute;
/*  filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.5));*/
}

.hexCenter::before {

  background-position: center;
  background-repeat: no-repeat;
  background-size: 60% 70%;
  content: "";
  display: block;
/*  background: #e8e9eb;*/
padding-top: 86.6%;
/* 100%*cos(30) */
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.5));
/*  clip-path: circle(25% at 25% 25%);*/
}
.hexinner {
  display: inline-block;
  width: 35%;
  text-align: center;
  position: absolute;
  filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.5));
}

.hexinner::before {
  content: "";
  display: block;
  padding-top: 86.6%;
  /* 100%*cos(30) */
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.5));

}
.hexinner-red::before {background:red}
.hexinner-orange::before {background:orange}
.hexinner-green::before {background:#00c951}

.pos0 {
  top: -0.55%;
  left: 30%;
}

.pos1 {
  top: 16.5%;
  left: 0.15%;
}

.pos2 {
  top: 16.5%;
  left: 59.8%;
}

.pos3 {
  top: 34%;
  left: 30%;
}

.pos4 {
  top: 51%;
  left: 0%;
}

.pos5 {
  top: 68%;
  left: 30%;
}

.pos6 {
  top: 51%;
  left: 60%;
}

.pos10 {
  top: 1%;
  left: 32.5%;
}

.pos11 {
  top: 18.5%;
  left: 2.8%;
}

.pos12 {
  top: 18%;
  left: 62.5%;
}

.pos13 {
  top: 35%;
  left: 32.5%;
}

.pos14 {
  top: 53%;
  left: 3%;
}

.pos15 {
  top: 69%;
  left: 32.5%;
}

.pos16 {
  top: 52%;
  left: 62.5%;
}

.posC0 {
  top: -6%;
  left: 37%;
}

.posC1 {
  top: 7.8%;
  left: -0.3%;
}

.posC2 {
  top: 19.5%;
  left: 67.5%;
}

.posC3 {
  top: 35%;
  left: 32.5%;
}

.posC4 {
  top: 47.2%;
  left: -7.0%;
}

.posC5 {
  top: 71.65%;
  left: 23%;
}

.posC6 {
  top: 58%;
  left: 60.9%;
}
.circle {
  display: inline-block;
/*  filter: url('#goo');*/
/*  opacity: 50%;*/
/*  color: white;*/
  text-align: center;
  width: 40%;
  position: absolute;
  filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.5));

}

.circle::before {
  content: "";
  display: block;
  padding-top: 86.6%;
  clip-path: ellipse(25% 20% at 0.55% 30%);
  filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.5));

}

.circle-p0::before { transform: rotate(270deg); }
.circle-p1::before { transform: rotate(210deg); }
.circle-p2::before  { transform: rotate(330deg); }
.circle-p4::before  { transform: rotate(150deg); }
.circle-p5::before  { transform: rotate(90deg); }
.circle-p6::before { transform: rotate(30deg); }
.circle-180::before { transform: rotate(180deg); }
.circle-225::before { transform: rotate(225deg); }


/* === COLOR UTILITIES === */
.circle-white::before  { background: white; }
.circle-red::before  { background: red; }