:root {
  --hexagon-width: 25%;
  --hexagon-height: 31%;
  --hexagon-stoke-width: 2px;
}

body {
  /*min-height: 100%;*/
  margin: 0;
  /*background: linear-gradient(90deg,#011423,#053e67 50%,#011423 100%);*/
}

.hexagon-menu-c {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1470/900;
  margin: 0 auto;
  background: url(../../assets/img/hex-menu-bg.webp?h=ae811dbb8c11d24d90c340ad02416cbe) left top/contain no-repeat border-box;
}

.hex-base-c {
  box-sizing: border-box;
  width: 18%;
  aspect-ratio: 1/1;
  position: absolute;
  border-radius: 50%;
  top: 9%;
  left: 42%;
}

.hex-wrapper.right {
  position: absolute;
  display: block;
  width: 196%;
  height: 182%;
  top: 14%;
  left: 127%;
}

.hex-wrapper.left {
  position: absolute;
  display: block;
  width: 196%;
  height: 182%;
  top: 14%;
  left: -230%;
}

.hexagon {
  display: inline-block;
  position: absolute;
  width: var(--hexagon-width);
  height: var(--hexagon-height);
  background-color: transparent;
  box-sizing: border-box;
  z-index: 10;
}

.hexagon .hex-name {
  position: absolute;
  width: 70%;
  max-height: 0;
  top: 67%;
  left: 15%;
  text-align: center;
  text-transform: uppercase;
  font-family: asap,sans-serif;
  font-size: .75vw;
  line-height: 1vw;
  color: #1d2466;
  z-index: 10;
  opacity: 0.5;
  transition: opacity .3s ease-in-out;
}

.hexagon.active .hex-name {
  max-height: none;
  opacity: 1;
}

.hexagon a:link {
  display: block;
  position: absolute;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  color: transparent;
  pointer-events: none;
}

.hexagon.active a {
  pointer-events: all;
}

.hexagon a:active, .hexagon a:hover, .hexagon a:visited {
  color: transparent;
  text-decoration: none;
}

.hexagon-connection-path {
  position: absolute;
  top: 0;
  left: 0;
}

.hexagon[data-item="1"] {
  top: 0;
  left: calc(50% - var(--hexagon-width)/ 2 - 2* var(--hexagon-stoke-width));
  z-index: 4;
}

.hexagon[data-item="2"] {
  top: 22.5%;
  left: calc(50% - 3* var(--hexagon-stoke-width));
  z-index: 3;
}

.hexagon[data-item="3"] {
  top: 22.5%;
  left: calc(75% - 5* var(--hexagon-stoke-width));
  z-index: 3;
}

.hexagon[data-item="4"] {
  top: 44.8%;
  left: calc(50% - var(--hexagon-width)/ 2 - 2* var(--hexagon-stoke-width));
  z-index: 2;
}

.hexagon[data-item="5"] {
  top: 44.8%;
  left: calc(75% - var(--hexagon-width)/ 2 - 4 * var(--hexagon-stoke-width));
  z-index: 2;
}

.hexagon[data-item="6"] {
  top: 67.3%;
  left: 0;
  z-index: 1;
}

.hexagon[data-item="7"] {
  top: 67.3%;
  left: calc(50% - 3 * var(--hexagon-stoke-width));
  z-index: 1;
}

.hexagon[data-item="8"] {
  top: 67.3%;
  left: calc(75% - 5 * var(--hexagon-stoke-width));
  z-index: 1;
}

.hexagon[data-item="11"] {
  top: 0;
  left: calc(50% - var(--hexagon-width)/ 2 - 3* var(--hexagon-stoke-width));
  z-index: 4;
}

.hexagon[data-item="12"] {
  top: 0;
  left: calc(75% - var(--hexagon-width)/ 2 - 5* var(--hexagon-stoke-width));
  z-index: 4;
}

.hexagon[data-item="13"] {
  top: 22.5%;
  left: calc(25% - 2* var(--hexagon-stoke-width));
  z-index: 3;
}

.hexagon[data-item="14"] {
  top: 44.8%;
  left: calc(25% - var(--hexagon-width)/ 2 - 1* var(--hexagon-stoke-width));
  z-index: 2;
}

.hexagon[data-item="15"] {
  top: 44.8%;
  left: calc(50% - var(--hexagon-width)/ 2 - 3* var(--hexagon-stoke-width));
  z-index: 2;
}

.hexagon[data-item="16"] {
  top: 44.8%;
  left: calc(75% - var(--hexagon-width)/ 2 - 5* var(--hexagon-stoke-width));
  z-index: 2;
}

.hexagon[data-item="17"] {
  top: 67.3%;
  left: 0;
  z-index: 1;
}

