/* 
Theme Name: Sunny Werken Bij
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*--------------------------------------------------------------
## TABLE OF CONTENTS
----------------------------------------------------------------
- ROOT
- TYPOGRAPHY
- BUTTONS
- IMAGES
- HEADER OPMAAK
- FOOTER OPMAAK
- GLOBAL OPMAAK
- CUSTOM CONTAINER OPMAAK
- CUSTOM OPMAAK
- ELEMENTOR WIDGETS OPMAAK
- CUSTOM PLUGIN OPMAAK

----------------------------------------------------------------
## 
--------------------------------------------------------------*/




/*--------------------------------------------------------------
## ROOT
--------------------------------------------------------------*/

/* selection color */
::-moz-selection { /* Code for Firefox */
    color: #fff;
    background: var(--e-global-color-primary);
  }::selection {
    color: #fff;
    background: var(--e-global-color-primary);
  }






/*--------------------------------------------------------------
## TYPOGRAPHY
--------------------------------------------------------------*/


a:focus {outline:none!important}

/* CUSTOM TYPOGRAPHY CLASSES */
/* h1, h2, h3, h4, h5, h6, p, div {
    font-family: "Calibri" !important;
} */

/* h1 {
    font-size: 64px !important;
}

h2 {
    font-size: 40px !important;
}

h3 {
    font-size: 32px !important;
    color: var(--e-global-color-accent) !important;
}

h4 {
    font-size: 20px !important;
} */

/* p,  .elementor-widget-text-editor .elementor-widget-container {
    font-size: 18px !important;
    line-height: 180% !important;
    font-weight: 300 !important;
} */


/* CUSTOM TYPOGRAPY RESP */

@media (min-width:1200px) {
    .header-titel h1 {
        font-size: 110px !important;
        line-height: 2.8rem !important;   
    }
}
/* @media (min-width:768px) and (max-width:1024px) {
    h1 {
        font-size: 58px !important;
    }
    h2 {
        font-size: 52px !important;
    }
    h3 {
        font-size: 28px !important;
        color: var(--e-global-color-accent) !important;
    }
    h4 {
        font-size: 18px !important;
    }
} */
/* @media (max-width:767px) {
    h1 {
        font-size: 52px !important;
    }
    h2 {
        font-size: 33px !important;
    }
    h3 {
        font-size: 26px !important;
        color: var(--e-global-color-accent) !important;
    }
    h4 {
        font-size: 17px !important;
    }

    .header-titel h1 {
        font-size: 47px !important;
        line-height: 100% !important;   
    }
    
    p,  .elementor-widget-text-editor .elementor-widget-container {
        font-size: 16px !important;
    } 


} */

/* CUSTOM TYPOGRAPHY CLASSES */
.text--subtitle p, .text--subtitle .elementor-widget-container{
    font-weight: 900 !important;
    font-size: 24px !important;
}
.elementor-widget-divider + .text--subtitle {
    margin-top: -8px;
}

.elementor-divider-separator {
    border-radius: 30px;
}
.text--vac-opsomming p {
    position: relative;
    padding-left: 36px;
    font-size: 20px;
    font-weight: 900;
}
.text--vac-opsomming p::before {
    position: absolute;
    top: -8px;
    left: 0;    
    content: "\f00c"; /* Unicode-teken voor het vinkje */
    font-family: "Font Awesome 5 Free"; /* De juiste lettertypefamilie van Font Awesome */
    font-size: 24px;
    font-weight: 900; /* De juiste lettertypevariant van het vinkje */
    margin-right: 5px; /* Optionele marge tussen het vinkje en de tekst */
}
@media (max-width:767px) {
    .text--vac-opsomming p::before {
        top: 0;
    }
}
/* opsomming in groen vlak */
.con--green .text--vac-opsomming .elementor-widget-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, max(100%, 1fr))); /* Minimale breedte van 320px, automatisch aanpassend */
    grid-column-gap: 32px;
}
.con--green .text--vac-opsomming p {
    font-size: 18px;
    font-weight: 400;
}
.con--green .text--vac-opsomming p::before {
}


/* CUSTOM TYPOGRAPHY RESP */
@media (max-width:767px) {
    .text--subtitle p, .text--subtitle .elementor-widget-container {
        font-weight: 900 !important;
        font-size: 21px !important;
        line-height: 1.7rem !important;
        margin-top: 10px;
    }
    .text--vac-opsomming {
        font-size: 18px;
    }
    .text--vac-opsomming p::before {
        font-size: 20px;
    }
}


/*--------------------------------------------------------------
## BUTTONS
--------------------------------------------------------------*/

