/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 html,body{
    width: 100vw!important;
    overflow-x: hidden!important;
 }
 :root{
    --accent: #FF6B1A;
    --primary: #255853;
    --font: "Noto Serif", serif;
    --opensans: "Open Sans", sans-serif;
    --text-xl: clamp(2.0625rem, 1.5rem + 1.5vw, 2.8125rem);
    --text-md: clamp(1.1875rem, 0.8594rem + 0.875vw, 1.625rem);
    --text-sm: clamp(1.0625rem, 0.8281rem + 0.625vw, 1.375rem);
    --text-s: clamp(0.9375rem, 0.7969rem + 0.375vw, 1.125rem);
 }
 li.header_primary > a,
 a.zh_btn {
    background-color: #f5f5f5;
    padding: 9px 13px!important;
    font-size: 15px!important;
    font-weight: 800!important;
    display: inline-block!important;
    margin-right: 5px!important;
}
li.header_primary > a,
.et_pb_text_inner > p > a.zh_btn.zh_btn_orange,
a.zh_btn.zh_btn_orange {
    color: white!important;
    background-color: var(--accent);
    font-family: var(--font);
}
a.zh_btn{
    color: white;
    background-color: white;
    font-family: var(--font);
}
.et_pb_text_inner > p > a.zh_btn.zh_btn_white,
a.zh_btn.zh_btn_white {
    color: black!important;
    background-color: white!important;
    text-decoration: none!important;
}
a.zh_btn.zh_btn_green {
    background-color: var(--primary);
    color: white;
}
/* HLB header*/
.zh_header_desktop_spacer {
    display: block;
    width: 100%;
    background-color: var(--primary);
    height: 100px;
}
.zh_header_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: var(--primary);
    display: flex;
    justify-content: center;
}
.zh_desktop > *{
    box-sizing: border-box;
}
.zh_desktop {
    box-sizing: border-box;
    width: 80%;
    max-width: 1080px;
    display: grid;
    grid-template-columns: 230px 1fr;
    grid-template-rows: 24px 1fr;
    grid-gap: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.zh_logo {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
}
.zh_logo img {
    height: 100%;
    object-fit: contain;
}
div.zh_header_upper    
{
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
}

div.zh_header_lower{
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
}
div.zh_header_upper > div,
div.zh_header_lower > div{
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    position:relative;
}

div.zh_header_upper > div > ul, div.zh_header_lower > div > ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0px;
    color: white;
    list-style-type: none;
    margin: 0px;
    height: 100%;
    width: 100%;
    gap: 18px;
    margin-top: 0px;
}
div.zh_header_upper > div > ul > li, 
div.zh_header_lower > div > ul > li{
    display: inline-block;
    padding: 0px;
    margin: 0px;
    line-height: 1em;
}
div.zh_header_upper > div > ul > li > a,
div.zh_header_lower > div > ul > li > a
{
    color: black;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    padding: 0px;
    margin: 0px;
    height: 100%;
    line-height: 1em;
    font-family:var(--font);
    font-weight: 800;
}
div.zh_header_upper > div > ul > li > a{
    font-weight: 500;
    font-size: 14px;
    color: white;
    font-family: var(--opensans);
}
.zh_mobile{
    display: none;
}
/* hlb mobile menu*/
:root{
    --mobile_menu_width: 280px;
    --mobile_menu_move: -280px;
}
.zh_mobile_menu {
    width: var(--mobile_menu_width);;
    background-color: var(--accent);
    position: fixed;
    z-index: 999999999999999999999;
    height: 100vh;
    top: 0px;
    right: 0px;
    transform: translateX(var(--mobile_menu_width));
}
.zh_move_page{
    transform: translateX(0px);
}
.zh_mobile_menu:after {
    content: "";
    position: absolute;
    right: -150px;
    bottom: -110px;
    background-image: url(/wp-content/uploads/2024/05/LHB-Logo.svg);
    width: 400px;
    height: 400px;
    z-index: -1;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.2;
}
.zh_mobile_menu > div.menu-mobile-menu-container > ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    padding-top: 50px;
    padding-bottom: 50px;
    margin: 0px;
    list-style-type: none;
}
.zh_mobile_menu > div.menu-mobile-menu-container > ul > li > a{
    color: white!important;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
}
.zh_desktop::after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 33px;
    background-color: #FF9738;
    z-index: -1;
}
.zh_mobile_hitarea{
    display: none;
}
.zh_header_scroll > .zh_desktop::after {
    display: none;
}
.zh_header_scroll > .zh_desktop > .zh_logo {
    grid-row: 1 / span 1;
}
@media screen and (max-width: 920px){
    .zh_desktop{
        grid-template-columns: 200px 1fr;
    }
}
@media screen and (max-width: 900px){
    .zh_desktop{
        display: none;
    }
    .zh_mobile {
        display: block;
        width: 80%!important;
        height: 100%!important;
        display: flex!important;
        justify-content: space-between!important;
        align-items: center!important;
    }
    .zh_header_desktop_spacer{
        height: 60px;
    }
    .zh_header_wrapper{
        height: 60px;
    }
    .zh_mobile{
        display: block;
        width: 80%;
    }
    .zh_mobile > * {
        height: 100%;
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        align-items: center;
    }
    .zh_mobile_header{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 10px;
    }
    .zh_mobile > .zh_logo {
        padding: 10px 0px;
    }
    .zh_move_page{
        transform: translateX(var(--mobile_menu_move));
    }
    .zh_mobile_menu_open{
        transform: translateX(0px);
    }
    .zh_mobile_hitarea,
    .zh_mobile_menu,
    .zh_ease_page{
        transition: all 500ms cubic-bezier(0.000, 0.930, 0.245, 1.020); /* custom */
        transition-timing-function: cubic-bezier(0.000, 0.930, 0.245, 1.020); /* custom */
    }
    .zh_mobile_hitarea{
        width: calc(100% - var(--mobile_menu_width));
        background-color: rgba(255, 255, 255, 0);
        height: 100vh;
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 999999999999999999999;
        opacity: 0;
    }
    .zh_mobile_hitarea.zh_mobile_hitarea_open {
        display: block;
        opacity: 0.6;
        background-color: black;
    }
    .zh_slider_controlls{
        display: none!important;
    }
}

