/* Var */
:root {
--font-family-base: "Montserrat", sans-serif;
--font-family-heading: "Libre Baskerville", serif;
--txt-secondary: #2e7aa1;
--dmc-rounded: 6px;
  
/* Firefox */ 
  @supports (width: -moz-available) {
  --stretch: -moz-available;
  }
/* Safari */ 
  @supports (width: -webkit-fill-available) {
    --stretch: -webkit-fill-available;
  }
/* Chromium */
  @supports (width: stretch) {
    --stretch: stretch;
  }
}

/* Font */
.jomolhari-regular {font-family: "Libre Baskerville", serif; font-weight: 400; font-style: normal;}
.montserrat-400 {font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;}
.montserrat-500 {font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal;}
.montserrat-600 {font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 600; font-style: normal;}
.montserrat-700 {font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal;}
body {font-family:var(--font-family-base);}
h1, .h1 {font-family:var(--font-family-heading); color: var(--dmc-text); font-size: 2.2rem;}
h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {font-family:var(--font-family-base); color: var(--dmc-text); font-weight: 600;}
.bg-accent.text-white {color: var(--dmc-text) !important;}
p a {color: var(--txt-secondary); font-weight: 500;}
.icon-banner .fas, .icon-banner .fa-solid, .icon-banner .fak, .icon-banner .fa-kit {font-size: 2.5rem; color: var(--bs-accent) !important;}
.element-list .fas, .element-list .fa-solid {font-size: 2.5rem; color: var(--bs-accent) !important;}

/* Breadcrumb */
.breadcrumb ul li::after {font-size: 0.6rem; vertical-align: middle;}

/* Button */
.btn {font-weight: 500;}
.btn-outline-primary:hover {color: var(--txt-secondary); border-color: var(--txt-secondary);}

/* Ronde hoekjes */
.element {border-radius: var(--dmc-rounded);}
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {border-radius: var(--dmc-rounded);}
.submenu ul a {border-radius: var(--dmc-rounded);}
.product-overview-images .subgroup .text-primary {border-radius: var(--dmc-rounded);}
.product-overview-images .subgroup picture img {border-radius: var(--dmc-rounded);}
.product-overview-images .subgroup .product-title {border-bottom-right-radius: var(--dmc-rounded); border-bottom-left-radius: var(--dmc-rounded);}

/* Main menu */
#main-menu {display: flex; justify-content: flex-end;}
#main-menu ul a:hover {background: var(--bs-accent); color: var(--dmc-text);}
#main-menu ul a.is-active {background: none; color: var(--txt-secondary);}