.elementor-button {
    /* font-family: "Calibri" !important; */
}
.elementor-button.elementor-size-sm:hover path[class*="cls-1"],
.elementor-button.elementor-size-sm:focus path[class*="cls-1"],
.elementor-button.elementor-size-sm:active path[class*="cls-1"] {
    fill: #fff;
}

/* btn white */
.btn--white .elementor-button.elementor-size-sm,
.btn--white .elementor-button.elementor-size-sm:visited,
.dropdown-btn-cont .btn--white {
	background-color: #fff;
    border-color: #fff;
    color: var(--e-global-color-primary);
    font-size: 20px;
}

.btn--white .elementor-button.elementor-size-sm:hover,
.btn--white .elementor-button.elementor-size-sm:focus,
.btn--white .elementor-button.elementor-size-sm:active,
.dropdown-btn-cont .btn--white:hover,
.dropdown-btn-cont .btn--white:focus,
.dropdown-btn-cont .btn--white:active {
    background-color: var(--e-global-color-primary);
    border-color: var(--e-global-color-primary);
    color: #fff;
}

.btn--white  .elementor-button.elementor-size-sm .elementor-button-icon svg {
    fill: var(--e-global-color-primary);
}

.btn--white  .elementor-button.elementor-size-sm:hover .elementor-button-icon svg,
.btn--white  .elementor-button.elementor-size-sm:focus .elementor-button-icon svg,
.btn--white  .elementor-button.elementor-size-sm:active .elementor-button-icon svg {
    fill: #fff !important;
}

.btn--white .elementor-button.elementor-size-sm path[class*="st1"] {
    transition: all 300ms ease;
}

.btn--white .elementor-button.elementor-size-sm:hover path[class*="st1"],
.btn--white .elementor-button.elementor-size-sm:focus path[class*="st1"],
.btn--white .elementor-button.elementor-size-sm:active path[class*="st1"] {
    fill: #fff !important;
    transition: all 300ms ease;
}

/* btn level 2 */
.btn-lvl2 .elementor-button.elementor-size-sm,
.dropdown-btn-cont .btn-lvl2 {
    font-size: 16px;
    font-weight: 800;
	background-color: transparent;
    border: 2px solid var(--e-global-color-primary);
    padding: 12px 24px;
}
.btn-lvl2 .elementor-button.elementor-size-sm .icon-suv {
    font-size: 22px;
}
.btn-lvl2 .elementor-button.elementor-size-sm:hover,
.btn-lvl2 .elementor-button.elementor-size-sm:focus,
.btn-lvl2 .elementor-button.elementor-size-sm:active,
.dropdown-btn-cont .btn-lvl2:hover,
.dropdown-btn-cont .btn-lvl2:focus,
.dropdown-btn-cont .btn-lvl2:active {
    background-color: var(--e-global-color-primary);
    color: #fff;
}
.btn-lvl2 .elementor-button.elementor-size-sm:hover path[class*="cls-1"],
.btn-lvl2 .elementor-button.elementor-size-sm:focus path[class*="cls-1"],
.btn-lvl2 .elementor-button.elementor-size-sm:active path[class*="cls-1"] {
    fill: #fff !important;
}
/* btn level 2 in container green */
.con--green .btn-lvl2 .elementor-button.elementor-size-sm,
.con--green .btn-lvl2 .elementor-button.elementor-size-sm:visited {
    color: #fff;
    border: 2px solid #fff;
    padding: 12px 24px;
}
.con--green .btn-lvl2 .elementor-button.elementor-size-sm:hover,
.con--green .btn-lvl2 .elementor-button.elementor-size-sm:focus,
.con--green .btn-lvl2 .elementor-button.elementor-size-sm:active {
    background-color: #fff;
    color: var(--e-global-color-primary);
}
.con--green .btn-lvl2 .elementor-button.elementor-size-sm:hover .cls-1,
.con--green .btn-lvl2 .elementor-button.elementor-size-sm:focus .cls-1,
.con--green .btn-lvl2 .elementor-button.elementor-size-sm:active .cls-1,
.con--green-dark .btn-lvl2 .elementor-button.elementor-size-sm:hover .cls-1,
.con--green-dark .btn-lvl2 .elementor-button.elementor-size-sm:focus .cls-1,
.con--green-dark .btn-lvl2 .elementor-button.elementor-size-sm:active .cls-1 {
    fill: var(--e-global-color-primary) !important;
}

.btn-icon-big .elementor-button-icon {
    font-size: 24px !important;
    align-items: center;
    display: flex;
    margin-right: 8px !important;
    transition: all 300ms ease-in-out;
}

.btn-icon-big .elementor-size-sm:hover .elementor-button-icon {
    fill: #fff !important;
    transition: all 300ms ease-in-out;
}

.btn--yellow .elementor-size-sm .elementor-button-icon {
    fill: var(--e-global-color-primary) !important;
    transition: all 300ms ease-in-out;
}

