/*
Theme Name: VO Makelaars
Theme URI: https://vomakelaars.nl
Author: Scherrenburg Development
Author URI: https://scherrenburgdevelopment.nl
Description: Maatwerk website voor VO Makelaars
Version: 1.0
*/

/* ======================================
    Algemene styling
====================================== */

* { margin: 0; padding: 0; list-style-type: none; box-sizing: border-box; }
html, body {font-family: 'Manrope', Arial, sans-serif; font-size: 19px; background-color: var(--color1); font-weight: 400; padding: 13.5px;}
img { display: block; max-width: 100%; height: auto; }
a {font-weight: 500; color: var(--color1); text-decoration: none; transition: 0.3s ease;}
:root { --color1: #ffffff; --color2: #0D1C38; --color3: #A68828; --color4: #000; --color5: #EBEBE8; --br_1: 5px; --br_2: 25px;}
fieldset.hidden-fields-container { display: none; }
.overlay {border-radius: var(--br_1);}

.maxw1 { max-width: 1650px; margin: 0 auto; padding: 0 20px; }
.maxw2 { max-width: 1500px; margin: 0 auto; padding: 0 70px; }

h1, .h1 { font-size: 45px; font-weight: 700; }
h2, .h2 { font-size: 35px; font-weight: 700; }
h3, .h3 { font-size: 25px; font-weight: 700; }
h4, .h4 { font-size: 22px; font-weight: 700; }
h5, .h5 { font-size: 20px; font-weight: 700; }
h6, .h6 { font-size: 18px; font-weight: 700; }

.btns { display: flex; gap: 25px; flex-wrap: wrap;}
.btn { padding: 10px 30px; border-radius: var(--br_2); text-align: center; display: flex; max-width: fit-content;}

.btn.btn_color1 { background-color: var(--color3); color: var(--color1);}
.btn.btn_color1:hover { background-color: var(--color2); color: var(--color1); }
.btn.btn_color2 { background-color: var(--color2); color: var(--color1); }
.btn.btn_color2:hover { background-color: var(--color3); color: var(--color1);}
.btn.btn_color3 { background-color: var(--color1); color: var(--color4); }
.btn.btn_color3:hover { background-color: var(--color3); color: var(--color1);}

.btn.btn_color3 span svg {stroke: var(--color4);}
.btn.btn_color3:hover span svg {stroke: var(--color1);}

.standard_layout.blue .content .btns .btn.btn_color1:hover {background-color: var(--color1); color: var(--color4);}
.standard_layout.blue .content .btns .btn.btn_color1:hover span svg{stroke: var(--color4);}

.btn span {margin: 0 0 0 18px; display: flex;}

.brake {height: 27px; background-color: var(--color1);}
.standard_layout {border-radius: var(--br_1); padding: 75px 0;}

.blue {background-color: var(--color2); color: var(--color1);}
.yellow {background-color: var(--color3); color: var(--color1);}
.sand {background-color: var(--color5); color: var(--color4);}

.breadcrumbs {font-weight: 400;}

/* =====================================
    Navigatie en header
====================================== */

.front_page, .page { background-repeat: no-repeat; background-size: cover; background-position: center; }
.overlay { padding: 75px 0; background-color: rgba(0, 0, 0, 0.45); }

header { background-color: var(--color1); border-radius: var(--br_1);}
header .overlay {border-radius: var(--br_1);}
.frontpage .navbar {padding: 25px 0 0 0;}
.navbar { display: flex; justify-content: space-between; align-items: center; color: var(--color1); }
.logo { width: 130px; margin: 0 25px 0 0; display: block;}

.navbar nav {width: calc(100% - 180px); display: flex; justify-content: flex-end;}
.navbar nav ul > li {display: inline-block; margin-right: 15px; font-size: 20px; position: relative; font-weight: 700;}
.navbar nav ul > li:last-child {margin-right: 0;}

.navbar .desktop_menu ul > li::after {content: ""; position: absolute; bottom: -5px; left: 0; width: 100%;height: 3px;background-color: var(--color1);opacity: 0;transition: 0.3s ease;border-radius: var(--br_1);}
.navbar .desktop_menu ul > li:hover::after,
.navbar .desktop_menu ul > li.current-menu-item::after {opacity: 1;}

.navbar .desktop_menu .sub-menu li::after {display: none !important;}
.navbar .desktop_menu .menu-header_menu-container > ul > li:nth-last-child(2) > a {background-color: var(--color3);padding: 10px 30px;border-radius: var(--br_2);color: var(--color1);font-weight: 500;}
.navbar .desktop_menu .menu-header_menu-container >  ul > li:last-child > a {background-color: var(--color4);padding: 10px 30px;border-radius: var(--br_2);color: var(--color1);font-weight: 500;}
.navbar .desktop_menu .menu-header_menu-container > ul > li:nth-last-child(2) > a:hover,
.navbar .desktop_menu .menu-header_menu-container > ul > li:last-child > a:hover {background-color: var(--color1) !important;color: var(--color4);}
.navbar .desktop_menu .menu-header_menu-container > ul > li:nth-last-child(2):after,
.navbar .desktop_menu ul:first-of-type > li:last-child::after {display: none;}
.navbar .desktop_menu .sub-menu {display: none;position: absolute;top: 100%;left: 0;min-width: 240px;background-color: var(--color3);color: #fff;z-index: 2;border-radius: var(--br_1);text-align: left;}
.navbar .desktop_menu .sub-menu li {width: 100%;}
.navbar .desktop_menu .sub-menu li a {padding: 14px 15px;font-size: 16px; line-height: 14px; color: #fff !important; text-decoration: none;display: block;}
.navbar .desktop_menu nav ul li:hover > .sub-menu,
.navbar .desktop_menu .menu-item-has-children:hover > .sub-menu {display: block;}
.navbar .desktop_menu .sub-menu .sub-menu {top: 0;left: 100%;margin-left: 1px;border-radius: var(--br_1);}
.navbar .desktop_menu .sub-menu li:hover > .sub-menu {display: block;}
.navbar .desktop_menu .sub-menu li a:hover {background-color: var(--color1) !important;color: var(--color4) !important;}
.navbar .desktop_menu .sub-menu li:first-child > a {border-top-left-radius: var(--br_1);border-top-right-radius: var(--br_1);}
.navbar .desktop_menu .sub-menu li:last-child > a {border-bottom-left-radius: var(--br_1);border-bottom-right-radius: var(--br_1);}

.mobile_menu { overflow-y: auto; }
.mobile_menu .maxw1:first-child { display: flex; justify-content: flex-end; align-items: center; padding: 52px 20px 0px 52px }
#mobile-menu { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: var(--color2); z-index: 1; box-shadow: 0px 5px 16px 0px rgba(0,0,0,0.24); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform 0.3s ease, opacity 0.3s ease; }
#mobile-menu.active { transform: translateY(0); opacity: 1; visibility: visible; }
#mobile-menu ul { width: 100%; display: flex; flex-direction: column; padding: 0; margin: 45px 0 0 0; }
#mobile-menu ul li { margin: 0; }
#mobile-menu ul li a { color: var(--color1); display: flex; flex-wrap: wrap; font-weight: 500; font-size: inherit; padding: 13px; border-bottom: 0.5px solid var(--color1); }
#mobile-menu ul li a:hover { color: var(--color3); }
#mobile-menu ul li a.btn.btn_color4 { background-color: var(--color1); color: var(--color4); padding: 8px 15px; margin: 25px 0 0 0; border: none; }
#mobile-menu ul li a.btn.btn_color4:hover { background-color: var(--color3); color: var(--color1); border: none; }
#mobile-menu ul li .sub-menu { display: none; padding: 0; margin: 0; background: transparent; overflow: hidden; list-style-type: none; border-radius: var(--br_1)}
#mobile-menu ul li.submenu-open > .sub-menu { display: flex; flex-direction: column; background-color: var(--color3); margin: 8px 0 0 0; }
#mobile-menu ul li.submenu-open > .sub-menu li { background: transparent; color: var(--color4); margin: 0; }
#mobile-menu ul li.submenu-open > .sub-menu li:hover a { background-color: var(--color1); color: var(--color4); box-shadow: none; }
#mobile-menu ul li.submenu-open > .sub-menu li a { background-color: transparent; color: var(--color5); padding: 10px 15px; font-size: 15px; border-bottom: 0px;}
#mobile-menu ul li > .sub-menu li > .sub-menu {margin: 0; border-radius: 0px;}
#mobile-menu ul li > .sub-menu li > .sub-menu li > a {padding-left: 30px;}
#mobile-menu-toggle { cursor: pointer; font-size: 30px; display: none; }
#mobile-menu-toggle img { display: block; width: 25%; height: auto; }

.header_content { background-position: center; background-size: cover; background-repeat: no-repeat; text-align: center; color: var(--color1); font-weight: 500; position: relative;}
.header_content.frontpage {height: calc(100vh - 54px);}
.header_content.frontpage > .overlay {height: calc(100vh - 54px); }
.header_content.frontpage .h1 { font-size: 72px; font-weight: 500;}
.header_content.frontpage .btns { margin: 25px 0 0 0; text-align: center;}
.header_content.page > .overlay { padding: 25px 0; background-color: rgba(0, 0, 0, 0.45); }

.header_content .overlay { padding: 0; position: relative;}
.header_content.page .overlay .maxw2 .hero_content {position: relative; padding: 120px 0; text-align: left;}
.header_content.frontpage .overlay .maxw2 .hero_content {height: calc(100vh - 175px); text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.header_content.frontpage .overlay .maxw2 {padding: 0 20px;}

    /* =====================================
        Algemeen content
    ====================================== */

.content { display: flex; justify-content: space-between; flex-wrap: wrap; }
.content .content_left { width: 50%; font-weight: 400; }
.content .content_left > .welkom {font-size: 13px; background-color: var(--color1); padding: 8px 20px; color: var(--color4); width: fit-content; border-radius: var(--br_2)}
.content .content_left h1 { margin: 27px 0; line-height: 104%;}
.content .content_left p:first-of-type { margin: 0 0 1.8em 0; }
.content .content_left p { margin: 1.8em 0;  font-weight: 400; line-height: 140%; }
.content .content_left p > a { color: var(--color3); text-decoration: underline; font-weight: 600; }
.content .content_left ol {padding-left: 1.3rem; margin: 1.0em 0;}
.content .content_left ol li { list-style-type: decimal; }
.content .content_left ul {padding-left: 1.3rem; margin: 1.0em 0;}
.content .content_left ul li { list-style-type: disc; }
.content .content_left ul li a {color: var(--color3)}
.content .content_left li { margin-bottom: 0.5rem; }
.content .content_right { width: 35%; }
.content .content_right > img { border-radius: var(--br_1); }

/* =====================================
    DIV's voor losse blokken
====================================== */

.cardgrid .koppen {text-align: center;}
.cardgrid .content {display: flex;}
.cardgrid  .items {display: grid; grid-template-columns: repeat(3, 1fr);gap: 30px; align-items: stretch;}
.cardgrid .items .item {position: relative; background-color: var(--color3); border-radius: var(--br_1); overflow: hidden; display: flex; flex-direction: column; height: 100%;}
.cardgrid  .items .item::before {content: ""; display: block; padding-top: 60%; background-image: var(--afbeelding-url); background-size: cover; background-position: center;}

.cardgrid .items .item > .content {padding: 30px; display: flex; flex-direction: column;}
.cardgrid .items .item > .content .status {background-color: var(--color1); color: var(--color4); padding: 7px 17px; text-align: center; max-height: fit-content; max-width: fit-content; font-size: 15px;}
.cardgrid .items .item > .content .adres {padding: 30px 0;}
.items .item > .content .adres h2 {font-size: 19px;}
.cardgrid .items .item > .content .kenmerken {display: flex; flex-direction: row; flex-wrap: wrap;}
.cardgrid .items .item > .content .kenmerken > div {display: flex; align-items: center; margin: 0 25px 0 0; font-size: 16px;}
.cardgrid .items .item > .content .kenmerken > div:last-child {margin: 0;}
.cardgrid .items .item > .content .kenmerken > div > span {padding: 0 7px 0 0; display: flex;}

/* =====================================
    Reviews section
====================================== */

.standard_layout.reviews {padding: 0px;}
.standard_layout.reviews > .overlay {padding: 75px 0;}

.reviews .widgets {color: var(--color4); display: grid; grid-template-columns: repeat(3, 1fr);gap: 30px; align-items: stretch;}
.reviews .widgets .widget_single {background-color: var(--color1); padding: 30px; border-radius: var(--br_1);}
.reviews .widgets .widget_head {display: flex; align-items: center; color: var(--color3); margin: 0 0 18px 0; flex-wrap: wrap;}
.reviews .widgets .widget_head > div svg {fill: var(--color3);}
.reviews .widgets .widget_head > div:first-child {font-weight: 500; font-size: 25px; margin: 0 18px 0 0;}
.reviews .widgets .widget_head > div:last-child {display: flex;}

/* =====================================
    Contact block, contactpagina | (content_right)
====================================== */

.contact_block .overlay { background-color: var(--color5); padding: 40px; color: var(--color4); border-radius: var(--br_1);}
.contact_block .overlay > div:last-child { margin: 6px 0 0 0; }
.contact_block .h3 {font-weight: 500; font-size: 28px; margin: 0 0 35px 0;}
.contact_block p, .contact_block a { margin: 15px 0 0 0; font-size: 18px; color: var(--color4); display: flex; align-items: center;}
.contact_block a span, .contact_block p span {display: flex; margin: 0 15px 0 0;}
.contact_block a span svg, .contact_block p span svg {max-width: 90%;}

/* =====================================
    Medewerkers sectie
====================================== */

.team .cardgrid .items.standard_layout {padding-bottom: 0px;}
.team > .h2 {margin: 0 0 15px 0;}
.team .cardgrid .items .content {color: var(--color1);}
.team .cardgrid .items .item::before {padding-top: 85%;}
.team .cardgrid .items .item > .content .adres  {color: var(--color4);}
.team .cardgrid .items .item > .content {font-size: 16px;}
.team .cardgrid .items .item > .content .adres p a {display: flex; color: var(--color4);}
.team .cardgrid .items .item > .content .adres p a span {display: flex; margin: 0 20px 0 0; justify-content: center;}
.team .cardgrid .items .item > .content .adres p a span > svg { max-width: 80%;}

/* =====================================
    Filter sectie aanbod woningen
====================================== */

.standard_layout.aanbod form.standard_layout {padding: 75px 0 0 0; }
.standard_layout .content .content_left .uitzondering_aanbod_koppen {padding: 0 0 75px 0;}

.select_wrapper {position: relative; display: inline-block;}
.select-icon {position: absolute; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; pointer-events: none;}
.select_wrapper select {margin: 0 50px 0 0;padding: 12px 35px 12px 40px;background: transparent;border: none;font-size: 16px;font-weight: 500;font-family: inherit;color: var(--color1);border-bottom: 0.5px solid var(--color1);cursor: pointer;border-radius: 0px;}
.select_wrapper select:focus {outline: none;}
.select_wrapper select:focus option {background: #1a2332;}
.select_wrapper select option:hover {background: var(--color1);color: var(--color3);} 
.select_wrapper select  option:first-of-type {padding: 0 15px!important;}
.select_wrapper select option {background: var(--color3) !important;color: var(--color1)!important;}

/* =====================================
    Single woningen aanbod
====================================== */
.standard_layout .presentatie_aanbod {text-align: left;}
.presentatie_aanbod  .adres {margin: 20px 0 0 0;}
.presentatie_aanbod .kenmerken {display: flex; flex-wrap: wrap; justify-content: space-between; align-content: center; width: 100%; border-radius: var(--br_1); margin: 75px 0 0 0; background-color: var(--color3); padding: 30px 45px;}
.presentatie_aanbod .kenmerken .left {margin: 0 25px 0 0;}
.presentatie_aanbod .kenmerken .left .h2 {font-weight: 500; font-size: 30px; }
.presentatie_aanbod .kenmerken .right {display: flex; flex-wrap: wrap; justify-content: flex-end;}
.presentatie_aanbod .kenmerken .right .single {display: flex; flex-wrap: wrap; align-items: center; margin: 0 80px 0 0;}
.presentatie_aanbod .kenmerken .right .single:last-child {margin: 0px;}
.presentatie_aanbod .kenmerken .right .single span {display: flex; margin: 0 20px 0 0;}
.presentatie_aanbod .kenmerken .right .single span svg {width: 30px; height: 30px;}

.presentatie_aanbod .gallery-wrapper { display: flex; gap: 25px; max-height: 430px; }
.presentatie_aanbod .gallery-wrapper  .image-left { flex: 1; overflow: hidden; position: relative; }
.presentatie_aanbod .gallery-wrapper  .image-right { position: relative; flex: 1; display: flex; flex-direction: column; gap: 25px; overflow: hidden; }
.presentatie_aanbod .gallery-wrapper  .image-right a { flex: 1; overflow: hidden; }
.presentatie_aanbod .gallery-wrapper  .image-left img, .image-right img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--br_1); }
.presentatie_aanbod .gallery-wrapper  .image-left .status { position: absolute; background-color: var(--color1); top: 25px; left: 25px; padding: 8px 20px; color: var(--color4); text-transform: capitalize; pointer-events: none; }
.presentatie_aanbod .gallery-wrapper  .extra-fotos { position: absolute; bottom: 25px; right: 25px; background-color: var(--color3); padding: 8px 20px; border-radius: var(--br_2); pointer-events: none; }
.presentatie_aanbod .gallery-wrapper  .extra-fotos_mobiel { display: none; position: absolute; bottom: 25px; right: 25px; background-color: var(--color3); padding: 8px 20px; font-size: 14px; border-radius: var(--br_2); pointer-events: none; }

.woning_omschrijving {margin: 15px 0 0 0!important;}
.kenmerken_block {margin: 75px 0 0 0;}
 .kenmerken_block:nth-of-type(3) {margin: 35px 0 0 0!important;}
 .kenmerken_block .single {display: flex; flex-wrap: wrap; border-bottom: 0.5px solid var(--color4); padding: 10px 0;}
 .kenmerken_block .single div:first-child {font-weight: 700; width: 325px;}
.kenmerken_block .single div:last-child {flex: 1; text-transform: lowercase;}
 .kenmerken_block .single div:last-child:first-letter {text-transform: uppercase;}

.content .content_right.bezichtiging .item {position: sticky; top: 20px; background-color: var(--color3); color: var(--color1); border-radius: var(--br_1); overflow: hidden; display: flex; flex-direction: column;}
.content .content_right.bezichtiging .item::before {content: ""; display: block; padding-top: 85%; background-image: var(--afbeelding-url); background-size: cover; background-position: center;}

.content .content_right.bezichtiging .item > .content {padding: 30px; display: flex; flex-direction: column;}
.content .content_right.bezichtiging .item > .content .text {font-size: 25px; font-weight: 500; max-width: 85%;}
.content .content_right.bezichtiging .item > .content .contact {padding: 30px 0;}
.content .content_right.bezichtiging .item > .content .contact p {display: flex; flex-direction: column;}
.content .content_right.bezichtiging .item > .content .contact p a span {margin: 0 20px 0 0;}
.content .content_right.bezichtiging .item > .content .contact p a span > svg { max-width: 80%;}
.content .content_right.bezichtiging .item > .content .contact p a {color: var(--color4); display: flex;}
.content .content_right.bezichtiging .item > .content .btn.btn_color2 {background-color: var(--color4);}
.content .content_right.bezichtiging .item > .content .btn.btn_color2:hover {background-color: var(--color1); color: var(--color4);}
.content .content_right.bezichtiging .item > .content .btn.btn_color2:hover span svg{stroke: var(--color4);}

    /* =====================================
        Footer
    ====================================== */

footer { color: var(--color1); font-weight: 500; }
footer .standard_layout {padding: 75px 0 40px 0; border-top-right-radius: var(--br_1); border-top-left-radius: var(--br_1); border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;}
footer .blocks { display: flex; flex-wrap: wrap; justify-content: space-between;}
footer .blocks .block {display: flex; flex-direction: column;}
footer .blocks .block .kop { font-weight: 700; margin: 0 0 20px; font-size: 35px;}
footer .blocks .block p {display: flex; align-items: center;}
footer .blocks .block p span {display: flex; margin: 0 20px 0 0; padding: 6px; border-radius: 100%; background-color: var(--color1); justify-content: center; transition: 0.3s ease;}
footer .blocks .block p span svg {stroke: var(--color3); width: 80%;}
footer .blocks .block > a {display: flex; align-items: center;}
footer .blocks .block > a:nth-of-type(1) {margin: 10px 0;}
footer .blocks .block > a:nth-of-type(3) {margin: 10px 0 0 0;}

footer .blocks .block a span {display: flex; margin: 0 20px 0 0; padding: 6px; border-radius: 100%; background-color: var(--color1); justify-content: center; transition: 0.3s ease;}
footer .blocks .block a span svg {stroke: var(--color3); width: 70%;}

footer .blocks .block p:hover span {background-color: var(--color3);}
footer .blocks .block p:hover span svg {stroke: var(--color1);}
footer .blocks .block a:hover span {background-color: var(--color3);}
footer .blocks .block a:hover span svg {stroke: var(--color1);}

footer .blocks .block ul li > .openingstijden {display: inline-block; width: 120px;}
footer .blocks .block ul li { margin: 2px 0 0 0; }
footer .blocks .block ul li a {display: flex; align-items: center;}
footer .blocks .block ul li a:hover { color: var(--color3); }

footer .footer_logos {display: flex; align-items: center; margin: 75px 0 0 0; flex-wrap: wrap;}
.footer_logos a:hover {transform: translateY(-5px);}
footer .footer_logos img {width: 80px; margin: 0 30px 0 0;}

footer .bottom {background-color: var(--color3); padding: 15px 0; font-size: 15px; font-weight: 500; border-bottom-left-radius: var(--br_1); border-bottom-right-radius: var(--br_1); }
footer .bottom .maxw2 {display: flex; justify-content: space-between; flex-wrap: wrap;}
footer .bottom .maxw2 div:last-child a:last-child {font-weight: 700;}

/* =====================================
    Contactinstellingen
====================================== */

.wpcf7-form p {font-size: 18px; color: var(--color1);}
select.wpcf7-form-control.wpcf7-select { border: 1px solid var(--color5); border-radius: var(--br_1); padding: 14px 15px; width: 100%; font-size: 17px; margin: 0 0 15px 0; background-color: transparent; resize: none; max-width: 500px; }
.wpcf7-text, .wpcf7-textarea { border: 1px solid var(--color5); color: var(--color1); font-family: inherit;  border-radius: var(--br_1); padding: 14px 15px; width: 100%; font-size: 17px; margin: 0 0 15px 0; background-color: transparent; resize: none; max-width: 500px; }
.wpcf7-text:focus, .wpcf7-textarea:focus { outline: none; }
select.wpcf7-form-control.wpcf7-select:focus {outline: none;}
select.wpcf7-form-control.wpcf7-select[name="property-type"] { color: var(--color1); font-size: 19px; font-family: 'Manrope', Arial, sans-serif; appearance: none;}

.wpcf7-text::placeholder, .wpcf7-textarea::placeholder { color: var(--color1); font-size: 19px; font-family: 'Manrope', Arial, sans-serif;}
.wpcf7 .post-password-form input[type="button"], input[type="submit"] {padding: 10px 25px; background-color: var(--color1); color: var(--color4); margin: 0;  border: none; font-size: 19px; border-radius: var(--br_2); transition: 0.3s ease;}
.wpcf7 .post-password-form input[type="button"]:hover, input[type="submit"]:hover { background-color: var(--color3); color: var(--color1); }

p[role="status"][aria-live="polite"] { display: none !important; }
span.wpcf7-not-valid-tip { display: none !important; }
[aria-invalid="true"] { border-color: red !important; }
div.wpcf7-response-output { width: 100%; margin: 10px 0 0 !important; color: var(--color1); }
div.wpcf7-response-output.wpcf7-validation-errors { color: red; }

/* =====================================
    Responsive
====================================== */
    @media screen and (max-width: 1750px) {
    html, body {padding: 5px;}
    .brake {height: 10px;}
    .header_content.frontpage > .overlay {height: calc(100vh - 20px);}
    .header_content.frontpage {height: calc(100vh - 20px);}

    @media screen and (max-width: 1460px) {
     .cardgrid .items .item > .content .kenmerken > div {font-size: 14px; margin: 0 17px 0 0;}
     .cardgrid .items .item > .content .kenmerken > div svg {width: 20px;}
    }

    @media screen and (max-width: 1415px) {
        .maxw2 {padding: 0 50px;}
        .navbar nav {display: none;}
        #mobile-menu-toggle { display: flex; gap: 10px; align-items: center; background-color: var(--color3); padding: 8px 15px; border-radius: var(--br_2); color: var(--color1); }
        #mobile-menu-toggle > div { font-weight: 400; font-size: 16px; }
        .presentatie_aanbod .kenmerken { flex-direction: column; align-content: flex-start; }
        .presentatie_aanbod .kenmerken .right { flex-direction: column; margin: 10px 0 0 0; }
        .presentatie_aanbod .kenmerken .right .single { margin: 10px 0; }
    }

    @media screen and (max-width: 1280px) { .select_wrapper { display: flex; flex-direction: column; } }

    @media screen and (max-width: 1200px) {
        .content .content_left { width: 100%; }
        .content .content_right { width: 100%; margin: 75px 0 0 0; display: flex; justify-content: center; }
        .content .content_right > img { width: 100%; max-width: 70%; }
        .contact_block { width: 100%; }
        .reviews .widgets { grid-template-columns: repeat(1, 1fr); }
   }

    @media screen and (max-width: 1100px) {
        h1, .h1 { font-size: 35px; font-weight: 700; }
        h2, .h2 { font-size: 33px; font-weight: 700; }
        h3, .h3 { font-size: 25px; font-weight: 700; }
        h4, .h4 { font-size: 23px; font-weight: 700; }
        h5, .h5 { font-size: 21px; font-weight: 700; }
        h6, .h6 { font-size: 19px; font-weight: 700; }
        .header_content.frontpage .h1 { font-size: 50px; }
        .header_content.page .page_header h1 { font-size: 40px; }

        .kenmerken_block, .presentatie_aanbod .kenmerken { margin: 50px 0 0 0; }
        .standard_layout.aanbod form.standard_layout { padding: 50px 0 0 0; }
        .header_content.page .overlay .maxw2 .hero_content, .standard_layout, .overlay,  .standard_layout.reviews > .overlay  { padding: 50px 0; }
        .standard_layout .content .content_left .uitzondering_aanbod_koppen { padding: 0 0 50px 0; }
        footer .standard_layout { padding: 50px 0 40px 0; }

        .cardgrid .items { grid-template-columns: repeat(2, 1fr); }
        .presentatie_aanbod .gallery-wrapper .image-right { flex: 0.5; }
        .presentatie_aanbod .gallery-wrapper .extra-fotos { font-size: 18px; padding: 6px 13px; bottom: 15px; right: 15px; }
        .presentatie_aanbod .gallery-wrapper .extra-fotos_mobiel { padding: 6px 13px; bottom: 15px; right: 15px; }
        .presentatie_aanbod .gallery-wrapper .status { font-size: 18px; padding: 6px 13px; top: 15px; left: 15px; }

        .logo { width: 115px; }

        footer .blocks .block:first-child { margin: 0; }
        footer .blocks .block { width: 100%; margin: 50px 0 0 0; }
        footer .blocks .block > img { width: 115px; }
        footer .footer_logos { margin: 30px 0 0 0; }
        footer .footer_logos img { width: 60px; margin: 20px 30px 0 0; }
        footer .bottom { padding: 10px 0 10px 0; font-size: 13px; }
        footer .bottom .maxw2 { display: flex; flex-direction: column; gap: 5px; }
    }

    @media screen and (max-width: 850px) {
        .presentatie_aanbod .gallery-wrapper .image-right { flex: 0; display: none; }
        .presentatie_aanbod .gallery-wrapper .extra-fotos_mobiel { display: block; }
        footer .bottom { display: flex; flex-direction: column; gap: 5px; }
    }

    @media screen and (max-width: 800px) {
        .cardgrid .items { grid-template-columns: repeat(1, 1fr); }
        .cardgrid .koppen { text-align: left; }
        .kenmerken_block .single { flex-direction: column; }
        .kenmerken_block .single div:first-child { width: 100%; }
    }

    @media screen and (max-width: 700px) {
        body { font-size: 16px; }
.cardgrid .items .item > .content .adres p {font-size: 19px;}
        h1, .h1 { font-size: 28px; font-weight: 700; }
        h2, .h2 { font-size: 23px; font-weight: 700; }
        h3, .h3 { font-size: 20px; font-weight: 700; }
        h4, .h4 { font-size: 18px; font-weight: 700; }
        h5, .h5 { font-size: 17px; font-weight: 700; }
        h6, .h6 { font-size: 16px; font-weight: 700; }

        .content .content_right.bezichtiging .item > .content .text { font-size: 25px; }
        .contact_block .h3 { font-size: 23px; }
        .contact_block p, .contact_block a { font-size: 16px; }
        .contact_block .overlay { padding: 25px; }

        .header_content.frontpage .h1 { font-size: 35px; }
        .header_content.page .page_header h1 { font-size: 30px; }
        .header_content.page > .overlay { padding: 25px 0; }
        .header_content.front_page .btns { margin: 30px 0 0 0; }

        .btn { padding: 10px 20px; }

        .content .content_right { margin: 50px 0 25px 0; }
        .content .content_right > img { max-width: 100%; }
        .reviews .widgets .widget_head > div:first-child { font-size: 21px; }
        .reviews .widgets .widget_head > div svg { width: 20px; }

        .presentatie_aanbod .gallery-wrapper .status { font-size: 14px; }
        .presentatie_aanbod .kenmerken { padding: 20px 25px; }
        .presentatie_aanbod .kenmerken .left .h2 { font-size: 23px!important; }
        .presentatie_aanbod .kenmerken .right .single { align-items: flex-start; }
        .presentatie_aanbod .kenmerken .right .single .text .h3 { font-size: 19px; }
        .presentatie_aanbod .kenmerken .right .single span svg { width: 25px; height: 25px; }

        .cardgrid .items .item > .content { padding: 20px; }

        footer .blocks .block .kop { font-size: 23px; margin: 0 0 10px; }
        footer .blocks .block .textunder_heading { font-size: 16px; }
        footer .blocks .block .direct_contact a { font-size: 15px; padding: 8px 14px; }

        .wpcf7-text::placeholder { font-size: 15px; }
        .wpcf7-textarea::placeholder { font-size: 15px; }
        .wpcf7-text { padding: 7px 14px; }
        .wpcf7-textarea { padding: 7px 14px; }
        .wpcf7 .post-password-form input[type="button"] { font-size: 15px; }
        input[type="submit"] { font-size: 15px; }
    }

    @media screen and (max-width: 500px) {
        html, body { padding: 0px; }
        .brake { height: 0px; }

        .logo { width: 95px; }
        .maxw2 { padding: 0 20px; }
        .btns { gap: 15px; }
        .btn { padding: 9px 16px; font-size: inherit; }

        .header_content.frontpage, .header_content.frontpage > .overlay { height: calc(100vh); }
        .standard_layout, header, .header_content .overlay, .overlay { border-radius: 0px; }

        .reviews .widgets, .cardgrid .items { gap: 20px; }
        .select_wrapper select { appearance: none; }
        .cardgrid .items .item > .content .kenmerken div { font-size: 12px; }
        .content .content_left .btns { display: grid; grid-template-columns: max-content; }

        footer .standard_layout, .bottom { border-bottom-right-radius: 0px!important; border-bottom-left-radius: 0px!important; border-top-right-radius: 0px!important; border-top-left-radius: 0px!important; }
        footer .footer_logos { justify-content: space-between; }
        footer .bottom { padding: 10px 0 10px 0; font-size: 11px; }
        }
    }