/* Fonts */
/* Roboto */
@font-face {
  font-family: "Roboto";
  font-weight: 100;
  font-style: normal;
  src: url("https://closecontact.eu/KVK/Fonts/Roboto-Thin.ttf")
    format("truetype");
  font-variant-ligatures: none;
}
@font-face {
  font-family: "Roboto";
  font-weight: 300;
  font-style: normal;
  src: url("https://closecontact.eu/KVK/Fonts/Roboto-Light.ttf")
    format("truetype");
  font-variant-ligatures: none;
}
@font-face {
  font-family: "Roboto";
  font-weight: 300;
  font-style: italic;
  src: url("https://closecontact.eu/KVK/Fonts/Roboto-LightItalic.ttf")
    format("truetype");
  font-variant-ligatures: none;
}
@font-face {
  font-family: "Roboto";
  font-weight: 400;
  font-style: normal;
  src: url("https://closecontact.eu/KVK/Fonts/Roboto-Regular.ttf")
    format("truetype");
  font-variant-ligatures: none;
}
@font-face {
  font-family: "Roboto";
  font-weight: 400;
  font-style: italic;
  src: url("https://closecontact.eu/KVK/Fonts/Roboto-Italic.ttf")
    format("truetype");
  font-variant-ligatures: none;
}
@font-face {
  font-family: "Roboto";
  font-weight: 500;
  font-style: normal;
  src: url("https://closecontact.eu/KVK/Fonts/Roboto-Medium.ttf")
    format("truetype");
  font-variant-ligatures: none;
}
@font-face {
  font-family: "Roboto";
  font-weight: 500;
  font-style: italic;
  src: url("https://closecontact.eu/KVK/Fonts/Roboto-MediumItalic.ttf")
    format("truetype");
  font-variant-ligatures: none;
}
@font-face {
  font-family: "Roboto";
  font-weight: 700;
  font-style: normal;
  src: url("https://closecontact.eu/KVK/Fonts/Roboto-Bold.ttf")
    format("truetype");
  font-variant-ligatures: none;
}
@font-face {
  font-family: "Roboto";
  font-weight: 700;
  font-style: italic;
  src: url("https://closecontact.eu/KVK/Fonts/Roboto-BoldItalic.ttf")
    format("truetype");
  font-variant-ligatures: none;
}
/* Ciutadella Rounded */
@font-face {
  font-family: "Ciutadella Rounded";
  font-weight: 300;
  font-style: normal;
  src: url("https://closecontact.eu/KVK/Fonts/Ciutadella Rounded Light Regular.otf")
    format("opentype");
  font-variant-ligatures: none;
}
@font-face {
  font-family: "Ciutadella Rounded";
  src: url("https://closecontact.eu/KVK/Fonts/Ciutadella Rounded Medium Regular.otf")
    format("opentype");
  font-weight: 500;
  font-style: normal;
  font-variant-ligatures: none;
}
@font-face {
  font-family: "Ciutadella Rounded";
  src: url("https://closecontact.eu/KVK/Fonts/Ciutadella Rounded SemiBold Regular.otf")
    format("opentype");
  font-weight: 600;
  font-style: normal;
  font-variant-ligatures: none;
}
/* Helvetica Neue */
@font-face {
  font-family: "Helvetica Neue";
  src: url("https://closecontact.eu/KVK/Fonts/HelveticaNeueLight.ttf")
    format("truetype");
  font-weight: 300;
  font-style: normal;
  font-variant-ligatures: none;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("https://closecontact.eu/KVK/Fonts/HelveticaNeueMedium.ttf")
    format("truetype");
  font-weight: 500;
  font-style: normal;
  font-variant-ligatures: none;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("https://closecontact.eu/KVK/Fonts/HelveticaNeueBold.ttf")
    format("truetype");
  font-weight: 700;
  font-style: normal;
  font-variant-ligatures: none;
}

.App {
  max-width: 1440px;
  /* center the container horizontally */
  margin: 0 auto;
  width: 100vw;
  overflow: hidden;
}
/* Buttons */
.button-primary {
  font-size: 16px;
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.0004em;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  display: inline-block;
  background-color: #aa418c;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;

  cursor: pointer;
}

