/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

/*.eye-header-block { min-height: 200px !important; position: relative; top: 100px; }*/
/*.eye-hero-tekst-correctie {margin-bottom: -100px;}*/
/*.eye-column-agenda-center {*/

/*    border-left: 2px solid #BBBBBB;*/
/*    border-right: 2px solid #BBBBBB;*/
/*}*/

/*.eye-image-w100 {*/

/*    background-size: contain !important;*/
/*}*/

/*p > a,*/
/*.eye-tekst-link {*/

/*    border-bottom: 2px solid #3093DE;*/
/*}*/

/*.eye-agenda-blok-blue {*/
/*    margin-bottom : 0!important;*/
/*}*/

/*.eye-agenda-blok-blue .content-wrapper-background {*/

/*    margin-top: 40px;*/
/*    padding: 10px;*/
/*    padding-left: 32px;*/
/*}*/

/*.eye-agenda-blok-blue  .fontawesome-icon:before {*/
/*    transition: none;*/
/*    position: absolute;*/
/*    top: 27px;*/
/*    font-size: 30px;*/
/*    left: 0;*/
/*}*/

/*.eye-agenda-blok-blue-title {*/
/*    text-align: left;*/
/*    font-size: 18px;*/
/*    color: #ffffff;*/
/*    margin-bottom: 0!important;*/
/*}*/

/*.eye-agenda-blok-blue > .fusion-column {*/
/*    margin-bottom: 0px!important;*/
/*}*/

/*.menu-text {*/
/*    text-transform: uppercase;*/
/*}*/

/*.eye-agenda-column {*/
/*    margin-bottom: 40px!important;*/
/*}*/

/*@media only screen and (max-width: 1025px) {*/
/*    .eye-column-agenda-center {*/
/*        border-left: 2px solid transparent!important;*/
/*        border-right: 2px solid transparent!important;*/
/*        border-top: 2px solid #BBBBBB;*/
/*        border-bottom: 2px solid #BBBBBB;*/
/*        padding-top: 40px;*/
/*        padding-bottom: 40px;*/
/*    }*/

/*    .eye-agenda-blok-blue > .fusion-column {*/
/*        margin-bottom: 0px!important;*/
/*    }*/

/*}*/

#popmake-8901 .pum-content p strong {
  font-weight: bold !important;
}

.pum-theme-8894 .pum-content + .pum-close,
.pum-theme-enterprise-blue .pum-content + .pum-close {
  right: 28px !important;
  top: 28px !important;
}

.bg-hexagon-1,
.bg-hexagon-2,
.bg-hexagon-3,
.bgt-hexagon-1,
.bgt-hexagon-2 {
  position: relative;
}