/* HLB team slider*/
.zh_person_wrapper{
    width: 260px;
    position:relative;
    float:left;
    margin: 0px 10px;
}
.zh_person_wrapper > .zh_person_img{
    width: 100%;
    position:relative;
    padding-bottom: 100%;
    background-color:red;
    margin-bottom: 10px;
    background-position:Center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 4px;
    background-image: url("/wp-content/uploads/2024/05/HLB-voorbeeld.png");
}
.zh_details {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
}
.zh_details > h5 {
    color: var(--primary);
    font-size: 16px;
    font-weight: 700;
}
.zh_details > h6 {
    color: var(--accent);
    font-size: 15px;
    font-weight: 500;
    text-align: center;
}
.et_pb_row.zh_team_slider_row {
    width: 100%;
    max-width: 100%;
}
.zh_slider_controlls {
    margin: auto;
    width: 80%;
    max-width: 1080px;
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    margin-bottom: 20px;
    margin-top: -30px;
}
.zh_slider_next,
.zh_slider_prev {
    background-color: whitesmoke;
    width: 35px;
    height: 35px;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    padding: 7px;
    padding-right: 9px;
    cursor: pointer;
}
/* Header watermark*/
.zh_header_section_watermark:before,
.zh_section_watermark:before {
    content: "";
    position: absolute;
    right: 20px;
    bottom: -80px;
    background-image: url("/wp-content/uploads/2024/05/LHB-Logo.svg");
    width: 400px;
    height: 400px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.1;
}
/* HLB person grid*/
.zh_person_grid{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    grid-gap: 15px;
}
.person_img {
    background-color: rgb(229, 229, 229);
    width: 100%;
    padding-bottom: 100%;
    background-size: cover;
    background-position: center;
    position:Relative;
    background-repeat: no-repeat;
    border-radius: 4px;
    background-image: url("/wp-content/uploads/2024/05/HLB-voorbeeld.png");
}
.zh_person_item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.zh_person_details {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    padding: 0px 10px;
    padding-bottom: 20px;
}
.zh_person_details > *{
    text-align:left!important;
    width: 100%;
}
.person_links {
    /* background-color: red; */
    width: 100%;
    position: Absolute;
    bottom: 0px;
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    padding: 10px;
}
.person_link{
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.person_link > img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.person_link:hover > img{
    filter: brightness(0.9);
}
.zh_filters {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}
.zh_filter {
    background-color: #f5f5f5;
    padding: 8px;
    font-size: 14px;
    border-radius: 4px;
    font-weight: 400;
    cursor: pointer;
}
.filter_selected{
    background-color: var(--accent);
    color: white;
    font-weight: 700;
}

/* HLB Klantverhalen*/

.zh_list_item {
    display: grid;
    grid-template-columns: 320px 1fr;
    background-color: #f5f5f5;
    margin-bottom: 30px;
    border-radius: 4px;
    grid-gap: 10px;
    position: relative;
    min-height: 310px;
}
.zh_list_item:after {
    content: "";
    position: absolute;
    right: calc(-100% + 20px);
    top: 0px;
    background-color: #f5f5f5;
    width: 100%;
    height: 100%;
}
.zh_list_cover{
    background-size: cover;
    background-position: center;
    border-radius: 4px 0 0 4px;
}
.zh_list_content {
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr 45px;
    gap: 10px;
}
.zh_list_content > * {
    margin: 0px!important;
    padding: 0px;
}
.zh_list_title{
    font-size: 24px;
    font-weight:800;
    margin-bottom: 10px;
}
.zh_list_content p{
    font-size: 14px;
    font-weight: 300;
    color: var(--primary);
}
.zh_list_content > a{
    width: 110px;
}
@media screen and (max-width: 800px) {
    .zh_list_items
    {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        grid-gap: 20px;
    }
    .zh_list_item {
        grid-template-columns: 1fr;
        grid-template-rows: 200px 1fr;
        grid-gap: 10px;
        position: relative;
    }
    .zh_list_item:after{
        display: none;
    }
    .zh_list_cover{
        border-radius: 4px;
    }
    .et_pb_code_inner > .zh_btn{
        margin: 5px;
    }
    .zh_person_grid{
        grid-template-columns: 1fr 1fr;
    }
    .zh_person_details{
        padding: 0px!important;
    }
    .zh_person_details > *{
        text-align: center!important;
        font-size: 14px!important;
        width: 100%!important;
    }
    .person_links{
        gap: 5px;
    }
    .person_link {
        width: 35px;
        height: 35px;
    }
    .zh_list_title {
        font-size: 20px;
        font-weight: 800;
        line-height: 1.2em;
    }
}

span.zh_nieuws_datum {
    display: block;
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 4px;
}

.zh_breadcrumbs {
    display: flex;
    gap: 22px;
}
.zh_breadcrumbs > a{
    font-size: 15px;
    font-weight: 400;
    text-decoration: none !important;
    position:relative;
}
.zh_breadcrumbs > a:before {
    background-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cpath%20fill%3D%22%23fbba00%22%20d%3D%22M15.5857864%2C12%20L7.29289322%2C20.2928932%20C6.90236893%2C20.6834175%206.90236893%2C21.3165825%207.29289322%2C21.7071068%20C7.68341751%2C22.0976311%208.31658249%2C22.0976311%208.70710678%2C21.7071068%20L17.7071068%2C12.7071068%20C18.0976311%2C12.3165825%2018.0976311%2C11.6834175%2017.7071068%2C11.2928932%20L8.70710678%2C2.29289322%20C8.31658249%2C1.90236893%207.68341751%2C1.90236893%207.29289322%2C2.29289322%20C6.90236893%2C2.68341751%206.90236893%2C3.31658249%207.29289322%2C3.70710678%20L15.5857864%2C12%20Z%22%2F%3E%0A%3C%2Fsvg%3E%0A);
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    right: -22px;
    top: -3px;
    transform: scale(0.6);
}
.zh_breadcrumbs > a:last-child:before {
    display: none;
}