.hexagon[data-item="18"] {
  top: 67.3%;
  left: calc(25% - 2* var(--hexagon-stoke-width));
  z-index: 1;
}

.hexagon[data-item="19"] {
  top: 67.3%;
  left: calc(50% - 4* var(--hexagon-stoke-width));
  z-index: 1;
}

.hexagon[data-item="20"] {
  top: 67.3%;
  left: calc(75% - 6* var(--hexagon-stoke-width));
  z-index: 1;
}

.hexagon::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: center 0/calc(100% - 2 * var(--hexagon-stoke-width)) no-repeat padding-box;
  opacity: 0;
  transition: opacity .3s ease-in-out;
}

.hexagon.active {
  background: center 0/calc(100% - 2 * var(--hexagon-stoke-width)) no-repeat padding-box;
  cursor: pointer;
}

.hexagon[data-item].active::before {
  opacity: 1;
}

.hexagon[data-item="1"].active, .hexagon[data-item="1"].active::before {
  background-image: url(../../assets/img/hexagon-icons/1.xf-spin.svg?h=beb13c5ca79e62f708bc03018daf3f46);
}

.hexagon[data-item="2"].active {
  background-image: url(../../assets/img/hexagon-icons/2.consumables.svg?h=c061d27b11fb28c4e97a7fda27dcf569);
}

.hexagon[data-item="3"]::before {
  background-image: url(../../assets/img/hexagon-icons/2a.reaction-vessels.svg?h=fdf451ce7f9a0df342d04d716648f343);
}

.hexagon[data-item="4"].active {
  background-image: url(../../assets/img/hexagon-icons/3.accessories.svg?h=359c4ac320c2e168b4a90b000f1c9519);
}

.hexagon[data-item="5"]::before {
  background-image: url(../../assets/img/hexagon-icons/3b.pipettes.svg?h=3785bffc1dfecfc8eecfd91490c00dca);
}

.hexagon[data-item="6"].active {
  background-image: url(../../assets/img/hexagon-icons/4.IRIDES-software.svg?h=9fe563bde1a79a89b8d418b4bd32c312);
}

.hexagon[data-item="7"]::before {
  background-image: url(../../assets/img/hexagon-icons/3a.barcode-scanners.svg?h=7b0e5df6304ece834d6768b447c1905e);
}

.hexagon[data-item="8"]::before {
  background-image: url(../../assets/img/hexagon-icons/3c.reaction-vessel-racks.svg?h=3e35d2712b59e7c0dd21695108bd298d);
}

.hexagon[data-item="11"]::before {
  background-image: url(../../assets/img/hexagon-icons/5a.QuRapID-XF1.svg?h=fcb93decbd2f3e3c9bad6e534514a30b);
}

.hexagon[data-item="12"].active {
  background-image: url(../../assets/img/hexagon-icons/5.QuRapID-XF-system.svg?h=12fec13e52197ef8d2c405e4014e199b);
}

.hexagon[data-item="13"]::before {
  background-image: url(../../assets/img/hexagon-icons/6aiii.yellow-fever.svg?h=e3cbe8e7d9cdd6db858e2f98e0abbc81);
}

.hexagon[data-item="14"]::before {
  background-image: url(../../assets/img/hexagon-icons/6a.human-applications.svg?h=3d5f9be1ed223269191e7833d14ef759);
}

.hexagon[data-item="15"]::before {
  background-image: url(../../assets/img/hexagon-icons/6b.veterinary-applications.svg?h=53969dd86627a5e1def53e4cf2495b06);
}

.hexagon[data-item="16"].active {
  background-image: url(../../assets/img/hexagon-icons/6.XF-reagent-system.svg?h=4c27f92d6f88b4aa5fb6a604ddf2e97c);
}

.hexagon[data-item="17"]::before {
  background-image: url(../../assets/img/hexagon-icons/6ai.ebola.svg?h=05fc26da96ac21222a0b0d14627b6e4a);
}

.hexagon[data-item="18"]::before {
  background-image: url(../../assets/img/hexagon-icons/6aii.COVID-19.svg?h=e3cbe8e7d9cdd6db858e2f98e0abbc81);
}

.hexagon[data-item="19"]::before {
  background-image: url(../../assets/img/hexagon-icons/6bi.PPRV.svg?h=580bbdd8941493a305e7a5e7fbba3980);
}

.hexagon[data-item="20"]::before {
  background-image: url(../../assets/img/hexagon-icons/6bii.FMDV.svg?h=5528593d0d600f3ca360d9d8f529562c);
}

.hex-name.short-name {
  top: 70%!important;
}

.hexagon::before {
  opacity: 0.1;
}