.btn--yellow .elementor-size-sm:hover .elementor-button-icon,
.btn--yellow .elementor-size-sm:focus .elementor-button-icon,
.btn--yellow .elementor-size-sm:active .elementor-button-icon {
    fill: #fff !important;
    transition: all 300ms ease-in-out;
}

.elementor-button-content-wrapper {
    align-items: center;
}


/* btn level 2 wit */
.btn-lvl2white .elementor-button.elementor-size-sm,
.btn-lvl2white .elementor-button.elementor-size-sm:visited,
.btn-lvl2white .elementor-button.elementor-size-sm:active,
.dropdown-btn-cont .btn-lvl2white {
    font-size: 16px;
    font-weight: 800;
	background-color: transparent;
    border: 2px solid #fff;
    padding: 12px 24px;
    color: #fff !important;
}
.btn-lvl2white .elementor-button.elementor-size-sm:hover,
.btn-lvl2white .elementor-button.elementor-size-sm:focus,
.btn-lvl2white .elementor-button.elementor-size-sm:active,
.dropdown-btn-cont .btn-lvl2white:hover,
.dropdown-btn-cont .btn-lvl2white:focus,
.dropdown-btn-cont .btn-lvl2white:active {
    background-color: #fff;
    color: var(--e-global-color-primary) !important;
}

.btn-lvl2white .elementor-size-sm .elementor-button-icon {
    fill: #fff !important;
    transition: all 300ms ease-in-out;
}

.btn-lvl2white .elementor-size-sm:hover .elementor-button-icon,
.btn-lvl2white .elementor-size-sm:focus .elementor-button-icon,
.btn-lvl2white .elementor-size-sm:active .elementor-button-icon {
    fill: var(--e-global-color-primary) !important;
    transition: all 300ms ease-in-out;
}

@media (max-width:767px) {
    .btn-meer-weten a {
        min-width: 180px;
    }
    
}



/*--------------------------------------------------------------
## IMAGES
--------------------------------------------------------------*/






/*--------------------------------------------------------------
## HEADER
--------------------------------------------------------------*/
.elementor-location-header {
    position: fixed;
    z-index: 999;
    width: 100vw;
}
#header-block {
    height: 80px;
    overflow: visible;
}
#header-block:before {
    height: 120% !important;
    overflow: visible;
}
.vacatures-menu-item a.has-submenu {
    color: #fff !important;
}
.vacatures-menu-item a.has-submenu:before {
    content: "";
    position: absolute;
    width: 36%;
    height: 3px;
    background-color: #fff;
    left: 20px;
    bottom: 0;
    opacity: 1 !important;
    border-radius: 30px;
}
.mob-menu .vacatures-menu-item a.has-submenu:before {
    left: 0 !important;
}
.mob-menu .vacatures-menu-item .elementor-nav-menu--dropdown {
    position: relative !important;
    display: block;
    margin-bottom: 32px;
}
.mob-menu .vacatures-menu-item .elementor-nav-menu--dropdown .elementor-sub-item {
    padding-left: 12px !important;
}
ul.elementor-nav-menu--dropdown a {
    border-left: 0 !important;
}
/* menu */
.elementor-nav-menu .sub-arrow {
    margin-top: -12px !important;
}
.elementor-nav-menu--main .elementor-item.elementor-item-active:hover {
    color: #fff !important;
}
.elementor-nav-menu--main .elementor-item.elementor-item-active:hover::after {
    background-color: #fff !important;
}

/* Menu button */
/* mainmenu active */
.mainmenu-active {
    background: linear-gradient(90deg, var(--e-global-color-9a5f251) 0%, var(--e-global-color-secondary) 50%, var(--e-global-color-9a5f251) 100%);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.mainmenu-active .menu-item a, 
.mainmenu-active .logo-subtitel .elementor-heading-title {
    color: var(--e-global-color-primary ) !important;
    transition: all 300ms ease-in-out;
}
.mainmenu-active .elementor-nav-menu--dropdown {
    background: #fff !important;
}
.mainmenu-active .elementor-nav-menu--dropdown a {
    color: var(--e-global-color-primary) !important;
}
.mainmenu-active .vacatures-menu-item a.has-submenu:before {
    background-color: var(--e-global-color-primary ) !important;
}

.mainmenu-active:before {
    opacity: 0;
}
.mainmenu-active .contact-buttons i,
.mainmenu-active .menu-icon i {
    color: var(--e-global-color-primary ) !important;
    transition: all 300ms ease-in-out;
}
.mainmenu-active .elementor-nav-menu--main.e--pointer-underline .elementor-nav-menu .menu-item .elementor-item::after {
    background-color: var(--e-global-color-primary);
}

.logo-subtitel .elementor-heading-title {
    transition: all 300ms ease-in-out;
}
#header-block .menu-button-item a, 
.mainmenu-active .menu-button-item a{
    background-color: var(--e-global-color-accent);
    border-radius: 8px;
    height: 38px;
    align-self: center;
    margin-left: 18px !important;
    color: #fff !important;
}

#header-block {
    width: 100vw !important;
    min-width: 100vw !important;
}