/* Prospect grid*/
.zh_prospects_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}
.zh_prospect{
    padding: 15px;
    background-color: white;
    border-radius: 2px;
}
.zh_prospect > h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--primary);
}
.zh_prospect > p {
    font-size: 15px;
    font-weight: 300;
    color: var(--primary);
}
.zh_prospects_grey > .zh_prospect{
    background-color: #f5f5f5;
}
.zh_prospects_v{
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
}
.zh_prospects_grid.zh_prospects_grey.zh_prospects_col3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* Ninja forms styling*/


.nf-form-fields-required {
    display: none
}

.nf-field>.submit-wrap>*>* {
    width: 100%!important
}

select.ninja-forms-field,
textarea.ninja-forms-field,
input.ninja-forms-field {
    border: 1px solid #dbdbdb!important;
    border-radius: 10px;
    background-color: white!important;
    border-radius: 3px!important
}

.nf-field>.field-wrap>.nf-field-element>input[type=submit],h4.tb_plus_success {
    padding: 10px;
    border-radius: 3px!important;
    background-color:var(--accent)!important;
    color: white!important;
    cursor: pointer
    border: 0px solid red!important;
}

h4.zh_success>span {
    color: white!important;
    font-size: 17px!important;
    background-color: var(--primary);
    font-weight: 700!important;
    padding: 10px;
    border-radius: 3px;
}
  .nf-field-label{
    display: none!important;
  }
   

  .admin_zh_header_desktop_spacer{
    display: block;
    width: 100%;
    background-color: var(--primary);
    height: 100px;
  }