.button-extra-margin {
  margin: 24px 0 0 0;
}

.button-primary a {
  display: block;
  color: #ffffff;
  text-decoration: none;
  padding: 12px 24px;
  font-size: 16px;
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 24px;
  height: 100%;
}

.button-primary [type="submit"] {
  display: block;
  color: #ffffff;
  text-decoration: none;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 24px;
  height: 100%;
  background-color: #aa418c;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border: 0px;
  text-align: center;
}

.button-primary [type="submit"]:focus {
  outline-offset: 2px;
  outline: 1px solid #0057cc;
  border-radius: 4px;
}
.button-primary [type="submit"]:hover {
  background: #883370;
}

.button-primary input:active {
  background: #6f2a5b;
  box-shadow: none;
}
.button-primary input:disabled {
  background: #efefef;
  box-shadow: 0px 4px 6px 0px #bebebe54;
  color: #757575;
}

.button-primary a:focus {
  outline-offset: 2px;
  outline: 1px solid #0057cc;
  border-radius: 4px;
}
.button-primary:active {
  background: #6f2a5b;
  box-shadow: none;
}
.button-primary:hover {
  background: #883370;
}
.button-primary input:hover {
  box-shadow: 0px 3px 6px 0px #bebebe54;
  box-shadow: 0px 7px 14px 0px #bebebe40;
}

.button-primary:disabled {
  background: #efefef;
  box-shadow: 0px 4px 6px 0px #bebebe54;
  cursor: not-allowed;
  color: #757575;
}
.button-primary input:disabled {
  box-shadow: 0px 4px 6px 0px #bebebe54;
}
.button-primary:disabled:hover {
  color: #757575;
  background: #efefef;
}