.header-up {
    transform: translateY(-160px) !important;
    transition: all 300ms ease-in-out !important;
}


.mainmenu-active,
#header-block, 
.contact-buttons i,
.menu-icon i {
    transition: all 300ms ease-in-out;
}

.elementor-icon-wrapper {
    display: flex;
}

/* RESP MENU */
.mob-menu .menu-item-vacatures .elementor-nav-menu--dropdown {
    display: block !important;
    position: relative;
    width: 100%;
    color: var(--e-global-color-secondary);
}






/*--------------------------------------------------------------
## FOOTER
--------------------------------------------------------------*/
.elementor-location-footer .elementor-icon-list-text {
    text-decoration: underline !important;
    text-decoration-color: #fff !important;
}




/*--------------------------------------------------------------
## GLOBAL OPMAAK
--------------------------------------------------------------*/






/*--------------------------------------------------------------
## CUSTOM CONTAINER OPMAAK
--------------------------------------------------------------*/
/* CONTAINER YELLOW */
.con--yellow {
    background: var(--e-global-color-secondary);
    background: linear-gradient(45deg, var(--e-global-color-9a5f251) 0%, var(--e-global-color-secondary) 50%, var(--e-global-color-9a5f251) 100%); 
}
.con--yellow .elementor-widget-text-editor {
    color: var(--e-global-color-primary);
}
.con--yellow .elementor-widget-text-editor a {
    color: var(--e-global-color-primary);
    font-weight: 900;
    text-decoration: underline;
}
.con--yellow .elementor-widget-text-editor a:hover {
    color: var(--e-global-color-c538c21);
 }
.con--yellow .elementor-social-icons-wrapper .elementor-social-icon i {
    color: var(--e-global-color-primary);
}
.con--yellow .elementor-social-icons-wrapper .elementor-social-icon:hover i {
    color: var(--e-global-color-primary) !important;
}
/* CONTAINER GREEN */
.con--green {
    background: var(--e-global-color-primary);
}
.con--green .elementor-widget-text-editor,
.con--green .elementor-widget-heading .elementor-heading-title {
    color: #fff;
}
.con--green .elementor-widget-divider.elementor-widget-divider:not(.elementor-widget-divider--view-line_text):not(.elementor-widget-divider--view-line_icon) .elementor-divider-separator {
    border-color: #fff;
}

/* CONTAINER WITH OFFSET */
@media (min-width: 1025px) {
    .con--with-offset {
        padding-left: 25%;
    }
}

/* CONTAINER VACATURES LOOP */
@media (min-width: 768px) {
    .con--vac-loop,
    .vac-loop-text-wrapper.e-con {
        height: 100%;
    }
    .con--vac-loop .elementor-widget-button {
        margin-top: auto;
    }
}
.vac-loop-icon-wrapper .elementor-icon-list-item::after {
    position: absolute !important;
}
/* icons */
.vac-loop-icon-wrapper li {
    flex-direction: row;
    /* align-items: center !important; */
}
.vac-loop-icon-wrapper li .elementor-icon-list-icon {
    width: 28px;
}
.vac-loop-icon-wrapper .iconlist-standplaats .elementor-icon-list-icon svg {
    width: 24px;
    transform:translateY(-4px);
}
.vac-loop-icon-wrapper .iconlist-dienstverband .elementor-icon-list-icon svg {
    width: 16px;
    transform: translateY(-1px);
}
.vac-loop-icon-wrapper .iconlist-uren .elementor-icon-list-icon svg {
    width: 16px;
    transform:translateY(-2px);
}
/* .vac-loop-icon-wrapper li:nth-child(1) svg {
    width: 24px;
    transform:translateY(-4px);
}
.vac-loop-icon-wrapper li:nth-child(2) svg {
    width: 16px;
    transform: translateY(2px);
}
.vac-loop-icon-wrapper li:nth-child(3) svg {
    width: 16px;
    transform:translateY(-2px);
} */
.vac-loop-icon-wrapper .elementor-icon-list-item .elementor-icon-list-icon svg {
    padding: 0;
    margin: 0 !important;
}
/* text */
.vac-loop-icon-wrapper .elementor-icon-list-text {
    /* font-size: 18px; */
    font-weight: bold;
    /* margin: 0; */
    /* padding: 0 !important; */
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: center; */
    /* margin-top: -8px; */
}
.vac-loop-icon-wrapper .elementor-icon-list-text span {
    font-weight: 400;
    margin-top: -12px;
}
/* container vacatures loop resp */
/* @media (min-width:768px) and (max-width:1200px) {
    .vac-loop-icon-wrapper .elementor-icon-list-text span {
        font-size: 14px;
        margin-top: -8px;
    }
    .vac-loop-icon-wrapper li:nth-child(1) svg {
        width: 40px;
    }
    .vac-loop-icon-wrapper li:nth-child(2) svg {
        width: 25px;
    }
    .vac-loop-icon-wrapper li:nth-child(3) svg {
        width: 25px;
    }
} */
/* @media (max-width: 767px) {
    .vac-loop-icon-wrapper .elementor-icon-list-text span {
        font-size: 12px;
        margin-top: -8px;
    }
    .vac-loop-icon-wrapper li:nth-child(1) svg {
        width: 40px;
    }
    .vac-loop-icon-wrapper li:nth-child(2) svg {
        width: 25px;
    }
    .vac-loop-icon-wrapper li:nth-child(3) svg {
        width: 25px;
    }
} */

