html,body{
width: 100vw!important;
overflow-x: hidden!important;
}
:root{
--accent: #FF6B1A;
--primary: #255853;
--font: "Noto Serif", serif;
--opensans: "Open Sans", sans-serif;
}
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;
} .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;
} :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(//zoonhovenier.nl/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); transition-timing-function: cubic-bezier(0.000, 0.930, 0.245, 1.020); }
.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;
}
} .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(//zoonhovenier.nl/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;
} .zh_header_section_watermark:before,
.zh_section_watermark:before {
content: "";
position: absolute;
right: 20px;
bottom: -80px;
background-image: url(//zoonhovenier.nl/wp-content/uploads/2024/05/LHB-Logo.svg);
width: 400px;
height: 400px;
background-size: contain;
background-repeat: no-repeat;
opacity: 0.1;
} .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(//zoonhovenier.nl/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 { 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;
} .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;
} .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));
} .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;
} .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;
} 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.zh_header_scroll:after {
display: none;
}
} .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(//zoonhovenier.nl/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;
}
} .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_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); animation-timing-function: cubic-bezier(0.310, 0.005, 0.000, 0.995); }
.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;
} 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 {
font-size: 16px;
font-family: var(--font);
font-weight: 600;
color: var(--accent);
}
.zh_populair_text > h3 {
font-size: 31px;
font-weight: 800;
font-family: var(--font);
}
.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;
}
} 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;
}
}