/* Nodig: de wrapper heeft overflow-x: hidden, en daardoor werkt sticky niet */
.outer-wrapper {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Header vastzetten bovenaan */
#content-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
}

/* Witte achtergrond over de volle breedte, zonder dat het menu wordt afgeknipt */
#content-header::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100vmax;
  right: -100vmax;
  background: #fff;
  z-index: -1;
  pointer-events: none;
}

/* Mobiel/smal scherm: offcanvas-menu boven de sticky header tonen */
@media (max-width: 991.98px) {
  #portal-globalnav-wrapper {
    z-index: auto !important;
  }
}
/* Mobiel menu: blauwe achtergrond rood maken */
#offcanvasNavbar {
  --bs-offcanvas-bg: #e30713;
  background-color: #e30713 !important;
}

#offcanvasNavbar .nav-item {
  background-color: #e30713 !important;
}

/* Hamburgermenu ook tonen tussen 992px en 1199px */
@media (min-width: 992px) and (max-width: 1199.98px) {
  body .navbar-expand-lg .navbar-toggler { display: block; }

  body .navbar-expand-lg .offcanvas {
    position: fixed !important; top: 0; right: 0; bottom: 0;
    z-index: 1045 !important;
    width: 400px !important; max-width: 100%; height: 100vh !important;
    visibility: hidden !important;
    background-color: var(--bs-offcanvas-bg) !important;
    transform: translateX(100%) !important;
    transition: transform .3s ease-in-out !important;
  }
  body .navbar-expand-lg .offcanvas.showing,
  body .navbar-expand-lg .offcanvas.show:not(.hiding) { transform: none !important; }
  body .navbar-expand-lg .offcanvas.showing,
  body .navbar-expand-lg .offcanvas.hiding,
  body .navbar-expand-lg .offcanvas.show { visibility: visible !important; }

  body .navbar-expand-lg .offcanvas .offcanvas-header { display: flex !important; }
  body .navbar-expand-lg .offcanvas .offcanvas-body { display: block !important; flex-grow: 1; padding: 1rem; overflow-y: auto; }
  body .navbar-expand-lg .navbar-nav { flex-direction: column !important; }

  /* submenu's onder elkaar i.p.v. als dropdown */
  body .navbar-nav li ul { position: static !important; z-index: auto !important; left: auto !important; top: auto !important; }
  body .navbar-nav li ul li a { min-width: 0; }

  /* zelfde fix als eerder: menu boven de sticky header */
  body #portal-globalnav-wrapper { z-index: auto !important; }
}

/* Hamburgerknop rechts in de header (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  body #portal-logo-wrapper { display: contents; }
  body #portal-logo { order: -2; margin-bottom: 1rem; }
  body #portal-logo-wrapper .navbar { order: 99; margin-left: .5rem; }
}

footer#portal-footer-wrapper {background: #2D3587 !important ;color: #FFFFFF;}

.template-album_view .col.mb-5,  .mosaic-tile-content #content-core .col.mb-5 { min-width: 300px; max-width: 300px}

.template-album_view .portletWrapper .card {background: none; border: none; color:white}

.template-album_view  #portal-column-one {min-width: 100%; display: flex;  flex-wrap: wrap;
        background: #086ca3; padding: 1rem; margin: 2rem 10px 3rem 10px !important; border-radius: 5px
        }

.template-album_view  #portal-column-one .portletWrapper  { padding: 1rem; margin: 1rem 1rem 0 1rem !important;  min-width: 200px;}

body.template-album_view.col-one  #portal-column-content {width: 100%; min-width: 100%; max-width: 100%}


 

@media (max-width: 992px) {

    body.template-album_view #main-container {
    display: flex !important;
    flex-direction: column-reverse;
    }
    
    .template-album_view  #portal-column-one { max-width: calc(100% - 30px): }
    
    .template-album_view .col.mb-5,  .mosaic-tile-content #content-core .col.mb-5 { min-width: 300px; max-width: 100%;}

}


/* Achtergrondkleur voor elementen met plone-background */
.accordian .plone-background, option[value="plone-background"] { background: #E30812 !important; }
.fa, .accordian-expand { color: #E30812 !important; }

#portal-anontools {display: none !important; }

.collection_item { background: none !important; border-bottom: 1px solid #2C5D9F !important;}

figure a div { display: none; }

.col-md-4 { flex: 0 0 auto; width: 32.33333333% !important; min-width: 300px; margin: auto;}

.mosaic-grid #content {margin-bottom: 50px !important; }

table > tbody > tr > td, table { border: none; background: transparent !important; }
.feature-item i { display: none; }
.table > :not(caption) > * > *, table.invisible-grid > :not(caption) > * > *, table.plain > :not(caption) > * > *, table.listing-compact > :not(caption) > * > *, table.listing > :not(caption) > * > * {
  padding: 0.0rem 0.0rem ! important;}

.documentDescription {
  border-bottom: 1px solid #20a7de;
  color: var(--bs-heading-color)! important;
  padding-bottom: 0.5em;
  margin-bottom: 1em;
}

#xxcontent-header { background: url('/Plone4/afb/vast/google-review-blonk-hydrauliek.png') no-repeat center !important; background-position-y: 1em !important; }


html:root {
--bs-body-font-size: 1.0rem;
}
 
#portal-footer-wrapper h2 { --bs-heading-color: white; color: white !important; font-size: 1.2rem; }

.formControls {background: #F44336 !important; }
.btn:hover, .btn:focus {color: white; text-decoration: none; }

#content-header,
.doormat.row,
.doormat.row .col-xs-12,
.mosaic-grid-row  {max-width: 1170px !important}
body .mosaic-grid-row.mosaic-grid-row-fluid { width: calc(100vw + 30px) !important; max-width: calc(100vw + 30px) !important; margin-left: -15px !important; margin-right: -15px !important}

.
.doormat h2 {color: white;text-align: left;font-size: 1.2rem; margin-bottom: 1em;}

.doormat.row {
    margin: auto;
    width: 100%;
}

@media (min-width: 1400px) {
    .mosaic-grid-row  {max-width: 1170px !important}
    
bod.mosaic-grid-row.mosaic-grid-row-fluid { width: calc(100vw + 30px)   !important; max-width: calc(100vw + 30px) !important; margin-left: -15px; margin-right: -15px}
 
}



body .mosaic-grid-row.mosaic-grid-row-fluid .mosaic-grid-row>*  { padding-left: 0; padding-right: 0}

#content .mosaic-tile-content  h1.documentFirstHeading {
    font-weight: 500;
     margin-top: 20px;
     line-height: 160%;
}

#main-container  .btn {
padding: 21px 21px;
font-size: 16px;
}

.phonebutton.btn-primary ,
#main-container .btn-primary {
background-color: #E30713;
font-weight: 600;
}

.phonebutton.btn-primary{
margin-bottom: 2rem;
line-height: 130%;
font-size: 20px;
}

.phonebutton.btn-primary svg {
    top:0;
    left:0;
    width: auto;
    height: auto;
    margin-right: 1rem;
}