:root {
  --blauw: #007bc7;
  --groen: #82c8b4;
  --rood: #ff0000;
  --geel: #ffe600;
  --wit: #ffffff;
  --licht-blauw: #80e6f2;
  --oranje: #f07800;
  --roze: #ffb9d7;
  --1trans: #505050;
  --hexagon-size: 150px;
  --arrow-bg: rgba(255, 255, 255, 0.3);
  --arrow-icon: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg);
  --option-bg: white;
  --select-bg: rgba(255, 255, 255, 0.2);
  --bg: rgb(5, 0, 20);
  --font-raleway: "Raleway", sans-serif;
}

body {
      margin: 0;
      font-family: 'Raleway', sans-serif;
      background-color: #050014;
    }

    .home-btn-ctr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 32px;
      height: 80px;
      /* background-color: #080024; */
      position: relative;
    }

    .filter-ctr,
    .contact-ctr {
      flex-shrink: 0;
    }

    .header-title {
      flex-grow: 1;
      text-align: center;
    }

    .header-title h1 {
      margin: 0;
      font-size: 3rem;
      color: white;
      white-space: nowrap;
	  font-weight: bold;
    }

    .filter-btn,
    #contact-overlay {
      background-color: white;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.75);
      display: flex;
      justify-content: center;
      align-items: center;
    }

	.filter-btn:active {
	  scale: 95%;
	}

    .filter-btn img,
    #contact-overlay img {
      height: 30px;
    }


	.filter-ctr-ctr {
	  position: absolute;
  /* transform: translateY(25%); */
	  z-index: 19;
	  background-color: rgb(8, 0, 36);
	  border-radius: 20px;
	  border: 1px solid white;
	  padding: 15px;
	  width: 300px;
	  top: 70px;
	}

	.hide {
	  display: none;
	}

    .switches {
      color: white;
      /* display: flex; */
      flex-direction: column;
	  margin-bottom: 10px 0px;
    }

    .toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 5px 0;
      cursor: pointer;
    }

    .toggle-switch {
      background: #888;
      border-radius: 16px;
      width: 58px;
      height: 32px;
      position: relative;
	  vertical-align: middle;
	  transition: background 0.25s;
    }

    .toggle-switch:before {
      content: "";
      background: white;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      position: absolute;
      top: 4px;
      left: 4px;
      transition: left 0.25s;
    }

    .toggle-checkbox:checked + .toggle-switch {
      background: rgb(102, 82, 173);
    }

    .toggle-checkbox:checked + .toggle-switch:before {
      left: 30px;
    }

    .toggle-checkbox {
      position: absolute;
      visibility: hidden;
    }

    .toggle-label {
      font-size: 1.1em;
    }

    .switch-bal {
      width: 20px;
      height: 20px;
      margin-right: 10px;
      border-radius: 50%;
    }

    #roze-bal { background-color: #ffb9d7; }
    #groen-bal { background-color: #82c8b4; }
    #geel-bal { background-color: #ffe600; }
    #blauw-bal { background-color: #007bc7; }
    #wit-bal { background-color: #ffffff; }

	.bal-ctr {
	  display: flex;
	}

    .selects select {
      width: 100%;
      padding: 5px;
      background-color: #504d5b;
      color: white;
      border: none;
      border-radius: 5px;
    }

    .clear-filter {
      margin-top: 10px;
      text-align: center;
      cursor: pointer;
      color: #0078d4;
    }

	.clear-filter span:hover {
	  cursor: pointer;
	  text-decoration: underline;
	}

	.clear {
	  clear: both;
	}

    @media (max-width: 600px) {
      .home-btn-ctr {
        flex-direction: column;
        align-items: center;
        height: auto;
        padding: 10px;
        gap: 10px;
      }

      .header-title {
        order: -1;
        width: 100%;
        text-align: center;
      }

      .header-title h1 {
        font-size: 2rem;
        white-space: normal;
      }

      .home-btn-ctr {
        gap: 10px;
      }

      .mobile-button-row {
        display: flex;
        justify-content: center;
        gap: 20px;
        width: 100%;
      }

      .filter-ctr,
      .contact-ctr {
        flex: 0 0 auto;
      }

      .filter-ctr-ctr {
        position: static;
        width: 100%;
        max-width: 300px;
        margin-top: 10px;
      }
    }
	
	.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

/* content */
.hexagon {
  cursor: pointer;
  position: relative;
  transition: transform 200ms;
  display: flex;
}

.emptyHex {
  height: 162px;
  width: 180px;
}

.hexagon:hover {
  transform: scale(110%);
  z-index: 10;
}

.hexagon:active {
  transform: scale(100%);
  transition: all 0s;
}

.center {
  height: 100%;
  margin: 10px auto 0px auto;
  padding-bottom: 160px;
  display: flex;
  width: 100%;
  max-width: 1350px;
  min-width: 500px;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  justify-content: flex-start;
  box-sizing: unset;
}

.overlay {
  top: 0;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: #0000006c;
  z-index: 20;
  display: none;
}

.overlay-content {
  background: white;
  width: 80vw;
  max-width: 1000px;
  max-height: 80vh;
  margin: auto;
  transform: scale(0);
  transition: 500ms cubic-bezier(1, -0.51, 0.25, 0.48);
  border-radius: 25px;
  overflow-y: hidden;
}