.current-menu-item > * {
    color: var(--accent) !important;
}
#menu-secondary > .current-menu-item > *{
    font-weight: 800!important;
}

.et_pb_text_inner > .zh_btn {
    margin-top: 13px;
    text-decoration: none;
}
.nf-error-msg {
    font-size: 10px !important;
    line-height: 14px;
}

.header_primary.current-menu-item > a {
    color: white!important;
}
.zh_stripes{
    background-color: #fbba00;
    opacity: 1;
    background: repeating-linear-gradient( 45deg, #e8aa00, #e8aa00 3.5px, #fbba00 3.5px, #fbba00 17.5px );
}
.zh_list_dark{
    margin-top: 10px;
    margin-bottom: -20px;
}
.zh_list_dark > ul > li > a {
    color: #414141;
}
.zh_list_dark > .zh_links {
    list-style-type: none !important;
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 1px;
}
.et_pb_text_inner > ul {
    padding: 0px!important;
}
.et_pb_text_inner > ul > li > a {
    text-decoration: none;
    font-size: 15px;
    color: white;
}
li.header_primary.menu-item.menu-item-type-custom.menu-item-object-custom.current-menu-item.menu-item-38 > a {
    color: white !important;
}
/* scroll header*/
.zh_header_wrapper.zh_header_scroll {
    background-color: white;
    box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
    height: 75px;
}
.zh_header_wrapper.zh_header_scroll > .zh_desktop{
    grid-template-rows: 1fr;
}
.zh_header_wrapper.zh_header_scroll > .zh_desktop > .zh_header_upper{
    display: none;
}
.zh_header_wrapper.zh_header_scroll > .zh_desktop > .zh_header_lower{
    grid-row: 1 / span 1;
}
.zh_header_wrapper.zh_header_scroll > .zh_desktop > .zh_header_lower > .menu-primary-container > ul > li > a{
    color: var(--primary);
}
.zh_header_wrapper.zh_header_scroll > .zh_desktop > .zh_header_lower > .menu-primary-container > ul > li.header_primary > a{
    background-color: var(--accent);
    color: white!important;
}
.zh_header_wrapper.zh_header_scroll > .zh_mobile_header > .zh_logo > img,
.zh_header_wrapper.zh_header_scroll > .zh_desktop > .zh_logo > img{
    display: none;
}
.zh_header_wrapper > .zh_desktop > .zh_logo > img.zh_logo_dark{
    display: none;
}
.zh_header_wrapper.zh_header_scroll > .zh_mobile_header > .zh_logo > img.zh_logo_dark,
.zh_header_wrapper.zh_header_scroll > .zh_desktop > .zh_logo > img.zh_logo_dark {
    display: block;
    padding: 5px;
}

/* sub menu*/

ul.sub-menu {
    list-style: none!important;
    padding: 15px 8px!important;
    background-color: white;
    display: flex;
    flex-direction: column;
    gap: 9px;
    border-radius: 4px;
    box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
}
ul.sub-menu > li {
    border-bottom: 2px solid #ededed;
    padding-bottom: 11px;
}
ul.sub-menu > li:last-child {
    border-bottom: none;
}
ul.sub-menu > li > a{
    padding-left: 12px
}
.menu-item > ul {
    position: absolute;
    display: none;
}
.menu-item:hover > ul {
    display: flex;
}

.zh_header_wrapper.zh_header_scroll > .zh_mobile_header > .zh_mobile_btn {
    background-color: #fbba00;
    height: 37px;
    width: 37px;
    border-radius: 4px;
}
@media screen and (min-width: 900px){
    .zh_header_wrapper, .zh_desktop_spacer{
        background-color: white!important;
    }
    .zh_header_desktop_spacer{
        height: 80px;
    }
    /*.zh_header_wrapper:after {
        content: "";
        width: 100%;
        height: 120px;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: -1;
        background: linear-gradient(0deg, rgba(0,90,119,0) 0%, rgba(0,90,119,1) 30%);
    }*/
    .zh_header_wrapper.zh_header_scroll:after {
        display: none;
    }
}


/* HLB conversie */
.zh_conversie_wrapper {
    display: grid;
    grid-template-columns: auto 300px;
    grid-gap: 30px;
    margin-top: 50px;
    min-height: 350px;
}
.zh_conversie_content{
    padding-bottom: 50px;
    padding-top: 25px;
    position:relative;
}
.zh_conversie_content > h3{
    color: var(--primary);
    font-weight: 800;
    font-size: 35px;
    margin-bottom: 30px;
}
.zh_conversie_content > p{
    font-weight: 300;
    font-size: 16px;
    line-height: 1.2 rem;
}
.zh_conversie_people{
    background-color:var(--accent);
}
.zh_conversie_person{
    position: relative;
    width: 100%;
    height: 400px;
}
.zh_conversie_person > .zh_conversie_person_img{
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position:center;
    background-image: url("/wp-content/uploads/2024/05/12794-2.webp");
}
.conversie_title_wrapper{
    position:Absolute;
    right: 0px;
    bottom: 25px;
    box-sizing: border-box;
    width: 250px;

}
.zh_conversie_person_title > h6,
.zh_conversie_person_title > h5{
    font-size: 16px;
    color: var(--primary);
    font-weight: 700;
    margin: 0px!important;
    padding: 0px!important;
    width: 100%;
    text-align:right;
}
.zh_conversie_person_title > h6{
    font-weight: 300;
    color: var(--accent);
    margin-top: 5px!important;]
}
.zh_footer_conversie_section {
    position: relative;
}
.zh_footer_conversie_section::After{
    content: "";
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-color:#f5f5f5;
    width:100%;
    height:calc(100% - 130px);
}
@media screen and (max-width: 850px){
    .zh_conversie_wrapper {
        display: grid;
        grid-template-columns: 100%;
        grid-gap: 30px;
        margin-top: 50px;
        min-height: 350px;
    }
    .conversie_title_wrapper {
        position: absolute;
        bottom: -50px;
        width: 250px;
        right: 20px;
        z-index: 99999;
        background-color: var(--accent);
        padding: 10px;
        height: 60px;
    }
    .zh_conversie_person_title > *{
        text-align: left!important;
    }
    .zh_conversie_content{
        padding-bottom: 30px;
        padding-top: 25px;
    }
    .zh_conversie_wrapper{
        grid-gap : 10px;
    }
    .zh_conversie_person_title > h6
    {
        font-size: 15px;
        color :white;
    }
}

