/*@import url("https://use.typekit.net/nht1vdt.css");


font-family: "puffin-display-soft", sans-serif;
font-weight: 400;
font-style: normal;

font-family: "puffin-display-soft", sans-serif;
font-weight: 400;
font-style: italic;

font-family: "puffin-display-soft", sans-serif;
font-weight: 600;
font-style: normal;

font-family: "puffin-display-soft", sans-serif;
font-weight: 600;
font-style: italic;

kleuren:
gray:     554f4f    rgb(85,79,79)
oranje:    f06329    rgb(240,99,41)
blauw:     141478    rgb(20,20,120)
muted      f5f1f1   rgb(245,241,241)
*/
:root {
  --color-gray: #554f4f;
  --color-orange: #f06329;
  --color-blue: #141478;
  --color-muted: #f5f1f1;
  --color-green: #65aa47;
  --color-lightblue: #009fe3;
  --color-purple: #ba0f99;
}


html {
  font-size: clamp(15px, 1.5vw, 20px);
}

.hero>div.uk-section {
  background-image: none !important;
}

.tm-page-container .tm-page {
  background: #fff;
}

/*********************/
/****     HEROS     **/
/*********************/
.hero,
.banner_left,
.banner_right {
  position: relative;
}

.hero .hero_bg {
  position: relative;
  width: 100%;
  aspect-ratio: 2/1;
  background-size: cover;
  background-position: center;
}

.hero>div.uk-section>div {
  position: relative;
  z-index: 2;
}

.banner_left.uk-section-muted::after,
.banner_right.uk-section-muted::after {
  background-color: var(--color-muted);
}

.banner_left.uk-section-primary::after,
.banner_right.uk-section-primary::after {
  background-color: var(--color-orange);
}

.banner_left.uk-section-secondary::after,
.banner_right.uk-section-secondary::after {
  background-color: var(--color-blue);
}

.banner_left>div>div,
.banner_right>div>div {
  position: relative;
  z-index: 1;
}

/*********************/
/****     CARDS     **/
/*********************/
.icon_title .el-title {
  position: relative;
  padding-left: 40px;
}

.icon_title .uk-card .el-image.uk-icon {
  position: absolute;
  transform: translateY(0px);
}

.icon_title .uk-card .el-image.uk-icon svg {
  width: 30px;
  height: auto;
}

/*********************/
/****      NAV      **/
/*********************/
.uk-navbar-item,
.uk-navbar-nav>li>a,
.uk-navbar-toggle {
  font-size: .9rem;
}

.uk-navbar-right .uk-navbar-item {
  margin-top: -40px;
  margin-bottom: 0px;
  padding: 0;
  align-items: flex-start;
}

.uk-navbar-right .uk-navbar-item ul {
  border: solid var(--color-orange);
  border-width: 0 2px 2px 2px;
  border-radius: 0 0 12px 12px;
}

.uk-navbar-right .uk-navbar-item ul>li:not(:last-child) {
  border-bottom: solid 2px var(--color-orange);
}

.uk-navbar-right .uk-navbar-item ul>li>a {
  padding: 4px 20px;
  color: var(--color-orange);
  column-gap: .6em;
  font-size: .9rem;
}

.uk-navbar-right .uk-navbar-item ul>li>a:hover {
  color: var(--color-blue);
}

.dorpdown_nav_column ul {
  column-count: 2;
  column-gap: 4rem;
}

/* Only top-level items participate in columns */
.dorpdown_nav_column ul>li {
  break-inside: avoid;
}

/* Sub-navigation must NOT be part of columns */
.dorpdown_nav_column ul ul {
  column-count: 1;
}

.mob_topnav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3vw;
}

.mob_topnav ul li {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mob_topnav ul li a {
  margin: 0;
  border: none;
  overflow: visible;
  font: inherit;
  text-transform: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  transition: 0.05s ease-in-out;
  transition-property: color, background-color, background-position, background-size, border-color, box-shadow;
  font-weight: 400;
  background-origin: border-box;
  background-color: #FFF;
  color: #F06329;
  box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.1);
  padding: 0 15px;
  line-height: 30px;
  font-size: 0.8rem;
  border-radius: 8px;
  display: inline-flex;
  justify-content: center;
  white-space: nowrap
}

.uk-nav-secondary {
  list-style: disc;
}

