.body_backgroundcolor { background-color: #ffffff; }

.primarycolor_cube { background-color: #d357fe; }
.backgroundpaul-primary { background-color: #d357fe; }
.fontcolor-primary { color: #d357fe; }


.primarycolor_hex { #d357fe; }




.primarycolor2_cube { background-color: #c623ff; }
.backgroundpaul-primary_2 { background-color: #c623ff; }
.fontcolor-primary_2 { color: #c623ff; }

.primarycolor3_cube { background-color: #b100ef; }
.backgroundpaul-primary_3 { background-color: #b100ef; }
.fontcolor-primary_3 { color: #b100ef; }

.secondarycolor_cube { background-color: #1a0a53; }
.backgroundpaul-secondary { background-color: #1a0a53; }
.fontcolor-secondary { color: #1a0a53; }

.secondarycolor2_cube { background-color: #0b0426; }
.backgroundpaul-secondary_2 { background-color: #0b0426; }
.fontcolor-secondary_2 { color: #0b0426; }

.secondarycolor3_cube { background-color: #000000; }
.backgroundpaul-secondary_3 { background-color: #000000; }
.fontcolor-secondary_3 { color: #000000; }

.primarybuttoncolor_cube { background-color: #f5ec00; }
.backgroundpaul-primarybutton { background-color: #f5ec00; }
.fontcolor-primarybutton { color: #f5ec00; }

.primarybuttoncolor2_cube { background-color: #c2bb00; }
.backgroundpaul-primarybutton_2 { background-color: #c2bb00; }
.fontcolor-primarybutton_2 { color: #c2bb00; }


.primarybuttoncolor3_cube { background-color: #8f8a00; }
.backgroundpaul-primarybutton_3 { background-color: #8f8a00; }
.fontcolor-primarybutton_3 { color: #8f8a00; }

.secondarybuttoncolor_cube { background-color: #77bb41; }
.backgroundpaul-secondarybutton { background-color: #77bb41; }
.fontcolor-secondarybutton { color: #77bb41; }

.secondarybuttoncolor2_cube { background-color: #5e9930; }
.backgroundpaul-secondarybutton_2 { background-color: #5e9930; }
.fontcolor-secondarybutton_2 { color: #5e9930; }

.secondarybuttoncolor3_cube { background-color: #467521; }
.backgroundpaul-secondarybutton_3 { background-color: #467521; }
.fontcolor-secondarybutton_3 { color: #467521; }


.fontcoloronbackground { color: #ffffff;}
.fontcoloronbackground_cube { background-color: #ffffff; }


.fontcoloronbackground2 { color: #000000;}
.fontcoloronbackground_cube2 { background-color: #000000; }


/* =========================================================
   GEDEELDE WRAPPER
========================================================= */

.marker-wrapper{
  position:relative;
  display:inline-block;
  padding:2px 12px;
}

/* =========================================================
   CIRKEL
========================================================= */

.circle-wrapper svg{
  position:absolute;

  inset:-16px;

  width:calc(100% + 32px);
  height:calc(100% + 32px);

  pointer-events:none;
  overflow:visible;

  filter:blur(0.15px);
}

.circle-wrapper path{

  fill:none;

  stroke:#f5ec00;

  stroke-width:5.5;

  stroke-linecap:round;
  stroke-linejoin:round;

  stroke-dasharray:1200;
  stroke-dashoffset:1200;

  animation:drawErase 13s ease-in-out infinite;
}

.circle-wrapper path.extra{

  stroke-width:5.5;

  opacity:1;

  animation-delay:0.08s;
}

/* =========================================================
   ONDERSTREPING
========================================================= */

.underline-wrapper svg{

  position:absolute;

  left:-6px;
  bottom:-12px;

  width:calc(100% + 12px);
  height:26px;

  overflow:visible;
  pointer-events:none;
}

.underline-wrapper path{

  fill:none;

  stroke:#f5ec00;

  stroke-width:6;

  stroke-linecap:round;
  stroke-linejoin:round;

  stroke-dasharray:500;
  stroke-dashoffset:500;

  animation:drawEraseLine 10s ease-in-out infinite;
}

/* tweede slordige lijn */
.underline-wrapper path.extra{

  stroke-width:4;

  opacity:0.6;

  animation-delay:0.12s;
}

/* =========================================================
   ANIMATIES
========================================================= */

@keyframes drawErase{

  0%{
    stroke-dashoffset:1200;
    opacity:0;
  }

  6%{
    opacity:1;
  }

  20%{
    stroke-dashoffset:0;
    opacity:1;
  }

  72%{
    stroke-dashoffset:0;
    opacity:1;
  }

  100%{
    stroke-dashoffset:1200;
    opacity:0;
  }
}

@keyframes drawEraseLine{

  0%{
    stroke-dashoffset:500;
    opacity:0;
  }

  8%{
    opacity:1;
  }

  22%{
    stroke-dashoffset:0;
    opacity:1;
  }

  72%{
    stroke-dashoffset:0;
    opacity:1;
  }

  100%{
    stroke-dashoffset:500;
    opacity:0;
  }
}

/* =========================================================
   MARKEERSTIFT
========================================================= */

.highlight-wrapper{
  position:relative;
  display:inline-block;
  z-index:1;
}

.highlight-wrapper svg{
  position:absolute;

  left:-4px;
  top:50%;

  transform:translateY(-50%);

  width:calc(100% + 8px);
  height:1.8em;

  overflow:visible;
  pointer-events:none;

  z-index:-1;
}



.highlight-wrapper path{
  fill:none;
  stroke:#f5ec00;


  stroke-width:28;

  stroke-linecap:round;
  stroke-linejoin:round;

  opacity:.65;

  stroke-dasharray:520;
  stroke-dashoffset:520;

  
  animation:markerSwipe 16s ease-in-out infinite;



  /* belangrijk: zachte rand i.p.v. hard vector gevoel */
  filter: blur(0.6px);
}


.highlight-wrapper path.extra{
  stroke-width:34;
  opacity:0.25;
  filter: blur(1.2px);
  animation-delay:0.06s;
}






@keyframes markerJitter{
  0%   { transform: translateY(-50%) rotate(var(--r)); }
  25%  { transform: translateY(-50%) rotate(calc(var(--r) + 0.4deg)); }
  50%  { transform: translateY(-50%) rotate(calc(var(--r) - 0.3deg)); }
  75%  { transform: translateY(-50%) rotate(calc(var(--r) + 0.2deg)); }
  100% { transform: translateY(-50%) rotate(var(--r)); }
}

@keyframes markerSwipe{

  0%{
    stroke-dashoffset:500;
    opacity:0;
  }

  8%{
    opacity:.75;
  }

  22%{
    stroke-dashoffset:0;
    opacity:.75;
  }

  72%{
    stroke-dashoffset:0;
    opacity:.75;
  }

  100%{
    stroke-dashoffset:500;
    opacity:0;
  }
}