body {
  font-family:'Raleway';
 font-size:1.08em;
 font-weight:var(--body-font-weight);
 line-height:var(--body-line-height);
 margin:0;
 text-align:var(--body-text-align)
}


.container-header {
 background-color:#d99481;
 background-image:none;
 background-image:none;
 -webkit-box-shadow:inset 0 5px 5px rgba(0,0,0,.03);
 box-shadow:inset 0 5px 5px rgba(0,0,0,.03);
 position:relative;
 z-index:10
}

/*lijnen van alle vakken/indeling pagina's */

.card {
  --card-spacer-y:1rem;
  --card-spacer-x:rem;
  --card-title-spacer-y:.5rem;
  --card-title-color: ;
  --card-subtitle-color: ;
  --card-border-width:var(--border-width);
  --card-border-color:#ecf4f4;
  --card-border-radius:var(--border-radius);
  --card-box-shadow: ;
  --card-inner-border-radius:calc(var(--border-radius) - (var(--border-width)));
  --card-cap-padding-y:.5rem;
  --card-cap-padding-x:1rem;
  --card-cap-bg:rgba(var(--body-color-rgb),.03);
  --card-cap-color: ;
  --card-height: ;
  --card-color: ;
  --card-bg:var(--body-bg);
  --card-img-overlay-padding:1rem;
  --card-group-margin:.5em;
  height:var(--card-height);
  color:var(--body-color);
  word-wrap:break-word;
  background-color:var(--card-bg);
  border:(--card-border-width)solid var(--card-border-color);
  border-radius:var(--card-border-radius);
  background-clip:border-box;
  flex-direction:column;
  min-width:0;
  display:flex;
  position:relative
}

body.wrapper-fluid .site-grid {
  grid-gap:1em;
  grid-template-columns:[full-start]minmax(0,1fr)[main-start]repeat(4,minmax(0,25%))[main-end]minmax(0,1fr)[full-end]
}


/* css voor foto op start-pagina onderkant */

.foto-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.foto-container img {
  width: 100%;
  max-width: 323px;
  height: auto;
  border-radius: 8px;
}

@media (min-width: 768px) {
  .foto-container {
    flex-direction: row;
    justify-content: 
  }
}


/* blokken startpagina */

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  padding: 10px;
}

.grid-item {
  padding: 10px;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 3px 2px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
  margin: 5px;
  height: auto;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
}


.tekstvak {
  padding: 10px;
  color: black;
  background-color: white;
}


@media screen and (max-width: 792px) {
  .grid-container {
    display: table-row;
    grid-template-columns: auto auto auto auto;
    padding: 10px;
  }
}

@media screen and (max-width: 792px) {
  .tekstvak {
    width: 100%;
  }
}

.float-left.item-image {
  text-align: right;
}

/* agenda-blok lay-out */

.mijnmodule1 {
  background-color:#7abd74;
  color: white;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.mijnmodule1 img {
  border: 2px solid black;
}

.links {
  color: white;
}


/* link eigenschappen */

a:not(.btn):focus,
a:not(.btn):hover {
 color:#229318;
}

a:not([class]) {
 text-decoration: none;
}


/* voetnoot website */

.footer {
  background-color: #fff;
  background-image: none;
  color: #000;
}

/* logo responsive */

@media screen and (max-width: 1600px) {
  .responsive-image {
    max-width: 180px;  
  }
}

/* navbar vaste positie */


@media screen and (max-width: 992px) {
.position-sticky {
  position: sticky !important;
}

@media screen and (max-width: 992px) {  
.sticky-top {
 top:0;
}  
  
@supports (display: grid) {
    @media (min-width: 992px) {
        .site-grid {
            grid-template-areas:
              ". top-a top-a top-a top-a ."
              ". top-b top-b top-b top-b ."
              ". side-l comp comp side-r ."
              ". bot-a bot-a bot-b bot-b ."
              ". banner banner banner banner ."
        }
    }
}