/*fixxes*/
.zh_desktop > .zh_header_lower > .menu-primary-container > .menu {
    display: flex;
    align-content: center;
    align-items: center;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

.et_pb_text_inner > h1,
.et_pb_text_inner > h2,
.et_pb_text_inner > h3,
.et_pb_text_inner > h4
{
    font-family: var(--font);
    font-weight: 800!important;
}
a.et_pb_text_inner > a.zh_btn.zh_btn_orange{
    color: white!important;
}
div.et_pb_module > div.et_pb_text_inner > a.zh_btn.zh_btn_orange{
    color: white!important;
}

/* ZH TREND */
.zh_verhaal_container,
.zh_trend_container {
    width: 100%;
    height: 50vh;
    max-height: 500px;
    min-height: 300px;
    display: grid;
    grid-template-columns: 1fr 500px;
    grid-gap: 10px;
    grid-template-rows: 1fr 100px;
}
.zh_verhaal_container > *,
.zh_trend_container > *{
    box-sizing: border-box;
}
.zh_verhaal_text_container,
.zh_trend_text_container {
    position:relative;
    width: 100%;
    height: 100%;
    transform:rotate(0DEG);
}
.zh_verhaal_text,
.zh_trend_text {
    position:absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    padding: 20px;
    gap: 15px;
}
.zh_verhaal_text > h3,
.zh_trend_text > h3{
    font-size: 35px;
    font-weight: 800;
    color: white;
    font-family: var(--font);
    padding: 0px;
}
.zh_verhaal_text > p,
.zh_trend_text > p{
    font-size: 15px;
    font-weight: 300;
    color: white;
    font-family: var(--opensans);
    padding: 0px;
    line-height: 1.5em!important;
}
.zh_verhaal_img_container,
.zh_trend_img_container {
    position:relative;
    transform: rotate(2DEG);
    overflow: hidden;
}
.zh_verhaal_img,
.zh_trend_img {
    position:absolute;
    right: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 3px solid white;
}
.zh_verhaal_nav,
.zh_trend_nav {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    gap: 5px;
    padding: 15px;
}
.zh_dots {
    width: 100%;
    padding: 0px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    gap: 10px;
    padding-top: 10px;
}
.zh_dot {
    width: 15px;
    height: 15px;
    background-color: white;
    border-radius: 50%;
    position:relative;
}
.zh_dot:after{
    position:absolute;
    left: -5px;
    content: "";
    top: -5px;
    width: 25px;
    height: 25px;
}
.zh_dot_active {
    background-color: var(--accent);
}
.zh_verhaal_nav > *,
.zh_trend_nav > *{
    color: white;
    font-family: var(--font);

}
.zh_verhaal_nav > strong,
.zh_trend_nav > strong{
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
    color: var(--accent);
    cursor: pointer;
}
.animate__animated{
    animation-duration: 600ms!important;
    animation: all 300ms cubic-bezier(0.310, 0.005, 0.000, 0.995); /* custom */
    animation-timing-function: cubic-bezier(0.310, 0.005, 0.000, 0.995); /* custom */
}
.zh_trend_img_container > span >.animate__animated{
    animation-delay: 60ms;
}
.zh_title {
    position: absolute;
    left: 20px;
    top: 20px;
    font-size: 15px;
    font-family: var(--font);
    color: Var(--accent);
}
.zh_nav{
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 50%;
    position:absolute;
    left: -40px;
    top: calc(50% - 20px);
    cursor: pointer;
    background-color: #2e6d67!important;
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cpath%20fill%3D%22%23e3e3e372%22%20d%3D%22M14.5857864%2C12%20L6.29289322%2C20.2928932%20C5.90236893%2C20.6834175%205.90236893%2C21.3165825%206.29289322%2C21.7071068%20C6.68341751%2C22.0976311%207.31658249%2C22.0976311%207.70710678%2C21.7071068%20L16.7071068%2C12.7071068%20C17.0976311%2C12.3165825%2017.0976311%2C11.6834175%2016.7071068%2C11.2928932%20L7.70710678%2C2.29289322%20C7.31658249%2C1.90236893%206.68341751%2C1.90236893%206.29289322%2C2.29289322%20C5.90236893%2C2.68341751%205.90236893%2C3.31658249%206.29289322%2C3.70710678%20L14.5857864%2C12%20Z%22%20transform%3D%22rotate(-180%2011.5%2012)%22%2F%3E%0A%3C%2Fsvg%3E%0A');
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    opacity:0;
}
#zh_verhalen:hover > .zh_nav,
#zh_trends:hover > .zh_nav{
    opacity: 1;
}
.zh_btn_next{
    left: unset;
    right: -40px;
    transform:rotate(180DEG);
}
@media screen and (max-width: 1100px){
    .zh_verhaal_container, .zh_trend_container{
        grid-template-columns: 500px 1fr;
    }
}
@media screen and (max-width: 900px){
    .zh_verhaal_container,
    .zh_trend_container {
        display: block!important;
        flex-direction: column;
        gap: 10px;
        height: auto;
        max-height: 100%;
    }
    .zh_verhaal_text_container,
    .zh_trend_text_container {
        transform: rotate(0DEG);
        height: 300px;
    }
    .zh_verhaal_img_container,
    .zh_trend_img_container {
        transform: rotate(0DEG);
        height: 320px;
    }
    .zh_verhaal_img_container > span >.animate__animated,
    .zh_trend_img_container > span >.animate__animated{
        animation-delay: 0ms;
    }
    .zh_verhaal_img,
    .zh_trend_text {
        padding: 20px;
    }
    .zh_verhaal_text > h3,
    .zh_trend_text > h3{
        font-size: 25px;
    }
    .zh_verhaal_text > p,
    .zh_trend_text > p{
        font-size: 14px;
    }
    .zh_verhaal_nav,
    .zh_trend_nav {
        padding: 15px;
    }
    .zh_dots {
        padding-top: 10px;
    }
    .zh_verhaal_nav > strong,
    .zh_trend_nav > strong{
        font-size: 14px;
    }
    .zh_title {
        font-size: 14px;
    }
}