.button-primary input:disabled:hover {
  color: #757575;
  background: #efefef;
  box-shadow: 0px 4px 6px 0px #bebebe54;
}
.button-medium {
  font-weight: 500;
}
.button-regular {
  font-weight: 500;
}
.button-light {
  font-weight: 300;
}
.underlined {
  text-decoration: underline !important;
}
.button-secondary {
  font-size: 16px;
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 24px;
  letter-spacing: 0.0004em;
  text-align: center;
  color: #aa418c;
  display: inline-block;
  box-shadow: rgba(190, 190, 190, 0.33) 0px 4px 6px 0px;
  background-color: #aa418c;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background: #ffffff;
  border: 1px solid #aa418c;
  box-shadow: 0px 4px 6px rgba(190, 190, 190, 0.33),
    0px 1px 3px rgba(190, 190, 190, 0.33);
  margin: 20px 0;
  cursor: pointer;
}
.button-secondary a {
  display: block;
  color: #aa418c;
  text-decoration: none;
  padding: 12px 24px;
}
.button-secondary:hover {
  border: 1px solid #883370;
  box-shadow: 0px 7px 14px rgba(0, 0, 0, 0.25), 0px 3px 6px rgba(0, 0, 0, 0.33);
}
.button-secondery a:hover {
  color: #883370;
}
.button-secondary:active {
  /* background: #ffffff; */
  box-shadow: none;
  outline: none;
  background-color: #6f2a5b;
  border: 1px solid #6f2a5b;
}
.button-secondary a:active {
  color: #ffffff;
}
.button-secondary:disabled {
  background: #efefef;
  box-shadow: 0px 4px 6px 0px #bebebe54;
  cursor: not-allowed;
}
.button-secondary a:focus {
  outline-offset: 2px;
  outline: 1px solid #0057cc;
  border-radius: 3px;
}
.button-secondary:disabled {
  color: #343434;
  background: #efefef;
  box-shadow: 0px 4px 6px rgba(190, 190, 190, 0.33),
    0px 1px 3px rgba(190, 190, 190, 0.33);
  border-radius: 4px;
}
/* Social Buttons */
.button-social {
  display: flex;
  justify-content: space-between;
  margin: 0 4px 0 4px;
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #aa418c;
}
.button-social a {
  height: 100%;
  width: 100%;
}
.button-social a:hover {
  background-color: #883370;
  border-radius: 50%;
}
.button-social a:focus {
  outline-offset: 2px solid #fff;
  outline: 1px solid #0057cc;
  border-radius: 50%;
  box-sizing: border-box;
  background-color: #883370;
}
.button-social a:active {
  background-color: #6f2a5b;
  outline: none;
}
.button-social-facebook {
}
.button-social-facebook a {
  display: inline-block;
}
.button-social-facebook a svg {
  padding: 7.4px 8px;
}
.button-social-twitter {
}
.button-social-twitter a {
  display: inline-block;
  width: 100%;
}
.button-social-twitter a svg {
  width: 100%;
  /* padding: 8px 0 8px 0px; */
}
.button-social-linkedin {
}
.button-social-linkedin a {
  display: inline-block;
}
.button-social-linkedin a svg {
  padding: 8px;
}
.button-social-youtube {
}
.button-social-youtube a {
  display: inline-block;
}
.button-social-youtube a svg {
  padding: 8px 5px;
}
.button-social-whatsapp {
}
.button-social-whatsapp a {
  display: inline-block;
}
.button-social-whatsapp a svg {
  padding: 10px;
}
.button-social-mail {
}
.button-social-mail a {
  display: inline-block;
}
.button-social-mail a svg {
  display: block;
  padding: 12px 10px;
}
.button-social-instagram {
}
.button-social-instagram a {
  display: inline-block;
  width: 100%;
}
.button-social-instagram a svg {
  padding: 7px;
}
/* Text Links */
.link-icon-chevron {
  padding: 0px 12px 0 6px;
  color: inherit;
  margin: 0 0 -2px 0;
}
.link-icon {
}
.link,
.link-primary {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: 0.0004em;
  text-align: left;
  text-decoration: none;
  color: #0070b9;
  padding: 3px 0;
}
.link a,
.link-primary a {
  color: #0070b9;
}
.link.underlined {
  text-decoration: underline;
}
.dark-link {
  color: #343434;
}
.link:hover,
.link-primary:hover {
  text-decoration: underline;
  color: #00579c;
}
.link-phone {
  color: #343434;
  text-decoration: none;
}
/* Form Field */
.form-field-container {
  display: block;
  margin: 0 112px 42px 112px;
  width: calc(100vw-32px);
}
.form-field-email-only-container {
  margin: 0 112px 42px 112px;
}
.form-field {
  display: flex;
  flex-direction: column;
  width: 489px;
  margin: 0 0 24px 0;
  background-color: #ffffff;
}
.form-field label {
  display: block;
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  margin-bottom: 8px;
  font-size: 18px;
  color: #343434;
}
.form-field label span {
  color: #757575;
}
.form-field-prefixes-and-last-name {
  display: flex;
  flex-direction: row;
  margin: 0 0 24px 0;
  width: 384px;
}
.form-field-prefixes-and-last-name .form-field {
  margin: 0;
}
.form-field-prefixes-and-last-name .form-field label[for="prefixes"] {
}
.form-field-prefixes-and-last-name .form-field label[for="last-name"] {
}
.form-field-prefixes-and-last-name .form-field input[name="prefixes"] {
  width: 176px;
  margin-right: 32px;
}
.form-field-prefixes-and-last-name .form-field input[name="last-name"] {
  width: 281px;
}
.form-field input:valid {
  border: 1px solid #949494;
  background-color: #ffffff;
}
.form-field input:invalid:not(:empty) {
  border: 1px solid #bc3f38;
  background-color: #faf4f3;
}
.form-field input:focus {
  border: 1px solid #0070b9;
  background-color: #ffffff;
  outline: none;
}
.form-field input:focus:valid {
}
.form-field input {
  display: block;
  padding: 12px 16px;
  color: #343434;
  border: 1px solid #949494;
  background-color: #ffffff;
  border-radius: 4px;
  font-size: 18px;
  line-height: 1.5;
  box-sizing: border-box;
  box-shadow: 1px;
  height: 48px;
}
.form-field-disabled-email-container {
  margin: 0 112px 42px 112px;
}
.form-field input::placeholder {
  color: #757575;
}
.form-field input:disabled {
  color: #343434;
  background: #efefef;
}
input:disabled::placeholder {
  color: #343434;
}
.form-field input[type="text"] {
  width: 100%;
}
.form-field-invalid {
  border: 1px solid #bc3f38 !important;
  background-color: #faf4f3 !important;
}
.form-field-warning-icon {
  margin-right: 8px;
  padding-top: 1px;
  height: 22px;
  width: 24px;
}
.form-field-warning {
  display: none;
  /* display: flex; */
  color: #bc3f38;
  font-size: 16px;
  line-height: 24px;
  font-weight: normal;
  margin-top: 8px;
}
.form-field input[type="email"] {
}
.form-field-optional-header {
  margin: 0 0 16px 0;
}
#company {
  /* background: #fff; */
  background: url('data:image/svg+xml,%3Csvg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M12.5 11H11.71L11.43 10.73C12.41 9.59 13 8.11 13 6.5C13 2.91 10.09 0 6.5 0C2.91 0 0 2.91 0 6.5C0 10.09 2.91 13 6.5 13C8.11 13 9.59 12.41 10.73 11.43L11 11.71V12.5L16 17.49L17.49 16L12.5 11ZM6.5 11C4.01 11 2 8.99 2 6.5C2 4.01 4.01 2 6.5 2C8.99 2 11 4.01 11 6.5C11 8.99 8.99 11 6.5 11Z" fill="%23343434"/%3E%3C/svg%3E')
    no-repeat center right;
  background-size: 40px 20px;
  margin-right: 10px;
}
/* Checkbox group */
.checkbox-group-label {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.0004em;
  margin-bottom: 12px;
  color: #343434;
}
.checkbox-group-container {
  display: block;
  margin: 0 112px 42px 112px;
}
.checkbox-content {
}
.checkbox-group {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  margin: 0 0 24px 0;
}
.checkbox-group div {
  display: flex;
  margin: 10px 0 10px 0;
}
.checkbox-group div h4 {
  font-size: 20px;
  line-height: 24px;
  color: #343434;
  /* margin-bottom: 2px; */
  /* margin: 8px 0 0 0; */
}
.checkbox-subheading {
  margin: 28px 0 2px 0 !important;
  color: #343434;
}
.checkbox-extra-margin-eventcalender {
  margin-bottom: 8px !important;
}
.checkbox-group-bottom {
  margin-bottom: 24px;
}
.checkbox-indent {
  margin: 10px 0 8px 36px !important;
}
.checkbox-indent div {
  margin-bottom: 10px;
}
.checkbox-interested {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  margin-top: 0px !important;
  color: #343434;
  margin-bottom: 20px;
}
.checkbox-indent-item {
  margin-left: -4px !important;
}
.checkbox-indent-item label::before {
  left: 183px !important;
}
.checkbox-group div:first-child {
  margin-top: 20px;
}
.checkbox-group div:last-child {
  margin-bottom: 0;
}
input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  padding-right: 16px;
  width: 20px;
  min-width: 20px;
  height: 20px;
  background: #ffffff;
  border: 2px solid #949494;
  border-radius: 2px;
}
.checkbox-group div label {
  display: inline-block;
  vertical-align: middle;
  font-size: 18px;
  color: #343434;
  cursor: pointer;
  user-select: none;
}
input[type="checkbox"]:hover {
  border: 2px solid #0070b9;
  border-radius: 2px;
  background: #e5f5ff;
  outline: 2px solid #e5f5ff;
}
input[type="checkbox"]:focus {
}
input[type="checkbox"]:invalid {
  border: 2px solid #bc3f38;
}
input[type="checkbox"]:required:invalid {
  border: 2px solid #bc3f38;
}
input[type="checkbox"].not-valid {
  border: 2px solid #bc3f38;
}
input[type="checkbox"]:checked {
  display: inline-block;
  vertical-align: middle;
  font-size: 20px;
  line-height: 1;
  color: #ffffff;
  background: #0070b9;
  border: 2px solid #0070b9;
  border-radius: 2px;
}
input[type="checkbox"]:checked + label::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  padding: 0 17px 0 0;
  margin: 4px 0 0 -29px;
  width: 4.63px;
  height: 13px;
  background-repeat: no-repeat;
  border-width: 0px 0px 3px 3px;
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.225 8.8025L1.33 4.955L0.184998 6.11L5.4425 11.3025L12.1975 1.795L10.8325 0.910004L5.225 8.8025Z' fill='white'/%3E%3C/svg%3E");
  position: inherit;
  left: 151px;
  padding: 0px 0px 5px 20px;
}
input[type="checkbox"]:checked:disabled + label::before {
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.22481 8.80247L1.32981 4.95497L0.184814 6.10997L5.44231 11.3025L12.1973 1.79497L10.8323 0.909973L5.22481 8.80247Z' fill='%23949494'/%3E%3C/svg%3E");
}
input[type="checkbox"]:disabled {
  background: #efefef;
  border: 2px solid #949494;
  border-radius: 2px;
  cursor: not-allowed;
}
input[type="checkbox"]:focus {
  background: #fff;
  outline: 1px solid #0070b9;
  outline-offset: 1px;
}
input[type="checkbox"]:checked:focus {
  background: #0070b9;
  outline: 1px solid #0070b9;
  border: 2px solid #0070b9;
  outline-offset: 1px;
  border-radius: 2px;
}
input[type="checkbox"]:disabled + label::before {
  color: #949494;
  cursor: not-allowed;
}
input[type="checkbox"]:disabled:hover {
  outline: none;
  cursor: not-allowed;
}
.checkbox-label {
  display: inline-block;
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.0004em;
  margin-left: 10px;
  width: 100%;
  align-self: center;
}