/* CONTAINER MET AFBEELDING OVER GEHELE HOOGTE EN RECHTS UITGELIJND */
@media (min-width: 1269px) {
    .container--custom-padding > .e-con:first-child {
        padding: 64px 64px 64px calc((100vw - 1140px) / 2);

    }
}
@media (min-width: 1025px) and (max-width: 1268px) {
    .container--custom-padding > .e-con {
        padding: 64px;
    }
}
@media (max-width:1024px) {
    .container--custom-padding > .e-con {
        padding: 48px;
    }
}
@media (max-width:767px) {
    .container--custom-padding > .e-con {
        padding: 24px;
    }
}


/* OVER ONS TOGGLE OPMAAK */
/* toggle basic display settings */
body:not(.elementor-editor-active) .toggle-text-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

/* toggle item wrapper */
.toggle-item-wrapper {
    border-bottom: 1px solid var(--e-global-color-66d3f17);
    /* padding-bottom: 16px; */
}
/* toggle title */
.toggle-title {
    cursor: pointer;
}
.toggle-title::before {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: block;
    position: absolute;
    top: -10px;
    font-size: 20px;
    color: var(--e-global-color-primary);
    transform: scaleY(1);
    transition: transform ease-out 100ms;
}
.toggle-item-wrapper.show .toggle-title::before {
    transform: scaleY(-1);
}
.toggle-title .elementor-heading-title {
    padding-left: 32px;
    font-size: 20px;
}
/* toggle-text-wrapper */
.toggle-text-wrapper .elementor-element:last-child {
    margin-bottom: 32px;
}
/* toggle resp */
@media (max-width:767px) {
    .toggle-title::before {
        font-size: 20px;
    }
    .toggle-title .elementor-heading-title {
        font-size: 20px;
    }
}

@media (min-width:1024px) {
    .toggle-title:hover::after {
        content: 'Klik om te openen';
        color: #00847d;
        font-size: 13px;
        position: absolute;
        right: 0;
        top: 0;
        font-weight: 800;
    }
}





/* CONTAINER VACATURES - AFBEELDINGEN BLOK */
.con--vac-img-blok img {
    aspect-ratio: 9/6;
    object-fit: cover;
}

.content-padding-side {
    padding-left: 64px !important;
    padding-right: 64px !important;
}

@media (min-width:768px) and (max-width:1024px) {
    .content-padding-side {
        padding-left: 48px !important;
        padding-right: 48px !important;
    } 
}

@media (max-width:767px) {
    .content-padding-side {
        padding-left: 24px !important;
        padding-right: 24px !important;
    } 
}





/*--------------------------------------------------------------
## CUSTOM OPMAAK
--------------------------------------------------------------*/
/* WRAPPERS */
.wrapper-btns {
    width: fit-content;
}

.yt-play-button {
    transform: translate(-50%, -50%) !important;
    transition: all 300ms ease-in-out;
}

#video-container:hover .yt-play-button {
    transform: translate(-50%, -50%) scale(1.08) !important;
    transition: all 300ms ease-in-out;
}

#video-container:hover {
    cursor: pointer;
}

/* VIMEO VIDEO OPMAAK */
body:not(.elementor-editor-active) .wrapper-video .wrapper-video-title {
    bottom: 0;
    position: absolute;
    padding: 32px;
    gap: 8px;
    pointer-events: none;
    transition: opacity 1s ease-out;
}
.wrapper-video .wrapper-video-title.verbergen {
    opacity: 0;
}
.wrapper-video .elementor-custom-embed-image-overlay::before {
    content: '';
    background: #000;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.2;
    pointer-events: none;
    transition: opacity 1s ease-out;
}
.wrapper-video .elementor-custom-embed-image-overlay.verbergen::before {
    opacity: 0;
}