.hexagon span {
  font-weight: bold;
  color: black;
  display: block;
  font-size: 15px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* max-width: 80%; */
  /* max-height: 70%; */
  text-align: center;
  overflow: hidden;
  word-break: break-word;
  padding: 0px 5px 0px 5px;
  opacity: 0;
}

.hexTextCtr .subHeaderSpan {
  font-weight: 400;
}
.hexCtr img {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  opacity: 100;
}

.hexCtr:hover img {
  opacity: 0;
}

.hexCtr:hover span {
  opacity: 100;
}

.center::-webkit-scrollbar {
  display: none;
}

.hexagon img {
  display: block;
}

.twoHex {
  margin-right: -40px;
  margin-bottom: -80px;
  min-height: 324px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.btnCtr {
  width: 100%;
  height: 100px;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-evenly;
}

.btnCtr div {
  background: white;
  color: black;
  font-size: 50px;
  font-weight: 900;
  border-radius: 20px;
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}

.btnCtr div:hover {
  cursor: pointer;
}
.btnCtr div:active {
  margin-top: 5px;
}

.enlarge {
  transform: scale(1);
  transition: 500ms cubic-bezier(0.2, 0.96, 0.14, 1.51);
}

.closeBtn {
  font-size: 100px;
  user-select: none;
  cursor: pointer;
  position: fixed;
  right: 10px;
  top: 10px;
  display: block;
  margin-right: 20px;
}

.closeBtn:active {
  scale: 90%;
}

.showOverlay {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hexIcon {
  overflow: hidden;
  max-width: 100px;
  max-height: 100px;
}

.hexCtr {
  height: 162px;
  width: 180px;
  position: absolute;
  display: flex;
  z-index: 1;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  padding: 10px;
}

/* POP UP */
strong {
  font-weight: bold;
}
.strong {
  font-weight: bold;
}

.textCtr p {
  font-size: 1.25em;
  margin-bottom: 25px;
}

#header-ctr h1 {
  color: white;
  font-family: "Raleway", sans-serif;
  font-weight: 900;
  font-size: 50px;
  text-align: center;
  letter-spacing: 5px;
}

.textCtr h1 {
  font-weight: bold;
  font-size: 2em;
}

.textCtr h3 {
  margin-bottom: 15px;
  font-size: 1.25em;
}

.textCtr h2 {
  font-weight: bold;
  font-size: 20px;
}

.textCtr a {
  color: var(--rood);
  text-decoration: underline;
  cursor: pointer;
}

.textCtr {
  padding: 50px;
  overflow-y: auto;
  max-height: 80vh;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.3;
  text-align: justify;
  width: 100%;
}

.textCtr::-webkit-scrollbar {
  width: 10px;
}

.textCtr::-webkit-scrollbar-thumb:hover {
  background: #000000bb;
}
.textCtr::-webkit-scrollbar-thumb {
  background: #0000008f;
  border-radius: 10px;
}

#compCtr {
  width: 100%;
}
#compCtr h2 {
  margin-bottom: 25px;
}

#imgCtr {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
  max-height: 300px;
  max-width: 100%;
}

#imgCtr img {
  display: block;
  width: 48%;
  object-fit: contain;
  background-color: #00000071;
}
#imgCtr iframe {
  width: 48%;
  display: block;
  height: auto;
}

#compCtr .center {
  width: 100%;
  margin: 5px;
  padding-bottom: 0;
}

#textDesc ol {
  list-style: decimal;
  margin-left: 75px;
  margin-right: 10px;
  margin-bottom: 25px;
  font-size: 20px;
}

#textDesc ol li {
  display: list-item;
}
#textDesc ul li {
  display: list-item;
}

#textDesc ul {
  list-style: disc;
  margin-left: 75px;
  margin-right: 10px;
  margin-bottom: 25px;
  font-size: 20px;
}

#textDesc ol ul {
  margin-left: 20px;
  margin-bottom: 0px;
}


footer{
  position: fixed;
  background: black;
  color: #e81a32;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 15px;
  font-weight: bold;
  padding: 20px;
  text-align: center;
  font-family: var(--font-raleway);
  z-index: 19;
}


@media screen and (min-width: 2000px) {
  .center {
    max-width: 2920px; 
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
	min-width: 0px;
  }
}

@media screen and (max-width: 1280px) {
  .center {
    max-width: 1000px; 
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: center; */
    gap: 0;
	min-width: 0px;
  }
}

@media screen and (max-width: 1024px) {
  .center {
    max-width: 720px; 
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: center; */
    gap: 0;
	min-width: 0px;
  }
}

@media (max-width: 600px) {
  .center {
    max-width: 320px; /* Exact voor 3 hexen van 100px breed + marge */
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
	min-width: 0px;
  }

  .twoHex {
    display: flex;
    flex-direction: row;
    width: 320px;
    min-height: 94px; /* 1 hex hoog */
    margin-bottom: -49px; /* zodat rijen iets overlappen */
    position: relative;
  }

  .hexagon img {
    width: 100px;
    height: auto;
  }

  .hexagon {
    width: 150px;
    height: auto;
    position: relative;
  }

  .emptyHex {
    width: 50px;
    height: 94px;
  }

  .hexCtr {
    width: 100px;
    height: 94px;
    padding: 5px;
  }

  .hexIcon {
    max-width: 50px;
    max-height: 50px;
  }

  .hexTextCtr span {
    font-size: 11px;
  }

  .subHeaderSpan {
    font-size: 9px;
  }
}