.bg-hexagon-1::before {
  content: "";
  position: absolute;
  top: 15rem;
  left: 3rem;
  width: 400px;
  height: 400px;
  opacity: 0.15;
  background-image: url("img/hexagon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}
.bg-hexagon-1::after {
  content: "";
  position: absolute;
  top: 60rem;
  right: 0;
  width: 500px;
  height: 500px;
  opacity: 0.15;
  background-image: url("img/hexagon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}

@media screen and (max-width: 992px) {
  .bg-hexagon-1::before {
    position: absolute;
    top: 10rem;
    left: 0;
    width: 300px;
    height: 300px;
    opacity: 0.15;
  }

  .bg-hexagon-1::after {
    top: 100rem;
    right: 0;
    left: 0;
    width: 350px;
    height: 350px;
  }
}

/* Hexagon 2 */
.bg-hexagon-2::before {
  content: "";
  position: absolute;
  top: -23rem;
  right: 2rem;
  width: 400px;
  height: 400px;
  opacity: 0.15;
  background-image: url("img/hexagon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}

@media screen and (max-width: 992px) {
  .bg-hexagon-2::before {
    position: absolute;
    top: -22rem;
    right: 0rem;
    width: 300px;
    height: 300px;
  }
}

/* Hexagon 3 */
.bg-hexagon-3::after {
  content: "";
  position: absolute;
  top: -22rem;
  left: 4rem;
  width: 300px;
  height: 300px;
  opacity: 0.15;
  background-image: url("img/hexagon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}

.bgt-hexagon-1::before {
  content: "";
  position: absolute;
  top: 12rem;
  left: 3rem;
  width: 400px;
  height: 400px;
  opacity: 0.15;
  background-image: url("img/hexagon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}
.bgt-hexagon-1::after {
  content: "";
  position: absolute;
  top: 16rem;
  right: 0;
  width: 500px;
  height: 500px;
  opacity: 0.15;
  background-image: url("img/hexagon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 8.875rem;
}

body {
  timeline-scope: --act-material-audio-section-vt, --act-material-download-section-vt, --act-material-video-section-vt;
}

@keyframes indicate-act-material-audio-section {
  to {
    --act-material-audio-section-show: 1;
  }
}

@keyframes indicate-act-material-download-section {
  to {
    --act-material-download-section-show: 1;
  }
}

@keyframes indicate-act-material-video-section {
  to {
    --act-material-video-section-show: 1;
  }
}

.act-material {
  width: 100%;
  .act-material-header {
    display: flex;
    padding-inline: 0.9375rem;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    @media screen and (max-width: 800px) {
      gap: 0.5rem;
      margin-bottom: 2.5rem;
    }
    .search-wrapper {
      position: relative;
      display: inline-flex;
      padding: 0.34375rem 1rem;
      align-items: center;
      gap: 0.5rem;
      background-color: #f2f2f2;
      border-radius: 100vmax;
      @media screen and (max-width: 800px) {
        width: 100%;
      }
      input {
        background-color: transparent;
        border: none;
        outline: none;
        padding: 0;
        margin: 0;
        font-size: 1rem;
        font-weight: 400;
        color: var(--body_typography-color);
        text-overflow: ellipsis;
      }
      &:before {
        content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuNSAxM0M0LjY4MzMzIDEzIDMuMTQ2IDEyLjM3MDcgMS44ODggMTEuMTEyQzAuNjMgOS44NTMzMyAwLjAwMDY2NzE5NiA4LjMxNiA1LjI5MTAxZS0wNyA2LjVDLTAuMDAwNjY2MTM4IDQuNjg0IDAuNjI4NjY3IDMuMTQ2NjcgMS44ODggMS44ODhDMy4xNDczMyAwLjYyOTMzMyA0LjY4NDY3IDAgNi41IDBDOC4zMTUzMyAwIDkuODUzIDAuNjI5MzMzIDExLjExMyAxLjg4OEMxMi4zNzMgMy4xNDY2NyAxMy4wMDIgNC42ODQgMTMgNi41QzEzIDcuMjMzMzMgMTIuODgzMyA3LjkyNSAxMi42NSA4LjU3NUMxMi40MTY3IDkuMjI1IDEyLjEgOS44IDExLjcgMTAuM0wxNy4zIDE1LjlDMTcuNDgzMyAxNi4wODMzIDE3LjU3NSAxNi4zMTY3IDE3LjU3NSAxNi42QzE3LjU3NSAxNi44ODMzIDE3LjQ4MzMgMTcuMTE2NyAxNy4zIDE3LjNDMTcuMTE2NyAxNy40ODMzIDE2Ljg4MzMgMTcuNTc1IDE2LjYgMTcuNTc1QzE2LjMxNjcgMTcuNTc1IDE2LjA4MzMgMTcuNDgzMyAxNS45IDE3LjNMMTAuMyAxMS43QzkuOCAxMi4xIDkuMjI1IDEyLjQxNjcgOC41NzUgMTIuNjVDNy45MjUgMTIuODgzMyA3LjIzMzMzIDEzIDYuNSAxM1pNNi41IDExQzcuNzUgMTEgOC44MTI2NyAxMC41NjI3IDkuNjg4IDkuNjg4QzEwLjU2MzMgOC44MTMzMyAxMS4wMDA3IDcuNzUwNjcgMTEgNi41QzEwLjk5OTMgNS4yNDkzMyAxMC41NjIgNC4xODcgOS42ODggMy4zMTNDOC44MTQgMi40MzkgNy43NTEzMyAyLjAwMTMzIDYuNSAyQzUuMjQ4NjcgMS45OTg2NyA0LjE4NjMzIDIuNDM2MzMgMy4zMTMgMy4zMTNDMi40Mzk2NyA0LjE4OTY3IDIuMDAyIDUuMjUyIDIgNi41QzEuOTk4IDcuNzQ4IDIuNDM1NjcgOC44MTA2NyAzLjMxMyA5LjY4OEM0LjE5MDMzIDEwLjU2NTMgNS4yNTI2NyAxMS4wMDI3IDYuNSAxMVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPg==);
        width: 18px;
        height: 18px;
      }
    }
    .dropdown {
      position: relative;
      &:hover {
        .btn-dropdown {
          background-color: #285dbe;
        }
      }
      @media screen and (max-width: 800px) {
        width: 100%;
      }
      &:has(.btn-dropdown[aria-expanded="true"]) {
        .dropdown-menu {
          opacity: 1;
          visibility: visible;
        }
      }
      .btn-dropdown {
        display: flex;
        width: 100%;
        min-width: 10.324375rem;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background-color: #3093de;
        color: #fff;
        border: 0;
        border-radius: 1.25rem;
        font-family: var(--body_typography-font-family);
        font-size: var(--base-font-size);
        line-height: var(--base-line-height);
        cursor: pointer;
        transition: all 0.2s ease;
        outline: 0;
        &.active {
          background-color: #285dbe;
        }
        &[aria-expanded="true"] {
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
          &:after {
            rotate: 180deg;
          }
        }
        &:after {
          content: "";
          background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDE0IDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDFMNyA3TDEzIDEiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==);
          width: 0.875rem;
          height: 0.5rem;
          pointer-events: none;
          transition: rotate 0.2s ease;
        }
      }
      .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #fff;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        z-index: 1000;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s ease;
        .dropdown-item {
          display: block;
          width: 100%;
          padding: 0.5rem 1rem;
          color: var(--body_typography-color);
          text-align: left;
          text-decoration: none;
          font-family: var(--body_typography-font-family);
          font-size: var(--base-font-size);
          line-height: var(--base-line-height);
          font-weight: 400;
          border: 0;
          background-color: transparent;
          cursor: pointer;
          &:hover,
          &.active {
            background-color: #f2f2f2;
          }
        }
      }
    }
  }
  .act-material-nav-wrapper {
    position: sticky;
    top: 8.875rem;
    @media screen and (max-width: 800px) {
      display: none;
    }
    .act-material-nav {
      display: grid;
      .indicator-bar {
        animation: indicate-act-material-audio-section, indicate-act-material-download-section, indicate-act-material-video-section;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: --act-material-audio-section-vt, --act-material-download-section-vt, --act-material-video-section-vt;
        animation-range: entry exit;
        .indicator {
          position: absolute;
          top: calc(anchor(--act-material-audio-section top) + ((anchor(--act-material-download-section top) - anchor(--act-material-audio-section top)) * var(--act-material-download-section-show, 0)) + ((anchor(--act-material-video-section top) - anchor(--act-material-download-section top)) * var(--act-material-video-section-show, 0)));
          bottom: calc(anchor(--act-material-audio-section bottom) - ((anchor(--act-material-audio-section bottom) - anchor(--act-material-download-section bottom)) * var(--act-material-download-section-show, 0)) - ((anchor(--act-material-download-section bottom) - anchor(--act-material-video-section bottom)) * var(--act-material-video-section-show, 0)));
          border-radius: 5rem;
          width: 0.25rem;
          background: #3093de;
          border-radius: 0.25rem;
          transition: all 0.2s linear;
          z-index: -1;
        }
      }
      .act-material-nav-item {
        padding: 0.25rem 0rem 0.25rem 0.75rem;
        color: var(--body_typography-color);
        font-weight: 700;
        &:hover {
          color: #3093de;
        }
        &[href="#act-material-audio-section"] {
          anchor-name: --act-material-audio-section;
          animation-timeline: --act-material-audio-section-vt;
        }
        &[href="#act-material-download-section"] {
          anchor-name: --act-material-download-section;
          animation-timeline: --act-material-download-section-vt;
        }
        &[href="#act-material-video-section"] {
          anchor-name: --act-material-video-section;
          animation-timeline: --act-material-video-section-vt;
        }
      }
    }
  }
  .act-material-sections {
    display: grid;
    gap: 2.5rem;
    @media screen and (max-width: 800px) {
      width: 100%;
    }
  }
  .act-material-section {
    display: grid;
    gap: 1rem;
    &#act-material-audio-section {
      view-timeline-name: --act-material-audio-section-vt;
    }

    &#act-material-download-section {
      view-timeline-name: --act-material-download-section-vt;
    }

    &#act-material-video-section {
      view-timeline-name: --act-material-video-section-vt;
    }
    h2 {
      margin-bottom: 0;
    }
  }
  .act-material-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 100vmax;
    color: #fff;
    background-color: #3093de;
    &:after {
      content: "";
      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMTJMMyA3TDQuNCA1LjU1TDcgOC4xNVYwSDlWOC4xNUwxMS42IDUuNTVMMTMgN0w4IDEyWk0yIDE2QzEuNDUgMTYgMC45NzkzMzMgMTUuODA0MyAwLjU4OCAxNS40MTNDMC4xOTY2NjYgMTUuMDIxNyAwLjAwMDY2NjY2NyAxNC41NTA3IDAgMTRWMTFIMlYxNEgxNFYxMUgxNlYxNEMxNiAxNC41NSAxNS44MDQzIDE1LjAyMSAxNS40MTMgMTUuNDEzQzE1LjAyMTcgMTUuODA1IDE0LjU1MDcgMTYuMDAwNyAxNCAxNkgyWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==);
      width: 1rem;
      height: 1rem;
    }
    &:hover {
      background-color: #285dbe;
    }
    @media screen and (max-width: 576px) {
      width: 2.5rem;
      height: 2.5rem;
      padding: 0;
      span {
        display: none;
      }
    }
  }
  .act-material-text {
    font-weight: 400;
  }
  .act-material-audio-items {
    display: grid;
    gap: 0.5rem;
    .act-material-item {
      display: flex;
      padding: 1rem;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem 1rem;
      flex-wrap: wrap;
      border-radius: 0.5rem;
      background-color: #f2f2f2;
      .act-material-item-audio {
        display: flex;
        width: 100%;
        border-radius: 0.5rem;
        overflow: hidden;
        audio {
          width: 100%;
          border-radius: 0.5rem;
        }
      }
    }
  }
  .act-material-download-items {
    display: grid;
    gap: 0.5rem;
    .act-material-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem;
      gap: 0.5rem 1rem;
      flex-wrap: wrap;
      background-color: #f2f2f2;
      color: var(--body_typography-color);
      border-radius: 0.5rem;
      overflow: hidden;
    }
  }
  .act-material-video-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    @media screen and (max-width: 991px) {
      grid-template-columns: 1fr;
    }
    .act-material-item {
      display: flex;
      border-radius: 0.5rem;
      overflow: hidden;
      iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
      }
    }
  }
  .act-material-item {
    &.hidden,
    &.hidden-category {
      display: none;
    }
  }
  .act-material-no-results {
    padding: 1rem;
    background-color: #f2f2f2;
    border-radius: 0.5rem;
    grid-column-start: 1;
    grid-column-end: 3;
  }
}