/* Var */
:root {
--font-family-base: "Noto Sans", sans-serif;
--font-family-icon: "Font Awesome 6 Free";
--txt-secondary: #80BDC3;
--txt-tertiary: #586C6C;
--ab-accent: #02569A;
--ab-primary: #154266;
--ab-secondary: #C29B80;
--ab-dark-grey: #D3D3D3;
--ab-bg-accent: #9DD2FF;
--ab-hover: #006BB8;
--dmc-rounded: 6px;
--dmc-rounded-40: 40px;
--icon-font:;
  
/* Firefox */ 
  @supports (width: -moz-available) {
  --stretch: -moz-available;
  }
/* Safari */ 
  @supports (width: -webkit-fill-available) {
    --stretch: -webkit-fill-available;
  }
/* Chromium */
  @supports (width: stretch) {
    --stretch: stretch;
  }
}

/* Body */
body {background-image: url(/sites/default/files/images/logo-bg-1.png); background-attachment: fixed; background-position: bottom right; background-repeat: no-repeat; background-size: 25vw auto;}

/* Font */
body {font-family:var(--font-family-base);}
.cta h2.text-accent {color: var(--dmc-text) !important;}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {color: var(--dmc-text);}
h1, .h1 {font-size: 3.1rem;}
ul.infoblock-links li a {color: var(--dmc-text);}
ul.infoblock-links li a:hover {color: var(--bs-primary);}
.bg-accent h2 {color: var(--bs-primary);}
.bg-accent.text-white {color: var(--bs-primary) !important;}
.bg-accent.text-white a {color: var(--bs-primary) !important; text-decoration: none !important; box-shadow: 0 1px 0 0 rgba(65, 53, 42, 0.3);}
.bg-accent.text-white a:hover {color: var(--dmc-text) !important; text-decoration: none !important; font-weight: 500;}
ul.blocks li:before {background: var(--txt-secondary); color: var(--dmc-text);}
.submenu ul a.is-active {color: var(--bs-primary);}
.submenu ul a.is-active:before {background: var(--bs-primary);}
a, a:hover {box-shadow: 0 1px 0 0 rgba(65, 53, 42, 0.3);}
a:hover {color: var(--txt-tertiary);}
.subgroup-pages .text-accent {color: var(--dmc-text) !important;}
.bg-light .text-accent {color: var(--dmc-text) !important;}
.element-list .fas, .element-list .fa-solid {font-size: 2.5rem; color: var(--txt-secondary) !important;}
ul.arrowlist li:before {color: var(--bs-primary) !important;}
.breadcrumb ul li a {box-shadow: none;}
.breadcrumb ul li a:hover {box-shadow: 0 1px 0 0 rgba(65, 53, 42, 0.3);}
.txt-secondary {color: var(--txt-secondary);}
.text-ab-accent {color: var(--ab-accent);}

/* Iconen */
.fa-stack-2x {font-size: 2em; line-height: inherit;}
.fa-stack-3x {font-size: 3em; line-height: inherit; text-align: center; inset: 0; position: absolute; width: var(--fa-width);}
.fa-stack-5x {font-size: 5em; line-height: inherit;}
.fa-stack-5 {display: inline-block; position: relative; vertical-align: middle; height: 5em; line-height: 5em;}
.stacked-icons .fa-stack {width: 2em;}
.stacked-icons .icon-content {margin-left: 5px;}

/* Buttons - blauw */
.cta .btn-accent {color: var(--dmc-text); background-color: var(--bs-secondary); border-color: var(--bs-secondary);}

/* Header */
header {background-image: url(/sites/default/files/images/bg-header-1.png); background-repeat: repeat-x;}
header .logo-full {background-image: url(/sites/default/files/images/bg-header-2.png); background-repeat: no-repeat; height: 165px;}
header a:hover {color: var(--dmc-text);}

/* Zoekbalk */
.header-search .row {justify-content: flex-end;}
.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: 300px; /* 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-40); 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;}

/* Menu */
#main-menu ul.menu li {padding: 0.7rem 0;}
#main-menu ul.menu li a {padding: 0.7rem 1.2rem; margin: 0 5px; font-size: 1.1rem;}
#main-menu ul a {border-radius: var(--dmc-rounded);}
#main-menu ul a:hover {background: transparent; color: var(--bs-accent);}
#main-menu ul.menu li.active-trail a {background: transparent; color: var(--bs-accent);}
#main-menu ul.menu li.active-trail a:hover {background: transparent; color: var(--txt-secondary);}

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

/* Border-radius */
.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);}
.subgroup.border {border-radius: var(--dmc-rounded);}
.cta {border-radius: var(--dmc-rounded);}
.btn {border-radius: var(--dmc-rounded);}