/* Navbar */
.navbar {
  height: 79px;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.navbar-container {
  height: 72px;
}
.navbar-strip {
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, #aa418c 0%, #ff9300 100%);
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}
.navbar-logo {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: left;
  margin: 0 0 0 112px;
}
.navbar-logo a {
  height: 24px;
}
/* Footer */
.footer {
  margin-top: 58px;
  height: 80px;
}
.footer-container {
  width: 100%;
  border-top: 1px solid #bebebe;
}
.footer-container-content {
  display: flex;
  flex-direction: row;
  margin: 0 112px;
}
.footer-logo {
  width: 100%;
  height: 72px;
  background-color: #ffffff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.footer-logo a {
  height: 24px;
}
.footer-logo a svg {
  height: 16px;
  width: 123px;
}
.footer-strip {
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #aa418c 0%, #ff9300 100%);
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}
.footer-social-buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.footer-social-buttons div {
  display: flex;
  flex-direction: row;
}
.footer-extended {
  background: #efefef;
  margin: 58px 0 -58px 0;
}
.footer-extended-container {
  background: #efefef;
  padding: 32px 0 32px 0;
}
.footer-extended-container-content {
  display: flex;
  flex-wrap: wrap;
  width: calc(100%-112px);
  margin: 0 0 0 112px;
}
.footer-extended-container-content div {
  flex-direction: column;
  margin: 0 32px 0 0;
  width: 280px;
}
.footer-extended-container-content div h3 {
  margin-bottom: 11px;
  color: #343434;
  width: fit-content;
}
.footer-extended-container-content div a {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
}
.footer-extended-container-content div div {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: #343434;
}
.footer-extended-about {
  display: flex;
  flex-direction: column;
}
.footer-extended-about a:last-child {
  margin-bottom: 20px;
}
.footer-extended-ondernemersplein {
  width: min-content;
}
.footer-extended-adviesteam {
}
/* Radiobuttons */
.radio-buttons {
  display: block;
  margin: 0 112px 42px 112px;
}
.radio-group {
  display: flex;
  flex-direction: column;
  margin: 0 0 24px 0;
}
.radio-buttons label {
  display: block;
}
.radio-group-option {
  display: block;
  position: relative;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.radio-group-option:first-child {
  padding-top: 0;
}
.radio-group-option:last-child {
  padding-bottom: 0;
}
.radio-group-option input[type="radio"] {
  margin-right: 18px;
  width: 20px;
  height: 20px;
  margin-top: 6px;
  cursor: pointer;
}
.radio-group-option label {
  display: inline-block;
  font-size: 18px;
  width: calc(100% - 56px);
  padding-left: 35px;
  cursor: pointer;
}

.radio-group-option input[type="radio"] {
  position: absolute;
  cursor: pointer;
  margin-right: 18px;
  width: 20px;
  height: 20px;
  margin-top: 6px;
}
.radio-button {
  border-color: #949494;
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #fff;
  border: 2px solid #949494;
  border-radius: 50%;
  margin: 6px 0 0 0;
  pointer-events: none;
  z-index: 2;
}
.radio-button:after {
  content: "";
  position: absolute;
  display: none;
}
.radio-group-option:hover input ~ .radio-button {
  background: #e6f5ff;
  border-color: #0070b9;
  border-radius: 50%;
}
.radio-group-option:invalid input ~ .radio-button {
  background-color: #e6f5ff;
  border-color: #bc3f38;
}
.radio-group-option input:checked ~ .radio-button {
  display: block;
  background-color: #bc3f38;
}
.radio-group-option:disabled input ~ .radio-button {
  /* background-color: #e6f5ff; */
  border-color: #949494;
}
.radio-group-option:disabled input:checked ~ .radio-button:after {
  display: block;
  background-color: #949494;
}
/* When the radio button is checked, add a background */
.radio-group-option input:checked ~ .radio-button {
  background-color: #ffffff;
  border-color: #0070b9;
}
/* Show the indicator (dot/circle) when checked */
.radio-group-option input:checked ~ .radio-button:after {
  display: block;
  background: #0070b9;
}
.radio-group-option .radio-button:after {
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0070b9;
}
.radio-group-option:focus input ~ .radio-button {
  outline: 1px solid #0070b9;
  outline-offset: 1px;
}

input[type="radio"]:checked + label:before {
  background-color: #0070b9;
}
/* Font styles */
h1 {
  font-family: "Ciutadella Rounded", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 50px;
  line-height: 56px;
  color: #00526e;
  margin: 0;
}
h2 {
  font-family: "Ciutadella Rounded", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 32px;
  line-height: 36px;
  color: #00526e;
  margin: 0;
}
h3 {
  font-family: "Ciutadella Rounded", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 26px;
  line-height: 32px;
  color: #00526e;
  margin: 0;
}
h3 {
  font-family: "Ciutadella Rounded", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 26px;
  line-height: 32px;
  letter-spacing: 0.0004em;
  color: #00526e;
  margin: 0;
}
h4 {
  font-family: "Ciutadella Rounded", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: 0.0004em;
  color: #00526e;
  margin: 0;
}
body {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 30px;
  color: #343434;
  margin: 0 auto;
  max-width: 1440px !important;
}
.title {
  font-family: "Ciutadella Rounded", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: 0.0004em;
  color: #00526e;
  margin: 8px 0;
  word-break: break-word;
}
.heading {
  font-family: "Ciutadella Rounded", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: 0.0004em;
  color: #00526e;
  margin: 0 0 16px 0;
}
.description {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.0004em;
  max-width: 800px;
  margin-bottom: 24px;
  color: #343434;
}
.privacy {
  margin-bottom: 24px;
  max-width: 592px;
}
/* Hero */
.hero-container {
  display: block;
  min-height: 270px;
  background-color: #e6f2f5;
  margin-bottom: 64px;
}
.hero-container-content {
  display: flex;
  margin: 0 112px;
  padding: 42px 0 0 0;
  justify-content: flex-start;
  min-height: 270px;
  flex-wrap: wrap;
  flex-direction: row;
}
.hero-container-content-text {
  max-width: 502px;
}
.hero-container-breadcrumbs {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.0004em;
  color: #343434;
  margin-bottom: 8px;
}
.hero-container-title {
  /* max-width: 500px; */
  margin: 0 0 16px 0;
  word-break: break-word;
}
.hero-container-title h1 {
  font-size: 48px;
}
.hero-container-description {
  margin: 0;
  color: #343434;
  width: auto;
}
.hero-container-visual {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  margin-top: -1.5rem;
  bottom: -1.8rem;
  justify-self: center;
  width: 340px;
  place-self: flex-end;
}
.hero-container-visual svg {
  /* Illustratie maat: 730x340px */
  height: 340px;
  width: auto;
}

.thank-you-container {
  min-height: 80vh; /* Perhaps 100 - header / footer */
}
.thank-you-container-text {
  max-width: 800px;
}
.hero-container.thank-you-container {
  margin: 0;
}
.thank-you-container + .footer {
  margin-top: 0;
}
.thank-you-footer {
  margin-top: 0;
}

@media (max-width: 1300px) {
  .hero-container-description {
    margin: 0;
  }
  .hero-container-visual {
    height: 340px;
    /* width: auto; */
    bottom: -1.1rem;
    margin-top: -2.5rem;
  }
  .hero-container-visual svg {
    /* Illustratie maat: 730x340px */
    height: 340px;
    width: auto;
  }
}
@media (max-width: 1023px) {
  .hero-container-description {
    margin: 0;
  }
  .hero-container-visual {
    height: 340px;
    width: auto;
    bottom: -3.25rem;
    margin-top: -3.5rem;
  }

  .hero-container-visual svg {
    /* Illustratie maat: 730x340px */
    height: 304px;
    width: auto;
  }
}
@media (max-width: 768px) {
  .navbar-logo {
    margin: 0 0 0 24px;
  }
  .title {
    font-family: "Ciutadella Rounded", "Helvetica Neue", Helvetica, Arial,
      sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 48px;
    line-height: 56px;
    letter-spacing: 0.0004em;
    color: #00526e;
    margin: 8px 0;
  }
  .heading {
    font-family: "Ciutadella Rounded", "Helvetica Neue", Helvetica, Arial,
      sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 26px;
    line-height: 32px;
    letter-spacing: 0.0004em;
    color: #00526e;
    margin: 0 0 12px 0;
  }
  h1 {
    font-size: 32px;
    line-height: 32px;
  }
  h2 {
    font-size: 28px;
    line-height: 32px;
  }
  h3 {
    font-size: 28px;
    line-height: 32px;
  }
  h4 {
    font-size: 26px;
    line-height: 32px;
  }
  body {
    font-size: 16px;
  }
  /* Mobile Body text */
  .description {
    font-size: 16px;
    line-height: 26px;
    color: #343434;
  }
  /* Mobile Buttons */
  .button-primary {
  }
  .button-primary a {
    font-size: 16px;
  }
  /* Hero */
  .hero-container {
    overflow-x: clip;
  }
  .hero-container-content {
    margin: 0 24px;
    padding: 24px 0 0 0;
  }
  .hero-container-breadcrumbs {
    font-size: 16px;
  }
  .hero-container-content-text {
    max-width: 80vw;
  }
  .hero-container-title h1 {
    font-size: 28px;
  }
  .hero-container-description {
    margin: 0;
  }

  .thank-you-container {
    /* min-height: 80vh; Pherhaps 100 - header / footer */
    min-height: calc(100vh - 236px);
  }
  /* Radiobuttons */
  .radio-buttons {
    display: block;
    margin: 0 16px 42px 16px;
  }
  .radio-group-option label {
    font-size: 16px;
    line-height: 20px;
  }

  /* Checkbox */
  .checkbox-group-label {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
  }
  .checkbox-subheading {
    margin: 28px 0 2px 0 !important;
    color: #343434;
  }
  .checkbox-group-container {
    display: block;
    margin: 0 16px 42px 16px;
  }
  input[type="checkbox"]:checked + label::before {
  }
  .checkbox-content {
  }
  .checkbox-group {
  }
  .checkbox-group div {
  }
  .checkbox-group div h4 {
    font-size: 18px;
    line-height: 24px;
  }
  .checkbox-label {
    font-size: 16px;
    line-height: 22px;
    padding: 2px 0;
  }
  .checkbox-group div label {
    font-size: 16px;
    line-height: 22px;
  }
  .checkbox-interested {
    font-size: 16px;
    line-height: 22px;
  }
  .checkbox-interested:invalid {
    font-size: 16px;
    line-height: 22px;
    background-color: red;
  }

  .checkbox-indent-item label::before {
    left: 87px !important;
  }
  /* Form Field */
  .form-field-container {
    display: block;
    margin: 0 16px 42px 16px;
  }
  .form-field-email-only-container {
    margin: 60px 16px 42px 16px;
  }
  .form-field {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .form-field-prefixes-and-last-name {
    width: 100%;
    flex-direction: column;
    margin: 0;
  }
  .form-field-prefixes-and-last-name .form-field {
    margin: 0 0 24px 0;
  }
  .form-field label {
    color: #343434;
    font-size: 16px;
  }
  .form-field-prefixes-and-last-name .form-field input[type="text"] {
    width: 100%;
  }
  .form-field input[type="email"] {
  }
  .form-field input {
    font-size: 16px;
    line-height: 20px;
  }
  /* Form field warning */
  .form-field-warning-icon {
    height: 18px;
    width: 20px;
  }
  .form-field-warning {
    font-size: 14px;
    line-height: 20px;
  }
  .footer-container-content {
    margin: 0 16px;
  }
}

/* Hero - Smaller resolutions*/
@media (max-width: 720px) {
  .hero-container-description {
    margin: 0;
  }
  .hero-container-content {
    flex-direction: column;
  }
  .hero-container-visual {
    /* width: auto; */
    height: 304px;
    bottom: -1rem;
    margin-top: -1.4rem;
  }
  .hero-container-visual svg {
    height: 304px;
    width: auto;
  }
  /* Footer */

  .footer-extended {
    margin: 38px 0 -38px 0;
  }
  .footer-extended-container-content {
    margin: 0 16px;
  }
  .footer-extended-container-content div {
    width: auto;
    max-width: 280px;
  }
  .footer-extended-about a:last-child {
    margin-bottom: 20px;
  }
  .footer-extended-ondernemersplein div:last-child {
    margin-bottom: 20px;
  }
  .footer-extended-adviesteam {
  }
  .footer {
    /* margin-top: 38px; */
    height: 100%;
  }
  .form-field-disabled-email-container {
    margin: 50px 16px 42px 16px;
  }
  .footer-container {
    display: flex;
    flex-direction: column;
  }
  .footer-container-content {
    margin: 0 20px;
    flex-direction: column;
  }
  .footer-logo {
    justify-content: center;
    align-items: center;
    height: 77px; /* calc between 86px height - */
  }
  .footer-social-buttons {
    justify-content: center;
  }
  .footer-social-buttons div {
    margin-bottom: 20px;
  }
  .hero-container-visual {
    margin-top: -2.5rem;
  }
}

@media (max-width: 520px) {
  .hero-container-description {
    margin: 0;
  }
  .hero-container-visual {
    width: auto;
    height: 304px;
    bottom: -1rem;
    margin-top: -0.5rem;
  }
  .hero-container-visual svg {
    width: auto;
    height: 304px;
  }
}

@media (max-width: 430px) {
  .button-primary,
  .button-primary input {
    width: 100%;
  }
  .hero-container-visual {
    width: auto;
    height: 211px;
    bottom: -0.7rem;
    margin-top: 0.9rem;
  }
  .hero-container-visual svg {
    width: auto;
    height: 211px;
  }
}

input[type=submit]{
  cursor: pointer;
}
#general-warning {
    padding-left: 16px;
    margin-top: 0;
}
.warningFlex {
    display: flex;
}
.mobileDisplayNone {
  display: block;
 }

 .mobileDisplay {
  display: none;
 }

 @media (max-width: 833px) {
  .mobileDisplayNone {
    display: none;
   }

   .mobileDisplay {
    display: block;
   }
}
#uc_middle-name {
  height: 0;
  font-size: 1px;
  line-height: 1px;
  position: absolute;
  z-index: -1;
  display:none;
}
.bfc_middle-name {
  height: 0;
  font-size: 1px;
  line-height: 1px;
  position: absolute;
  z-index: -1;
  display:none;
}