/*********************/
/****   Buttons  **/
/*********************/
.my_buttons_mobile {
  position: fixed;
  bottom: 0;
  width: 100%;
  box-shadow: 0 -3px 5px 0 rgba(0, 0, 0, .4) !important;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.my_buttons_mobile.button_visible {
  opacity: 1;
  z-index: 5;
}

/*********************/
/****   correction  **/
/*********************/
.uk-logo {
  width: clamp(220px, 26vw, 450px);
}

.uk-card img {
  border-radius: 12px;
}


.uk-section-default+.uk-section-muted {
  border-top: none;
}

.uk-section-muted+.uk-section-default,
.uk-section-muted+style+.uk-section-default {
  border-top: none;
}

.with_animation {
  margin-top: 100px;
}

.no-border .uk-card img {
  border-radius: 0;
}

*+blockquote {
  padding: 1rem;
  background: var(--color-muted);
  border-radius: 12px;
}

.filters select {
  width: auto;
  padding-right: 35px !important;
  cursor: pointer;
}

.filters .el-nav.uk-subnav {
  display: none;
}

footer a {
  text-decoration: none;
}

.grecaptcha-badge {
  visibility: hidden;
  display: none;
}

.uk-nav-tertiary>li>a {
  padding: 0 0 16px 0;
}

/*********** special icons *********/
.blok_icon {
  position: absolute;
  right: 0;
  top: 0;
  color: #fff;
}

.icon_arrow .uk-icon {
  position: absolute;
  right: 0;
  top: 0;
  color: #fff;
}
.icon_arrow .el-item > a{
  overflow: hidden;
}


/* .icon_arrow{
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" width="40" height="40" aria-hidden="true"><path fill-rule="evenodd" d="M4 8a.5.5 0 01.5-.5h5.793L8.146 5.354a.5.5 0 11.708-.708l3 3a.5.5 0 010 .708l-3 3a.5.5 0 01-.708-.708L10.293 8.5H4.5A.5.5 0 014 8"></path></svg>');
} */

.blok_icon>span, .icon_arrow .uk-icon>svg {
  transform: rotate(-45deg);
}

.blok_icon.purple, .purple .uk-icon {
  background-color: var(--color-purple);
}

.blok_icon.green, .green .uk-icon {
  background-color: var(--color-green);
}

.blok_icon.lightblue, .lightblue .uk-icon {
  background-color: var(--color-lightblue);
}

.blok_icon.orange, .orange .uk-icon {
  background-color: var(--color-orange);
}

.blok_icon.blue, .blue .uk-icon {
  background-color: var(--color-blue);
}


/************ teamleden correction *****/
/* style for divs with id's starting with js- */
/* [id^="js-"] {
  display: flex;
  align-items: flex-start;
}

.teamlid_modal {
  margin-top: auto !important;
  margin-bottom: auto !important;
  position: relative !important;
  margin: auto !important;
} */

/*********************/
/****   resize media  **/
/*********************/
@media (min-width: 640px) {
  *+blockquote {
    padding: 2rem 5rem;
    border-radius: 500px;
  }
}

@media (min-width: 960px) {
  *+blockquote {
    padding: 2rem 6rem;
  }

  .hero .hero_intro {
    min-height: 300px;
  }

  .hero .hero_bg {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 55%;
    background-size: cover;
    background-position: right center;
    transition: background-image 1s ease-in-out;
  }

  .hero>div.uk-section {
    background-image: none !important;
  }

  /************************** START animatie ***/
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-orange);
    z-index: 0;

    transform-origin: left center;
    transform: scaleX(1);
    /* start: volledig gevuld */
    will-change: transform;
  }

  .heromuted::after {
    background: var(--color-muted);
  }


  /* start de “reverse loading” als class gezet is */
  .hero.loading::after {
    animation: drain-left 400ms ease-in forwards;
  }

  /* Stop animation after first run */
  .hero.loading.animation-done::after {
    animation: none !important;
    opacity: 0;
    transform: scaleX(0);
  }

  @keyframes drain-left {
    0% {
      transform: scaleX(1);
      opacity: 1;
    }

    60% {
      transform: scaleX(0.6);
      opacity: 1;
      /* nog geen fade */
    }

    100% {
      transform: scaleX(0);
      opacity: 0;
      /* fade start na 50% */
    }
  }

  /************************** END animatie ***/

  .hero>div.uk-section::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 45%;
    transform: translateX(-50%);
    background: var(--color-orange);
    height: 100%;
    border-radius: 1000px;
    aspect-ratio: 1 / 1;
    z-index: 1;
  }

  .hero.uk-section-muted>div.uk-section::after {
    background: var(--color-muted);
  }
}

@media (min-width: 960px) and (max-width: 1199px) {
  :not(.uk-sticky-below)>.uk-navbar-container:not(.uk-navbar) {
    padding-top: 40px;
  }

  .uk-navbar-right .uk-navbar-item {
    margin-top: -40px;
  }
}

@media (min-width: 1500px) {

  .uk-navbar-item,
  .uk-navbar-nav>li>a,
  .uk-navbar-toggle {
    min-height: 80px;
    font-size: 1rem;
  }

  .uk-navbar-right .uk-navbar-item ul>li>a {
    padding: 4px 30px;
    color: var(--color-orange);
    /* column-gap: .6em; */
    /* font-size: 1rem; */
  }

  .banner_left::before,
  .banner_right::before {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    aspect-ratio: 1 / 1;
    background: #fff;
  }

  .banner_right::before {
    left: initial;
    right: 0;
  }

  .banner_left::after,
  .banner_right::after {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    border-radius: 1000px 0 0 1000px;
    top: 0;
    left: 0;
    aspect-ratio: 1 / 2;
    /* transform: scaleX(-1); */
    transform: translateX(100%);
    z-index: 0;
  }

  .banner_right::after {
    left: initial;
    right: 1px;
    border-radius: 0 1000px 1000px 0;
    transform: translateX(-100%);
  }

}

@media (min-width: 1500px) and (max-width: 1799px) {

  .banner_left::after {
    aspect-ratio: 1 / 1;
    transform: translateX(3vw);
  }

  .banner_right::after {
    aspect-ratio: 1 / 1;
    transform: translateX(-3vw);
  }
}

.uk-nav-default .inloggen {
  color: #fff !important;
  background-color: var(--color-orange) !important;
}

.uk-text-white {
  color: #fff !important;
}

.no-border,
.no-border img,
.no-border .uk-card img {
  border-radius: 0 !important;
}

.uk-padding-xsmall {
  padding: 0.5rem !important;
}