/* Hero img */
section.hero-img {background-position: center 45%; clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 100%);}
section.hero-img .my-7 {margin-top: 17rem !important; margin-bottom: 17rem !important;}
section.section-hero-list {margin-top: -220px !important; z-index: 98; position: relative;}
section.section-hero-list .hero-list {background: rgb(194 155 128 / 90%); width: 40%; padding: 2rem; border-radius: var(--dmc-rounded);}
section.section-hero-list .hero-list-item {padding: 1rem !important;}
section.section-hero-list .hero-list-item a:hover {box-shadow: 0 1px 0 0 rgba(65, 53, 42, 0.3);}

/* Hero img - vervolgpagina's */
.page-image {clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 100%);}
.cta h2.text-accent {color: var(--bs-primary) !important;}
.cta .iconlist.checklist li::before {color: var(--bs-primary) !important;}
.cta .iconlist.checklist {color: var(--bs-primary) !important;}

/* Home - schuine section */
.home-img-pand img {width: 75%; border-radius: var(--dmc-rounded) !important;}

/* Schuine lijnen */
.section-overgang-polygon {padding-bottom: 240px !important;}
.section-polygon {clip-path: polygon(100% 0%, 100% 90%, 0% 100%, 0% 10%); margin-top: -250px !important;}
.section-polygon-2 {clip-path: polygon(0% 10%, 100% 0%, 100% 100%, 0% 100%); margin-top: -250px !important;}
.section-polygon .container, .section-polygon-2 .container {padding: 7rem 1rem 2rem !important;}

/* Card */
.row > [class*="col-"] > .card {height: 100%; display: flex; flex-direction: column;}
.card .contextual-region {display: contents;}
.card-body {flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start;}
.card-body > div {margin-top: auto;}
.btn-full {width: 100%; display: flex; justify-content: center;}

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

/* ZekerKlant - Nieuws */
#denk-nieuws .rounded-0 {border-radius: var(--dmc-rounded) !important;}
#denk-nieuws .dnk-img-fx {border-radius: var(--dmc-rounded) !important;}
#denk-nieuws .text-secondary {color: var(--dmc-text) !important;}
#denk-nieuws .btn-primary {background-color: var(--txt-secondary) !important; color: var(--bs-primary) !important;}
#denk-nieuws .btn:disabled, #denk-nieuws .btn.disabled, fieldset:disabled #denk-nieuws .btn {color: var(--dmc-text); background-color: var(--bs-secondary); border-color: var(--bs-secondary); opacity: 1;}
#denk-nieuws .btn:hover {color: var(--dmc-text); background-color: var(--bs-secondary); border-color: var(--bs-secondary);}

/* Vervolgpagina - blok subgroup pages */
.subgroup-pages a:before {background-color: var(--bs-primary);}

/* Pagina Medewerkers */
.overzicht-team .team-overview {--bs-gutter-x: 16px; --bs-gutter-y: 16px;}
.overzicht-team .team-overview > [class*="col-"] {margin-bottom: 0 !important;}
.overzicht-team .team-overview > [class*="col-"] > .bg-white.rounded.h-100 {border: 1px solid #d9d9d9;}
.bg-white.rounded.h-100 {padding: 0; overflow: hidden;}
.bg-white.rounded.h-100 > :not(picture) {padding-left: 16px; padding-right: 16px;}
.overzicht-team .functie {margin-bottom: 1rem; min-height: 75px;}
.overzicht-team h3 {min-height: 50px; margin-top: 16px;}
.overzicht-team .fal, .overzicht-team .fa-light {color: var(--txt-secondary);}
.overzicht-team .team-ab .fal, .overzicht-team .team-ab .fa-light {color: var(--ab-primary);}
.overzicht-team .email {display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px;}
.overzicht-team .email a {font-size: 0;}
.overzicht-team .email a::after {content: "stuur mij een e-mail"; font-size: 16px;}
.overzicht-team .phone {display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px;}

/* Abilities */
body.abilities {background-image: none;}
body.abilities header {background-image: none;}
body.abilities header .logo-full {background-image: none;}
body.abilities #main-menu ul.menu li.active-trail a, body.abilities #main-menu ul a:hover {color: var(--ab-bg-accent) !important;}
body.abilities .bg-primary {background: var(--ab-primary) !important;}
body.abilities .txt-accent {color: var(--ab-bg-accent);}
body.abilities .text-primary {color: var(--ab-primary) !important;}
body.abilities .bg-accent {background: var(--ab-bg-accent) !important;}
body.abilities .bg-accent h2, body.abilities .bg-accent.text-white {color: var(--dmc-text) !important;}
body.abilities a:hover {color: var(--ab-hover) !important;}
body.abilities .btn-accent {background: var(--ab-accent); border: var(--ab-accent); color: var(--bs-white) !important;}
body.abilities .btn-accent:hover {color: var(--bs-white) !important; font-weight: 500;}
body.abilities .bg-accent.text-white a:hover {color: var(--bs-white) !important;}
.ab-icon-banner {background: var(--bs-white) !important; border: 1px solid var(--bs-border); padding: 0 !important; transition: all 0.3s ease;}
.ab-icon-banner:hover {background: var(--ab-dark-grey); transform: translateY(-5px);}
.ab-icon-banner h4 {min-height: 50px; margin-bottom: 0;}
.ab-icon-banner:hover i.fa, .ab-icon-banner:hover h4 {color: var(--ab-accent) !important;}
.ab-icon-banner a {padding: 2rem !important; box-shadow: none;}
body.abilities a.whatsapp-btn:hover {color: var(--bs-white) !important;}
body.abilities footer {background: var(--ab-primary); color: var(--bs-white);}
body.abilities footer a, body.abilities footer a:hover {color: var(--bs-white) !important;}
body.abilities footer h2 {color: var(--bs-white); font-size: 0.95rem;}

/* Footer */
footer {font-size: 0.9em; line-height: 1.7em;}
footer strong {font-size: 0.95rem;}
footer a:hover {color: var(--bs-white); box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);}