/* SLIDER WRAPPER HOME */
.container-slider-home .elementor-carousel-image {
    background-position: top;
}
.container-slider-home .swiper-wrapper .swiper-slide::after {
    content: '';
    display: block;
    background: rgba(0,0,0,0.2);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}
.container-subcontainer-slider-overlay {
    pointer-events: none;
}
.container-subcontainer-slider-overlay .elementor-widget-button {
    pointer-events: all;
}

/* OVER ONS FILTER BUTTONS */
/* hoogte issue oplossen */
.c--filter-wrapper > .e-con-inner,
.filterbuttons {
    display: contents;
}
.filterbuttons .elementor-widget-container{
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(135px, 1fr) );
    gap: 8px;
}
button.filterbtn {
    padding-top: 16px;
    padding-right: unset;
    padding-bottom: 16px;
    padding-left: unset;
    border: solid 2px #00847D;
    background-color: transparent !important;
    font-size: 16px !important;
    line-height: 1;
}
.filterbtn:hover {
    border: solid 2px #00847D;
    background-color: #00847D !important;
    color: #fff !important;
}
.filterbuttons .active {
    background-color: #00847D !important;
    color: #fff !important;
}



/*--------------------------------------------------------------
## ELEMENTOR WIDGETS OPMAAK
--------------------------------------------------------------*/
/* WIDGET SOCIAL ICONS */
.elementor-widget-social-icons.elementor-widget.elementor-element,
.elementor-widget-social-icons .elementor-widget-container,
.elementor-widget-social-icons .elementor-social-icons-wrapper {
    width: fit-content;
}
.sunny-slider .swiper-pagination-bullet {
    background: #fff !important;
    opacity: 1;
    transition: all 300ms ease-in-out;
}
.sunny-slider .swiper-pagination-bullet-active {
    background-color: #FFD938 !important;
    transform: scale(1.3);
    transition: all 300ms ease-in-out;
}
.sunny-slider .swiper-pagination {
    height: fit-content !important;
}

@media (max-width:768px) {
    .sunny-slider-loop-item {
        min-height: 400px;
    }

    .elementor-swiper-button {
        display: none !important;
    }

    .sunny-slider .swiper-pagination {
        display: flex;
        justify-content: end;
        padding-bottom: 10px;
        padding-right: 20px;
        top: 20px;
    }
}

@media (min-width:768px) {
    .sunny-slider  .sunny-slider-loop-item {
        min-height: 500px;
    }
}

@media (min-width:1200px) {
    .sunny-slider-loop-item {
        min-height: 600px;
    }
}

@media (min-width:1500px) {
    .sunny-slider-loop-item {
        min-height: 650px;
    }
}

.slider-titel:after {
    content: "";
    position: absolute;
    width: 110px;
    height: 6px;
    background-color: #FFD938;
    left: 0px;
    bottom: -10px;
    opacity: 1 !important;
    border-radius: 30px;
}

.sunny-slider-loop-item {
    background-size: cover !important;
}


/* Wrapper boxen */
.wrapper-icon-boxen {
    justify-content: space-between;
}

.wrapper-icon-boxen > .elementor-element {
    flex: 1;
}

.parent-icon-boxen > .e-con-inner{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* grid-template-rows: repeat(1fr); */
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }
    
.parent-icon-boxen .div1 { grid-area: 1 / 1 / 2 / 2; }
.parent-icon-boxen .div2 { grid-area: 1 / 2 / 2 / 3; }
.parent-icon-boxen .div3 { grid-area: 1 / 3 / 2 / 4; }
.parent-icon-boxen .div4 { grid-area: 1 / 4 / 2 / 5; }
.parent-icon-boxen .div5 { grid-area: 1 / 5 / 2 / 6; }
.parent-icon-boxen .div6 { grid-area: 1 / 6 / 2 / 7; }

.grid-div {
    padding: 8px;
}
.parent-icon-boxen .cls-1 {
    fill: var(--e-global-color-primary);
}
@media (min-width:768px) {
    .grid-div {
        border-right: solid 2px var(--e-global-color-primary);
    } 

    .grid-div:first-child {
        border-left: solid 2px var(--e-global-color-primary);
    } 
}
@media (max-width:1100px) {

    .grid-div {
        margin-bottom: 24px;
    }

    .div4 {
        border-left: solid 2px var(--e-global-color-primary);
    } 
}

@media (max-width:768px) {

    .grid-div {
        border-right: solid 0px var(--e-global-color-primary);
        border-left: solid 0px var(--e-global-color-primary);
        border-bottom: solid 2px var(--e-global-color-primary);
        margin-bottom: 0px;
        padding-bottom: 20px;
    } 
}


