.border-\[\#d1d7da\] {
      --tw-border-opacity: 1;
      border-color: rgb(209 215 218/var(--tw-border-opacity, 1))
    }

    .border-transparent {
      border-color: #0000
    }

    /* remove infomration overlay */
g .a, .b, .c, .d {
  display:none;
  cursor:none;
}

.inset-0 {
  display:none;
}

.inset-0 .cursor-pointer {
  cursor:none;
}

/* soon online temporary image */
.placeholder {
  background-image: url("../images/abp_hero_soon_online.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.placeholder-size {
  width:100%;
  height:100%;
}

    .bg-\[\#C1E8EE\] {
      --tw-bg-opacity: 1;
      background-color: rgb(193 232 238/var(--tw-bg-opacity, 1))
    }

    .bg-\[\#DCE1E3\] {
      --tw-bg-opacity: 1;
      background-color: rgb(220 225 227/var(--tw-bg-opacity, 1))
    }

    .bg-black {
      --tw-bg-opacity: 1;
      background-color: rgb(0 0 0/var(--tw-bg-opacity, 1))
    }

    .bg-darkblue {
      --tw-bg-opacity: 1;
      background-color: rgb(0 87 163/var(--tw-bg-opacity, 1))
    }

    .bg-graylight {
      --tw-bg-opacity: 1;
      background-color: rgb(241 243 244/var(--tw-bg-opacity, 1))
    }

    .bg-lightblue {
      --tw-bg-opacity: 1;
      background-color: rgb(0 156 189/var(--tw-bg-opacity, 1))
    }

    .bg-orange {
      --tw-bg-opacity: 1;
      background-color: rgb(238 114 3/var(--tw-bg-opacity, 1))
    }

    .bg-transparent {
      background-color: initial
    }

    .bg-white {
      --tw-bg-opacity: 1;
      background-color: rgb(255 255 255/var(--tw-bg-opacity, 1))
    }

    .bg-opacity-95 {
      --tw-bg-opacity: .95
    }

    .\!text-darkblue {
      --tw-text-opacity: 1 !important;
      color: rgb(0 87 163/var(--tw-text-opacity, 1)) !important
    }

    .\!text-lightblue {
      --tw-text-opacity: 1 !important;
      color: rgb(0 156 189/var(--tw-text-opacity, 1)) !important
    }

    .\!text-orange {
      --tw-text-opacity: 1 !important;
      color: rgb(238 114 3/var(--tw-text-opacity, 1)) !important
    }

     .\!text-bluetint {
      --tw-text-opacity: 1 !important;
      color: rgb(204 235 241/var(--tw-bg-opacity, 1)) !important
    }

    .text-black {
      --tw-text-opacity: 1;
      color: rgb(0 0 0/var(--tw-text-opacity, 1))
    }

    .text-darkblue {
      --tw-text-opacity: 1;
      color: rgb(0 87 163/var(--tw-text-opacity, 1))
    }

    .text-lightblue {
      --tw-text-opacity: 1;
      color: rgb(0 156 189/var(--tw-text-opacity, 1))
    }

    .text-bluetint {
      --tw-text-opacity: 1;
      color: rgb(204 235 241/var(--tw-bg-opacity, 1))
    }

    .text-orange {
      --tw-text-opacity: 1;
      color: rgb(238 114 3/var(--tw-text-opacity, 1))
    }

    .text-white {
      --tw-text-opacity: 1;
      color: rgb(255 255 255/var(--tw-text-opacity, 1))
    }

    .grayscale {
      --tw-grayscale: grayscale(100%)
    }

    .grayscale,
    .invert {
      filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
    }

    .invert {
      --tw-invert: invert(100%)
    }

    .sepia {
      --tw-sepia: sepia(100%)
    }

    .filter,
    .sepia {
      filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
    }

    .transition-all {
      transition-duration: .15s;
      transition-property: all;
      transition-timing-function: cubic-bezier(.4, 0, .2, 1)
    }

    .last\:rounded-br-md:last-child {
      border-bottom-right-radius: 40px
    }

    .hover\:border-white:hover {
      --tw-border-opacity: 1;
      border-color: rgb(255 255 255/var(--tw-border-opacity, 1))
    }

    .hover\:bg-graylight:hover {
      --tw-bg-opacity: 1;
      background-color: rgb(241 243 244/var(--tw-bg-opacity, 1))
    }

    .hover\:bg-lightblue:hover {
      --tw-bg-opacity: 1;
      background-color: rgb(0 156 189/var(--tw-bg-opacity, 1))
    }

    .hover\:bg-orange:hover {
      --tw-bg-opacity: 1;
      background-color: rgb(238 114 3/var(--tw-bg-opacity, 1))
    }

    .hover\:bg-white:hover {
      --tw-bg-opacity: 1;
      background-color: rgb(255 255 255/var(--tw-bg-opacity, 1))
    }

    .hover\:text-lightblue:hover {
      --tw-text-opacity: 1;
      color: rgb(0 156 189/var(--tw-text-opacity, 1))
    }

    .hover\:text-orange:hover {
      --tw-text-opacity: 1;
      color: rgb(238 114 3/var(--tw-text-opacity, 1))
    }

    .hover\:text-white:hover {
      --tw-text-opacity: 1;
      color: rgb(255 255 255/var(--tw-text-opacity, 1))
    }

    .hover\:underline:hover {
      text-decoration-line: underline
    }

    .focus\:outline-none:focus {
      outline: 2px solid #0000;
      outline-offset: 2px
    }

    .group:hover .group-hover\:ml-2 {
      margin-left: .5rem
    }

    .group:hover .group-hover\:bg-lightblue {
      --tw-bg-opacity: 1;
      background-color: rgb(0 156 189/var(--tw-bg-opacity, 1))
    }

    .group:hover .group-hover\:bg-darkblue {
      --tw-bg-opacity: 1;
      background-color: rgb(0 87 163/var(--tw-bg-opacity, 1))
    }
    
    .group:hover .group-hover\:text-lightblue {
      --tw-text-opacity: 1;
      color: rgb(0 156 189/var(--tw-text-opacity, 1))
    }

    .group:hover .group-hover\:opacity-0 {
      opacity: 0
    }

    .group:hover .group-hover\:opacity-100 {
      opacity: 1
    }

    .button--green {
      border: 1px solid #3b8070;
      border-radius: 4px;
      color: #3b8070;
      display: inline-block;
      padding: 10px 30px;
      text-decoration: none
    }

    .button--green:hover {
      background-color: #3b8070;
      color: #fff
    }

    .button--grey {
      border: 1px solid #35495e;
      border-radius: 4px;
      color: #35495e;
      display: inline-block;
      margin-left: 15px;
      padding: 10px 30px;
      text-decoration: none
    }

    .button--grey:hover {
      background-color: #35495e;
      color: #fff
    }

    .cls-1[data-v-a04ee999] {
      fill: none;
      filter: url(#drop-shadow-1);
      stroke: #fff;
      stroke-miterlimit: 10;
      stroke-width: 5.3036534px
    }

    .cls-2[data-v-a04ee999] {
      fill: #fff;
      filter: url(#drop-shadow-2)
    }

    .cls-1[data-v-383398d7] {
      fill: #0056a4
    }

    .cls-1[data-v-383398d7],
    .cls-10[data-v-383398d7],
    .cls-11[data-v-383398d7],
    .cls-12[data-v-383398d7],
    .cls-13[data-v-383398d7],
    .cls-14[data-v-383398d7],
    .cls-15[data-v-383398d7],
    .cls-16[data-v-383398d7],
    .cls-17[data-v-383398d7],
    .cls-18[data-v-383398d7],
    .cls-19[data-v-383398d7],
    .cls-2[data-v-383398d7],
    .cls-20[data-v-383398d7],
    .cls-21[data-v-383398d7],
    .cls-22[data-v-383398d7],
    .cls-23[data-v-383398d7],
    .cls-24[data-v-383398d7],
    .cls-25[data-v-383398d7],
    .cls-26[data-v-383398d7],
    .cls-27[data-v-383398d7],
    .cls-28[data-v-383398d7],
    .cls-29[data-v-383398d7],
    .cls-3[data-v-383398d7],
    .cls-30[data-v-383398d7],
    .cls-31[data-v-383398d7],
    .cls-32[data-v-383398d7],
    .cls-33[data-v-383398d7],
    .cls-34[data-v-383398d7],
    .cls-35[data-v-383398d7],
    .cls-36[data-v-383398d7],
    .cls-37[data-v-383398d7],
    .cls-38[data-v-383398d7],
    .cls-39[data-v-383398d7],
    .cls-4[data-v-383398d7],
    .cls-40[data-v-383398d7],
    .cls-41[data-v-383398d7],
    .cls-5[data-v-383398d7],
    .cls-6[data-v-383398d7],
    .cls-7[data-v-383398d7],
    .cls-8[data-v-383398d7],
    .cls-9[data-v-383398d7] {
      stroke-width: 0px
    }

    .cls-2[data-v-383398d7] {
      fill: #b5b5b5
    }

    .cls-3[data-v-383398d7] {
      fill: #0354a3
    }

    .cls-42[data-v-383398d7],
    .cls-43[data-v-383398d7],
    .cls-44[data-v-383398d7],
    .cls-45[data-v-383398d7],
    .cls-46[data-v-383398d7],
    .cls-47[data-v-383398d7],
    .cls-48[data-v-383398d7],
    .cls-49[data-v-383398d7],
    .cls-50[data-v-383398d7] {
      fill: none
    }

    .cls-42[data-v-383398d7],
    .cls-45[data-v-383398d7],
    .cls-46[data-v-383398d7],
    .cls-48[data-v-383398d7],
    .cls-50[data-v-383398d7] {
      stroke-miterlimit: 10
    }

    .cls-42[data-v-383398d7],
    .cls-49[data-v-383398d7] {
      stroke: #9d9d9c;
      stroke-width: 2.24px
    }

    .cls-4[data-v-383398d7] {
      fill: #134e9a
    }

    .cls-5[data-v-383398d7] {
      fill: #95e2f9
    }

    .cls-6[data-v-383398d7] {
      fill: #f49600
    }

    .cls-7[data-v-383398d7] {
      fill: #349a6d
    }

    .cls-8[data-v-383398d7] {
      fill: #fac400
    }

    .cls-43[data-v-383398d7] {
      stroke: #694a3d
    }

    .cls-43[data-v-383398d7],
    .cls-44[data-v-383398d7],
    .cls-47[data-v-383398d7] {
      stroke-width: 3.55px
    }

    .cls-43[data-v-383398d7],
    .cls-47[data-v-383398d7],
    .cls-48[data-v-383398d7],
    .cls-49[data-v-383398d7],
    .cls-50[data-v-383398d7] {
      stroke-linecap: round
    }

    .cls-43[data-v-383398d7],
    .cls-47[data-v-383398d7],
    .cls-49[data-v-383398d7] {
      stroke-linejoin: round
    }

    .cls-9[data-v-383398d7] {
      fill: #ffcb00
    }

    .cls-10[data-v-383398d7] {
      fill: #003861
    }

    .cls-44[data-v-383398d7] {
      stroke: #acafb0
    }

    .cls-45[data-v-383398d7] {
      stroke: #fff;
      stroke-width: 2.09px
    }

    .cls-11[data-v-383398d7] {
      fill: #009cbd
    }

    .cls-12[data-v-383398d7] {
      fill: #694a3d
    }

    .cls-13[data-v-383398d7] {
      fill: #734432
    }

    .cls-14[data-v-383398d7] {
      fill: #d39313
    }

    .cls-15[data-v-383398d7] {
      fill: #00c300
    }

    .cls-16[data-v-383398d7] {
      fill: #c3c8cd
    }

    .cls-17[data-v-383398d7] {
      fill: #8c5a43
    }

    .cls-18[data-v-383398d7] {
      fill: #f9e926
    }

    .cls-19[data-v-383398d7] {
      fill: #f4bb32
    }

    .cls-20[data-v-383398d7] {
      fill: #000
    }

    .cls-21[data-v-383398d7] {
      fill: #878c6b
    }

    .cls-22[data-v-383398d7] {
      fill: #0057a3
    }

    .cls-23[data-v-383398d7] {
      fill: #ed7102
    }

    .cls-24[data-v-383398d7] {
      fill: #fabb9a
    }

    .cls-46[data-v-383398d7] {
      stroke-width: 5.32px
    }

    .cls-46[data-v-383398d7],
    .cls-50[data-v-383398d7] {
      stroke: #000
    }

    .cls-25[data-v-383398d7] {
      fill: #267352
    }

    .cls-26[data-v-383398d7] {
      fill: #888988
    }

    .cls-27[data-v-383398d7] {
      fill: #f0e2ee
    }

    .cls-28[data-v-383398d7] {
      fill: #009cbd
    }

    .cls-29[data-v-383398d7] {
      fill: #029abf
    }

    .cls-30[data-v-383398d7] {
      fill: #878787
    }

    .cls-31[data-v-383398d7] {
      fill: #f4a700
    }

    .cls-32[data-v-383398d7] {
      fill: #dbdbdb
    }

    .cls-33[data-v-383398d7] {
      fill: #f9af08
    }

    .cls-34[data-v-383398d7] {
      fill: #dfaf91
    }

    .cls-47[data-v-383398d7] {
      stroke: #349a6d
    }

    .cls-35[data-v-383398d7] {
      fill: #d9eef3
    }

    .cls-36[data-v-383398d7] {
      fill: #d1d7da
    }

    .cls-48[data-v-383398d7] {
      stroke: #734432;
      stroke-width: .82px
    }

    .cls-37[data-v-383398d7] {
      fill: #03301a
    }

    .cls-38[data-v-383398d7] {
      fill: #c2c3c4
    }

    .cls-50[data-v-383398d7] {
      stroke-width: .85px
    }

    .cls-39[data-v-383398d7] {
      fill: #fff
    }

    .cls-40[data-v-383398d7] {
      fill: #85c2a8
    }

    .cls-41[data-v-383398d7] {
      fill: #b2ded6
    }

    .point[data-v-5e79432a] {
      display: block;
      height: 3rem;
      margin-right: -3rem;
      position: absolute;
      right: 50%;
      width: 6rem;
      --tw-text-opacity: 1;
      bottom: -2px;
      color: rgb(255 255 255/var(--tw-text-opacity, 1));
      transition-duration: .15s;
      transition-property: all;
      transition-timing-function: cubic-bezier(.4, 0, .2, 1)
    }

    .interview--image[data-v-5e79432a] {
      width: 100%
    }

    .button-orange[data-v-bc85abe7] {
      align-items: center;
      background-color: rgb(238 114 3/var(--tw-bg-opacity, 1));
      color: rgb(255 255 255/var(--tw-text-opacity, 1));
      display: flex;
      font-size: 1.125rem;
      line-height: 1.75rem;
      padding-bottom: 1rem;
      padding-left: 1.5rem;
      padding-top: 1rem;
      transition-duration: .15s;
      transition-property: all;
      transition-timing-function: cubic-bezier(.4, 0, .2, 1)
    }

    .button-orange[data-v-bc85abe7],
    .button-orange[data-v-bc85abe7]:hover {
      --tw-bg-opacity: 1;
      --tw-text-opacity: 1
    }

    .button-orange[data-v-bc85abe7]:hover {
      background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
      color: rgb(238 114 3/var(--tw-text-opacity, 1))
    }

    .button-blue[data-v-bc85abe7] {
      align-items: center;
      display: flex;
      --tw-bg-opacity: 1;
      background-color: rgb(0 156 189/var(--tw-bg-opacity, 1));
      font-size: 1.125rem;
      line-height: 1.75rem;
      padding-bottom: 1rem;
      padding-left: 1.5rem;
      padding-top: 1rem;
      --tw-text-opacity: 1;
      color: rgb(255 255 255/var(--tw-text-opacity, 1));
      transition-duration: .15s;
      transition-property: all;
      transition-timing-function: cubic-bezier(.4, 0, .2, 1)
    }

    .button-blue[data-v-bc85abe7]:hover {
      color: rgb(0 156 189/var(--tw-text-opacity, 1))
    }

    .button-blue[data-v-bc85abe7]:hover,
    .button-white[data-v-bc85abe7] {
      --tw-bg-opacity: 1;
      background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
      --tw-text-opacity: 1
    }

    .button-white[data-v-bc85abe7] {
      align-items: center;
      border-bottom-right-radius: 40px;
      color: rgb(238 114 3/var(--tw-text-opacity, 1));
      display: flex;
      font-size: 1.125rem;
      line-height: 1.75rem;
      padding-bottom: 1rem;
      padding-left: 1.5rem;
      padding-top: 1rem;
      text-align: left;
      transition-duration: .15s;
      transition-property: all;
      transition-timing-function: cubic-bezier(.4, 0, .2, 1)
    }

    .button-white[data-v-bc85abe7]:hover {
      --tw-bg-opacity: 1;
      background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
      --tw-text-opacity: 1;
      color: rgb(0 156 189/var(--tw-text-opacity, 1))
    }

    .button-white:hover .next-icon[data-v-bc85abe7] {
      --tw-rotate: 90deg
    }

    .button-white:hover .next-icon[data-v-bc85abe7],
    .button-white:hover .next-icon.next-icon-active[data-v-bc85abe7],
    .next-icon.next-icon-active[data-v-bc85abe7] {
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .button-white:hover .next-icon.next-icon-active[data-v-bc85abe7],
    .next-icon.next-icon-active[data-v-bc85abe7] {
      --tw-rotate: -90deg
    }

.intro--image {
display:block;
}

.button-white[data-v-bc85abe7] {
    align-items: center;
    border-bottom-right-radius: 40px;
    color:#0057A3 !important;
    display: flex;
    font-size: 1.125rem;
    line-height: 1.75rem;
    padding-bottom: 1rem;
    padding-left: 1.5rem;
    padding-top: 1rem;
    text-align: left;
    transition-duration: .15s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  }

  .next-icon[data-v-bc85abe7] {
    height: 2rem;
    margin-right: 1rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    width: 2rem;
    --tw-text-opacity: 1;
    color: #0057A3 !important;
    transition-duration: .15s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  }

/* arrow voorwoord */
    .point[data-v-a04ee999] {
      display: block;
      height: 3rem;
      left: 2.5rem;
      margin-right: -3rem;
      position: absolute;
      width: 6rem;
      --tw-text-opacity: 1;
      color: rgb(0 87 163/var(--tw-text-opacity, 1));
      transition-duration: .15s;
      transition-property: all;
      transition-timing-function: cubic-bezier(.4, 0, .2, 1)
    }

    .pr-2 {
    padding-right: .4rem;
}
.ml-1 {
    margin-left: .35rem;
  }

    .group:hover .point[data-v-a04ee999] {
      --tw-text-opacity: 1;
      color: rgb(0 156 189/var(--tw-text-opacity, 1))
    }

    .point[data-v-a04ee999] {
      bottom: calc(100% - 2px)
    }

    .interview--image[data-v-a04ee999] {
      width: 100%
    }

    .intro-content[data-v-a04ee999] {
      grid-column: span 2/span 2;
      padding-top: 1rem
    }

    @media (min-width:768px) {
      .intro-content[data-v-a04ee999] {
        padding-top: 3.5rem
      }
    }

    .cls-1[data-v-a04ee999] {
      fill: none;
      filter: url(#drop-shadow-1);
      stroke: #fff;
      stroke-miterlimit: 10;
      stroke-width: 5.3036534px
    }

    .cls-2[data-v-a04ee999] {
      fill: #fff;
      filter: url(#drop-shadow-2)
    }

  /* thumb jaarverslag mobile */
 @media (max-width:400px) {
      .intro--image {
      width:100%;
      height:auto;
      }
    }