/* Submenu */
.submenu ul a.is-active {font-weight: 600; color: #256788;}

/* Hero img */
section.hero-img {background-position: center 15%;}
section.hero-img .hero-text {font-weight: 600; padding-left: 0 !important; padding-right: 0 !important; padding-top: 9rem !important; padding-bottom: 15rem !important;}
section.hero-img .hero-text h1 {font-size: 2.5rem; line-height: 1.5;}
section.hero-img .hero-text p {padding-right: 20%;}
section.hero-img .hero-list {width: 60%; float: right; margin-top: 20rem !important; background: rgb(230 230 231 / 30%) !important;}
section.hero-img .hero-list .row {margin-left: 1rem; margin-right: 1rem;}
section.hero-img .hero-list .row:first-child {border-top: none;}
section.hero-img .hero-list .row:last-child {border-bottom: none;}
section.hero-img .hero-list a:hover {text-decoration: underline;}
section.hero-img .hero-list svg:not(:host).svg-inline--fa, section.hero-img .hero-list svg:not(:root).svg-inline--fa {color: var(--bs-white) !important;}
section.hero-img .hero-list h4 {font-family: var(--font-family-base); font-weight: 600;}

/* Homepage - Infoblokken */
.card.card-overlay-cta {position: relative; background-color: transparent;}
.card.card-overlay-cta.p-3 {padding: 0 !important;}
.card.card-overlay-cta.border {border: none !important;}
.element.card.card-overlay-cta.p-3 .card-img-top {margin: 0; margin-bottom: 0; border-top-left-radius: 0; border-top-right-radius: 0;}
.card.card-overlay-cta .card-img-top .img-fluid {border-radius: var(--dmc-rounded); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);}
.card.card-overlay-cta .card-link {position: absolute; bottom: -15px; left: 5%; padding: 0; width: 90%; }
.card.card-overlay-cta .card-link a {display: inline-block; background: #FFFFFF; width: 100%; font-size: 1.1rem; font-weight: 600; padding: 1rem; border-radius: var(--dmc-rounded); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transform: translateY(20%);transition: transform 0.5s;}
.card.card-overlay-cta:hover .card-link a {transform: translateY(0);}

@media (min-width: 2000px) {
.custom-grid .row {max-width: 1985px; margin: auto;}
}

/* Hypotheek - Infoblokken */
.container-overlay-cta .container .row.g-lg-4 > div {display: flex;}
.card-content-overlay-cta .contextual-region {display: flex; flex-direction: column; width: 100%; height: 100%;}
.card-content-overlay-cta .card-body {flex: 1 1 auto;}
.card-content-overlay-cta .card-link {margin-top: auto;}
.card.card-overlay-cta.card-content-overlay-cta {background-color: #F4F4F4;}
.card.card-overlay-cta.card-content-overlay-cta .card-img-top .img-fluid {-webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-topleft: var(--dmc-rounded); -moz-border-radius-topright: var(--dmc-rounded); -moz-border-radius-bottomleft: 0; -moz-border-radius-bottomright: 0; border-top-left-radius: var(--dmc-rounded); border-top-right-radius: var(--dmc-rounded); border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
.card.card-overlay-cta.card-content-overlay-cta .card-body {padding-bottom: 50px; -webkit-border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomright: var(--dmc-rounded); -moz-border-radius-bottomleft: var(--dmc-rounded); border-bottom-right-radius: var(--dmc-rounded); border-bottom-left-radius: var(--dmc-rounded);}
 
  /* Homepage - Laagste rentes */
.laagste-rentes h2.laagste-rentes-title {color: var(--dmc-text);}

/* Homepage - Nieuws */
#denk-nieuws .rounded-0 {border-radius: var(--dmc-rounded) !important;}

/* Vervolgpagina - blok subgroup pages */
.subgroup-pages h2 {font-size: 1.1rem; color: var(--dmc-text) !important;}

/* Footer */
footer .bg-image {background-size: 20%; background-position: 90% 90%;}
footer {font-size: 0.9em; line-height: 1.7em;}
footer strong {font-size: 0.95rem;}

/* Footer - search */
.footer-search .fluid-container {padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important;}
.denk-theme-search-form {display: block !important; position: relative; max-width: 400px; /* optioneel */}
#denk-theme-search-form #edit-search {width: var(--stretch); margin-right: 0;}
.denk-theme-search-form .form-control {width: 100%; padding: 12px 50px 12px 16px; /* ruimte rechts voor icoon */ border-radius: var(--dmc-rounded); border: none; background-color: var(--bs-light); /* lichtgrijs/blauw */ font-size: 0.9rem;}
.denk-theme-search-form .form-submit {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: none; background-image: url(/sites/default/files/domains/rocassure/magnifying-glass-solid-full.png) !important; cursor: pointer;}
#denk-theme-search-form .form-submit {background-color: transparent; padding-right: 2rem;}
.denk-theme-search-form .form-control:focus {outline: none; box-shadow: 0 0 0 2px rgba(0,0,0,0.1);}
.denk-theme-search-form .form-submit {appearance: none;}

@media (max-width: 575.98px) {
  /* Hero img */
section.hero-img .hero-text {padding-top: 4rem !important; padding-bottom: 2rem !important;}
section.hero-img .hero-text h1 {font-size: 2.0rem;}
section.hero-img .hero-list {width: 100%; margin-top: initial !important; margin-bottom: 2rem !important;}

/* Homepage - section 2 */
.element-3534 {text-align: left !important;}
.element-3534.p-3 {padding: 1rem 0rem !important;}
.element-3533.ps-4 {padding-left: 0rem !important;}

/* Homepage - Infoblokken */
.card.card-overlay-cta {margin-bottom: 31px;}

/* Hypotheek - Infoblokken */
.card.card-overlay-cta.card-content-overlay-cta {margin-bottom: 31px;}
}

@media (min-width: 576px) {
  /* Hero img */
section.hero-img .hero-text {padding-top: 5rem !important; padding-bottom: 3rem !important;}
section.hero-img .hero-text h1 {font-size: 2.0rem;}
section.hero-img .hero-list {width: 100%; margin-top: initial !important; margin-bottom: 3rem !important;}

/* Homepage - section 2 */
.element-3534 {text-align: left !important;}
.element-3534.p-3 {padding: 1rem 0rem !important;}
.element-3533.ps-4 {padding: 1rem 0rem !important;}
.element-3533.p-3 {padding: 1rem 0 0 !important;}

/* Homepage - Infoblokken */
.card.card-overlay-cta {margin-bottom: 31px;}

/* Hypotheek - Infoblokken */
.card.card-overlay-cta.card-content-overlay-cta {margin-bottom: 31px;}
}

@media (min-width: 768px) {
  /* Hero img */
section.hero-img .hero-text h1 {font-size: 2.0rem;}
section.hero-img .hero-list {width: 100%; margin-top: 15rem !important;}
section.hero-img .hero-list .col-3 {width: 15%;}
section.hero-img .hero-list .text-md-center {text-align: left !important;}

/* Homepage - section 2 */
.element-3534 {text-align: center !important;}
.element-3534.p-3 {padding: 1rem !important;}
.element-3533.ps-4 {padding: 1rem 0rem !important;}
.element-3533.p-3 {padding: 1rem 0 0 !important;}

/* Homepage - Infoblokken */
.card.card-overlay-cta {margin-bottom: 0;}

/* Hypotheek - Infoblokken */
.card.card-overlay-cta.card-content-overlay-cta {margin-bottom: 0;}
}

@media (min-width: 992px) {
  /* Main menu */
#main-menu ul.menu li a {padding: 0.6rem; font-size: 0.9rem;}

/* Hero img */
section.hero-img .hero-text h1 {font-size: 2.5rem;}
section.hero-img .hero-list {width: 90%; margin-top: 12rem !important;}
section.hero-img .hero-list .col-3 {width: 25%;}

/* Homepage - section 2 */
.element-3534 h2{font-size: 2.0rem;}
.element-3533.ps-4 {padding: 2rem !important;}
.element-3533.p-3 {padding: 1rem !important;}
}

@media (min-width: 1200px) {
  /* Main menu */
#main-menu ul.menu li a {padding: 0.8rem;}

/* Hero img */
section.hero-img .hero-text {padding-top: 9rem !important; padding-bottom: 15rem !important;}
section.hero-img .hero-list {width: 70%; margin-top: 20rem !important;}
}

@media (min-width: 1400px) {
  /* Main menu */
#main-menu ul.menu li a {padding: 0.8rem 1.2rem; font-size: 1rem;}

/* Hero img */
section.hero-img .hero-list {width: 60%;}
}