@media (max-width:1100px) {
    .parent-icon-boxen > .e-con-inner {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        align-items: center;
        }
        
    .parent-icon-boxen .div1 { grid-area: 1 / 1 / 2 / 2; }
    .parent-icon-boxen .div2 { grid-area: 1 / 2 / 2 / 3; }
    .parent-icon-boxen .div3 { grid-area: 1 / 3 / 2 / 4; }
    .parent-icon-boxen .div4 { grid-area: 2 / 1 / 3 / 2; }
    .parent-icon-boxen .div5 { grid-area: 2 / 2 / 3 / 3; }
    .parent-icon-boxen .div6 { grid-area: 2 / 3 / 3 / 4; }
}

@media (max-width:768px) {
.parent-icon-boxen > .e-con-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 16px;
    grid-row-gap: 12px;
    align-items: center;
    }
    
    .parent-icon-boxen .div1 { grid-area: 1 / 1 / 2 / 2; }
    .parent-icon-boxen .div2 { grid-area: 1 / 2 / 2 / 3; }
    .parent-icon-boxen .div3 { grid-area: 2 / 1 / 3 / 2; }
    .parent-icon-boxen .div4 { grid-area: 2 / 2 / 3 / 3; }
    .parent-icon-boxen .div5 { grid-area: 3 / 1 / 4 / 2; }
    .parent-icon-boxen .div6 { grid-area: 3 / 2 / 4 / 3; }
}

/* parent icons boxen vacature */
.parent-icon-boxen-vacature  > .e-con-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
    
    .parent-icon-boxen-vacature .div10 { grid-area: 1 / 1 / 2 / 2 !important; }
    .parent-icon-boxen-vacature .div11 { grid-area: 1 / 2 / 2 / 3 !important; }
    .parent-icon-boxen-vacature .div12 { grid-area: 1 / 3 / 2 / 4 !important; }
    .parent-icon-boxen-vacature .div13 { grid-area: 1 / 4 / 2 / 5 !important; }


@media (max-width:768px) {
    .parent-icon-boxen-vacature > .e-con-inner {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 16px;
        grid-row-gap: 12px;
        align-items: center;
    }

    .parent-icon-boxen-vacature .div10 { grid-area: 1 / 1 / 2 / 2 !important; }
    .parent-icon-boxen-vacature .div11 { grid-area: 1 / 2 / 2 / 3 !important; }
    .parent-icon-boxen-vacature .div12 { grid-area: 2 / 1 / 3 / 2 !important; }
    .parent-icon-boxen-vacature .div13 { grid-area: 2 / 2 / 3 / 3 !important; }
}


/* vacature-details-wrapper */
.vacature-details-wrapper .grid-div {
    width: 25%;
    min-width: 186px;
}





/*--------------------------------------------------------------
## CUSTOM PLUGIN OPMAAK
--------------------------------------------------------------*/

/* CTA JOURNEY */



.cta__journey {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-direction: row;
    position: relative;
    width: 100%;
    margin-top: 3rem;
}
.cta__journey--line {
    width: 100%;
    height: 2px;
    background-color: var(--e-global-color-primary);
    display: block;
    position: absolute;
    top: 105px;
    left: 0;
}
.cta__journey--item {
    width: calc(100% / 5 - 10px);
    position: relative;
    z-index: 1;
}
.cta__journey--content {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    flex-direction: column;
    color: var(--e-global-color-primary);;
}
.cta__journey--content h4 {
    margin: 0;
    text-align: center;
    font-size: 20px !important;
    font-weight: 700;
    align-self: center;
}

.cta__journey--circle {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: transparent;
    border: solid 0px #fff;
    margin: 1rem 0;
    margin-right: -20px;
}
.cta__journey--content p {
    margin: 0;
    width: 100%;
    text-align: center;
    font-size: 18px !important;
    width: 100%;
    line-height: 1.4 !important;
}

.elementor-field-type-acceptance .elementor-field-option {
    display: flex !important;
}

.elementor-field-type-acceptance input {
    margin-right: 5px;
}

.roadmapicon {
    height: 40px !important;
    width: auto;
    align-self: center !important;
    margin-bottom: 16px;
}

/* CTA RESP */
@media (max-width:1140px) {
	.cta__journey {
	    display: flex;
	    justify-content: flex-start;
	    align-items: flex-start;
	    flex-direction: column;
	    margin-top: 2rem;
	}
	.cta__journey--line {
	    height: 100%;
	    width: 2px;
	    top: 0;
	    left: 11px;
	}
	.cta__journey--item {
	    width: 100%;
	}
	.cta__journey--content {
	    display: flex;
	    justify-content: flex-start;
	    align-items: center;
	    flex-direction: row;
	    flex-wrap: wrap;
	}
	.cta__journey--content h4 {
	    order: 1;
	}
	.cta__journey--circle {
	    order: 0;
	    margin-right: 20px;
	    transform: translateY(15px);
	}
	.cta__journey--content p {
	    order: 2;
	    width: 100%;
	    text-align: left;
	    margin-left: 45px;
	    margin-top: -10px;
	}

    .roadmapicon {
        display: none;
    }
}