/* Portal */
body.portal {background-image: none !important;}
body.portal .whatsapp-btn {display: none !important;}
body.portal #block-vanoost-content, body.portal .fluid-container, body.portal main {height:100% !important;}
.bg-port-vanoost {position: relative; min-height: 100vh; display: flex !important; justify-content: center !important; align-items: center !important; background: url(/sites/default/files/domains/vanoost-verzekeringen-verzuim-pensioenen/images/bg-vanoost.jpg) center / cover no-repeat; color: var(--bs-white);}
.bg-port-vanoost::before {content: ""; position: absolute; inset: 0; background: #41352A; background: linear-gradient(180deg,rgba(65, 53, 42, 0.3) 0%, rgba(65, 53, 42, 0.75) 70%, rgba(65, 53, 42, 1) 100%); pointer-events: none; z-index: 10;}
.bg-port-vanoost > * {position: relative; z-index: 20;}
.logo-port-vanoost img {width: 50%; height: 50%;}
.icon-port-vanoost {margin-top: 30px;}
.bg-icon-port-vanoost {display: inline-block; background: var(--bs-primary); padding: 20px; border-radius: 50%;}
.bg-icon-port-vanoost i.fa-light {color: var(--bs-white); font-size: 0;}
.bg-icon-port-vanoost i.fa-light::before {font-size: 60px;}
.titel-port-vanoost {font-size: 1.8rem; font-weight: 500; margin-top: 30px; margin-bottom: 30px;}
.titel-port-vanoost span {display: block; width: 50%; margin: 0 auto;}
.content-port-vanoost {font-size: 1.1rem; line-height: 40px; margin-bottom: 30px;}
.content-port-vanoost span {display: block; width: 50%; margin: 0 auto; padding: 0 4px;}
.button-port-vanoost {color: var(--bs-primary); font-weight: 500;}
.button-port-vanoost a:hover {background-color: var(--bs-primary); color: var(--bs-white);}
.bg-port-abilities {position: relative; min-height: 100vh; display: flex !important; justify-content: center !important; align-items: center !important; background: url(/sites/default/files/domains/vanoost-verzekeringen-verzuim-pensioenen/images/bg-abilities.jpg) center / cover no-repeat; color: var(--bs-white);}
.bg-port-abilities::before {content: ""; position: absolute; inset: 0; background: #154266; background: linear-gradient(180deg, rgba(21, 66, 102, 0.3) 0%, rgba(21, 66, 102, 0.75) 70%, rgba(21, 66, 102, 1) 100%); pointer-events: none;  z-index: 10;}
.bg-port-abilities > * {position: relative; z-index: 20;}
.logo-port-abilities img {width: 50%; height: 50%;}
.icon-port-abilities {margin-top: 30px;}
.bg-icon-port-abilities {display: inline-block; background: var(--ab-accent); padding: 25px 19px; border-radius: 50%;}
.bg-icon-port-abilities i.fa-light {color: var(--bs-white); font-size: 0;}
.bg-icon-port-abilities i.fa-light::before {font-size: 50px;}
.titel-port-abilities {font-size: 1.8rem; font-weight: 500; margin-top: 30px; margin-bottom: 30px;}
.titel-port-abilities span {display: block; width: 50%; margin: 0 auto;}
.content-port-abilities {font-size: 1.1rem; line-height: 40px; margin-bottom: 30px;}
.content-port-abilities span {display: block; width: 50%; margin: 0 auto; padding: 0 4px;}
.button-port-abilities {color: var(--bs-primary); font-weight: 500;}
.button-port-abilities a:hover {background-color: var(--ab-accent); color: var(--bs-white);}




@media (max-width: 575.98px) {
  /* Font */
h1, .h1 {font-size: 1.7rem;}

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

/* Abilities */
body.abilities .header-contact {display: none !important;}
.ab-icon-banner {margin-bottom: 1rem !important;}

/* Portal */
body.portal main {margin-top: 0;}
.bg-port-vanoost.mb-3 {margin-bottom: 0 !important;}
.logo-port-vanoost img, .logo-port-abilities img {width: 70%; height: 70%;}
.bg-icon-port-vanoost i.fa-light::before {font-size: 30px;}
.bg-icon-port-abilities {padding: 21px 19px;}
.bg-icon-port-abilities i.fa-light::before {font-size: 30px;}
.titel-port-vanoost span, .titel-port-abilities span {width: 90%;}
.content-port-vanoost, .content-port-abilities {font-size: 1.0rem;}
.content-port-vanoost span, .content-port-abilities span  {width: 98%;}

/* Maatschappijen */
.overzicht-maatschappijen .col-6 {width: 100%;}
}

@media (min-width: 576px) {
  /* Font */
h1, .h1 {font-size: 1.7rem;}

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

/* Abilities */
body.abilities .header-contact {display: none !important;}

/* Portal */
.bg-port-vanoost.mb-3 {margin-bottom: 0 !important;}
.logo-port-vanoost img, .logo-port-abilities img {width: 50%; height: 50%;}
.titel-port-vanoost span, .titel-port-abilities span {width: 70%;}

/* Maatschappijen */
.overzicht-maatschappijen .col-6 {width: 50%;}
}

@media (min-width: 768px) {
  /* Font */
h1, .h1 {font-size: 2.0rem;}

/* Hero img */
section.section-hero-list col1 {display: none;}
section.section-hero-list .hero-list {width: 90%;}

/* Abilities */
body.abilities .header-contact {display: none !important;}

/* Portal */
.bg-port-vanoost.mb-3 {margin-bottom: 1rem !important;}
.logo-port-vanoost img, .logo-port-abilities img {width: 70%; height: 70%;}
.bg-icon-port-vanoost i.fa-light::before {font-size: 30px;}
.bg-icon-port-abilities {padding: 21px 19px;}
.bg-icon-port-abilities i.fa-light::before {font-size: 30px;}
.titel-port-vanoost span, .titel-port-abilities span {width: 70%;}
.content-port-vanoost, .content-port-abilities {font-size: 1.1rem;}
.content-port-vanoost span, .content-port-abilities span  {width: 80%;}

/* Maatschappijen */
.overzicht-maatschappijen .col-6 {width: 33%;}
}

@media (min-width: 992px) {
  /* Font */
h1, .h1 {font-size: 2.5rem;}

/* Menu */
#main-menu ul.menu li a {padding: 0.7rem 0.7rem;}

/* Zoekbalk */
.denk-theme-search-form .form-control {font-size: 0.62rem;}

/* Hero img */
section.section-hero-list col1 {display: block;}
section.section-hero-list .hero-list {width: 50%;}

/* Abilities */
body.abilities .header-contact {display: flex !important;}

/* Portal */
.logo-port-vanoost img, .logo-port-abilities img {width: 70%; height: 70%;}
.bg-icon-port-vanoost i.fa-light::before {font-size: 60px;}
.bg-icon-port-abilities {padding: 25px 19px;}
.bg-icon-port-abilities i.fa-light::before {font-size: 50px;}
.titel-port-vanoost span {width: 80%;}
.titel-port-abilities span {width: 90%;}
.content-port-vanoost span, .content-port-abilities span  {width: 80%;}
}

@media (min-width: 1200px) {
  /* Font */
h1, .h1 {font-size: 3.1rem;}

/* Menu */
#main-menu ul.menu li a {padding: 0.7rem 1.2rem;}

/* Zoekbalk */
.denk-theme-search-form .form-control {font-size: 0.8rem;}

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

/* Portal */
.logo-port-vanoost img, .logo-port-abilities img {width: 50%; height: 50%;}
.titel-port-vanoost span, .titel-port-abilities span {width: 70%;}
.content-port-vanoost span, .content-port-abilities span  {width: 70%;}
}

@media (min-width: 1400px) {
  /* Zoekbalk */
.denk-theme-search-form .form-control {font-size: 0.9rem;}

/* Portal */
.titel-port-vanoost span, .titel-port-abilities span {width: 50%;}
.content-port-vanoost span, .content-port-abilities span  {width: 50%;}
}