.zh_verhaal_container {
    background-color: #FF9738;
    display: grid;
    grid-template-columns: 450px 1fr;
    grid-template-rows: 1fr;
}
.zh_verhaal_nav > .zh_dots {
    align-items: center;
    justify-content: center;
    width: auto!important;
    padding: 0px!important;
}
.zh_verhaal_nav > .zh_dots > .zh_dot {
    background-color: #f3d6ba;
}
.zh_verhaal_nav > .zh_dots > .zh_dot_active {
    background-color: var(--accent);
}
.zh_verhaal_img_container{
    box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
    transform:rotate(-2deg) scale(1.05);
    background-color: white;
}
.zh_verhaal_nav >.zh_nav {
    position: relative;
    opacity: 1;
    background-color: white !important;
    left: unset!important;
    right: unset!important;
    top: unset!important;
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cpath%20fill%3D%22%2336363672%22%20d%3D%22M14.5857864%2C12%20L6.29289322%2C20.2928932%20C5.90236893%2C20.6834175%205.90236893%2C21.3165825%206.29289322%2C21.7071068%20C6.68341751%2C22.0976311%207.31658249%2C22.0976311%207.70710678%2C21.7071068%20L16.7071068%2C12.7071068%20C17.0976311%2C12.3165825%2017.0976311%2C11.6834175%2016.7071068%2C11.2928932%20L7.70710678%2C2.29289322%20C7.31658249%2C1.90236893%206.68341751%2C1.90236893%206.29289322%2C2.29289322%20C5.90236893%2C2.68341751%205.90236893%2C3.31658249%206.29289322%2C3.70710678%20L14.5857864%2C12%20Z%22%20transform%3D%22rotate(-180%2011.5%2012)%22%2F%3E%0A%3C%2Fsvg%3E%0A');
}
.zh_verhaal_nav {
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.zh_verhaal_text_container{
    overflow: hidden!important;
}
.zh_verhaal_text{
    padding-left: 30px;
}

/* Populair text */
li.zh_populair_item {
    display: grid;
    grid-template-columns: auto 400px;
    grid-gap: 10px;
    background-color: white;
    padding: 0 !important;
}

.zh_populair_text {
    padding: 30px;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    min-height: 310px;
}

.zh_populair_img {
    grid-column: 2;
    background-color: grey;
    width: 100%;
    height: 100%;
    position: relative;
    transform: scale(1.1) rotate(-1deg);
    border: 2px solid white;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
    background-size: cover;
    background-position: center;
    grid-row: 1;
}

ul.zh_populair_list {
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding: 0 !important;
}

.zh_populair_text > * {
    padding: 0 !important;
}

.zh_populair_text > h2,
.zh_populair_text > h3,
.zh_populair_text > h4,
.zh_populair_text > h5,
.zh_populair_text > h6{
    font-size: var(--text-md);
    font-family: var(--font);
    font-weight: 600;
    color: var(--accent);
}

.zh_populair_text > p {
    font-size: 15px;
    font-weight: 300;
    font-family: var(--opensans);
}

@media only screen and (max-width: 800px) {
    li.zh_populair_item {
        grid-template-columns: auto 250px;
    }
}

@media only screen and (max-width: 500px) {
    li.zh_populair_item {
        display: flex;
        flex-direction: column;
    }
    .zh_populair_text {
        padding: 20px;
    }
    .zh_populair_img {
        height: 200px;
    }
}
/*personeel*/
ul.zh_personeel {
    padding: 0px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 30px;
}

li.zh_personeel_item {
    list-style: none;
    padding: 0px;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.zh_personeel_img {
    width: 100%;
    height: 400px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: top center;
}
@media only screen and (max-width: 900px) {
    ul.zh_personeel {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    .zh_personaal_img{
        height: 250px;
    }

}
@media only screen and (max-width: 400px) {
    ul.zh_personeel {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    .zh_personaal_img{
        height: 200px;
    }

}
.zh_personeel_img > img {
    position: absolute;
    top: 0px;
    height: 100%;
    left: 0px;
    width: auto;
    transform-origin: left center;
    transform: translate(25%,0%);
}

.zh_personeel_content {
    padding: 20px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.zh_personeel_content > * {
    font-family: var(--font);
    padding: 0px;
    text-align:center!important;
}

.zh_personeel_content > h5 {
    color: var(--accent);
    font-size: 15px;
    font-weight: 400;
}

.zh_personeel_content > h6 {
    font-size: 25px;
    font-weight: 800;
}
.zoon_section_leave {
    position: absolute;
    width: 150px;
    height: 280px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.zh_populair_text > p > a{
    color: var(--accent);
    font-weight: 700;
}

.zh_detail_info{
    padding: 0px;
}
@media only screen and (max-width: 800px) {
    .zoon_section_leave{
        display: none!important;
    }
    .zh_verhaal_container {
        grid-template-columns: 1fr;
    }
    div.zh_dots{
        display: none;
    }
    div.zh_verhaal_nav > div.zh_nav {
        background-color: #ffffff !important;
        width: 50px;
        height: 50px;
        box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px!important;
    }
    ul.zh_tiles{
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))!important;
    }
}
#menu-secondary-menu > li.current-menu-item > a{
    color: black!important;
}
  .zh_tiles{
    list-style:none!important;
    padding: 0px!important;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 15px;
  }
  .zh_tiles > li{
    background-color: white;
    padding: 30px;
  }
  .zh_tiles > li > h3{
    text-align:center;
    font-weight: 400;
    font-family: var(--font);
    font-size: 15px;
    color: var(--accent);
  }
  .zh_tiles > li > h4{
    text-align:center;
    font-weight: 800;
    font-family: var(--font);
    font-size: 20px;
    color: black
  }
  .zh_tiles > li > p{
    text-align:center;
    font-weight: 300;
    font-family: var(--opensans);
    font-size: 15px;
    color: grey
  }
  .zh_tiles > li > br{
    display: none!important;
  }
@media only screen and (max-width: 500px) {
    ul.zh_tiles {
        display: flex;
        flex-direction: column;
    }
}

h3.zh_info_header{
    color: var(--primary);
    font-family: var(--font);
    font-weight: 800;
    font-size: var(--text-xl);
}


.zh_populair_item > .zh_populair_text > h2{
    font-size: var(--text-s);
    color: var(--secondary);
    font-weight: 500;
}
.zh_populair_item > .zh_populair_text > h3{
    color: var(--primary);
    font-weight: 800;
}