/* SOLLICITATIE FORMULIER */
.sollicitatieformulier .elementor-field-group-voornaam label,
.sollicitatieformulier .elementor-field-group-achternaam label,
.sollicitatieformulier .elementor-field-group-telefoon label,
.sollicitatieformulier .elementor-field-group-email label,
.sollicitatieformulier .elementor-field-group-motivatie label,
.sollicitatieformulier .elementor-field-group-linkedin label {
    display: none !important;
}
.sollicitatieformulier .elementor-field-group-cv label {
    margin-bottom: 8px;
}
.sollicitatieformulier .elementor-field-group-cv input {
    margin-bottom: 8px;
}
.sollicitatieformulier .privacy {
    color: #00847d !important;
    font-weight: 800 !important;
}
.elementor-message.elementor-message-danger {
    font-size: 14px;
}



/* COLLEGA VERHALEN CAROUSEL */
/* @media (min-width:1201px) {
    .elementor-widget-n-carousel .swiper-slide  {
        aspect-ratio: 114/50;
    }
} */
.elementor-widget-n-carousel .swiper-slide > .e-con .e-con-inner {
    justify-content: flex-end;
    align-items: flex-end;
}
/* quote box */
.slide-quote-wrapper > .e-con-inner {
    padding-top: 0;
    padding-bottom: 8px;
}
.elementor-widget-n-carousel .swiper-slide .elementor-widget-testimonial,
.quote-box {
    width: 320px;
    max-width: 80%;
}
.quote-box {
    border-image-slice: 69 fill;
    border-image-width: 48px 69px;
    border-image-outset: 40px 69px;
    border-image-repeat: stretch stretch;
    border-image-source: url("/app/uploads/2023/09/praatwolk-hor-07.png");
    border-style: solid;
    margin: 69px !important;
}
.elementor-widget-n-carousel .swiper-slide .elementor-widget-testimonial .elementor-testimonial-content,
.quote-box p,
.quote-box .elementor-widget-container {
    font-size: 20px;
    line-height: 1.4;
    color: var(--e-global-color-primary);
}
.elementor-widget-n-carousel .swiper-slide .elementor-widget-testimonial .elementor-testimonial-meta {
    color: var(--e-global-color-primary);
}
/* quote box responsive */
@media (min-width: 1461px) {
    .quote-box {
        border-image-outset: 48px 69px;
    }
    .elementor-widget-n-carousel .swiper-slide .elementor-widget-testimonial .elementor-testimonial-content,
    .quote-box p,
    .quote-box .elementor-widget-container {
        font-size: 24px;
    }
}
@media (min-width:1025px) and (max-width:1460px) {
    .con--quote-box {
    align-items: flex-end;
    }
    /* alt border img */
    .quote-box {
        border-image-source: url("/app/uploads/2023/09/praatwolk-ver-07.png");
    }
    /* slider */
    .slider-quotes .swiper-slide {
        height: 560px !important;
    }
    .elementor-widget-n-carousel .swiper-slide > .e-con .e-con-inner {
        align-items: center;
    }
}
/* extra breakpoint */
/* @media (min-width: 1025px) and (max-width: 1365px) {
    .elementor-widget-n-carousel .quote-box {
        border-image-source: url("/app/uploads/2023/09/praatwolk-ver-07.png");
    }
    .slider-quotes .swiper-slide {
        height: 560px !important;
    }
    .elementor-widget-n-carousel .swiper-slide > .e-con .e-con-inner {
        align-items: flex-end;
    }
} */
@media (min-width:768px) and (max-width:1024px) {
    /* slider */
    .slider-quotes .swiper-slide {
        min-height: 460px !important;
    }
}
@media (max-width:767px) {
    .con--quote-box {
    align-items: flex-end;
    }
    /* alt border img */
    .quote-box {
        border-image-source: url("/app/uploads/2023/09/praatwolk-ver-07.png");
    }
    /* slider */
    .slider-quotes .swiper-slide {
        height: 560px !important;
    }
    /* .elementor-widget-n-carousel .swiper-slide > .e-con .e-con-inner {
        align-items: center;
    } */
    
}
/* bullets */
.elementor-widget-n-carousel .swiper-pagination-bullet {
    opacity: 1;
}
.elementor-widget-n-carousel .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--e-global-color-secondary);
}


/*--------------------------------------------------------------
## 
--------------------------------------------------------------*/