body {
    --green: #009998;
    --lightgreen: #d2e8d8;
    --pink: #f6b4c6;
    --yellow: #f8f4bd;
    --purple: #7c4269;
    font-size: 18px;
}

h2{
    font-size: 1.5em;
}


/* Basiskleuren per pagina */
body,
body.page-home {
    --bs-body-bg-rgb: 0, 154, 152;
}
body.page-wat-wij-doen {
    --bs-body-bg-rgb: 210, 232, 216;
}
body.page-ons-verhaal {
    --bs-body-bg-rgb: 237, 196, 204;
}
body.page-doneren,
body.page-doneerformulier {
    --bs-body-bg-rgb: 248, 244, 189;
}
body.page-aanvragen,
body.page-aanvraagformulier {
    --bs-body-bg-rgb: 124, 66, 105;
}

.navbar-brand {
    height: 200px;
}
@media (max-width: 991px) {
    .navbar-brand {
        height: 80px;
    }
}
.navbar-toggler{
    color: var(--purple);
}

.navbar-brand img {
    height: 100%;
    width: auto;
}
.nav-link{
    background-color: var(--green);
    color: #FFF;
    font-weight: bold;
    text-transform: lowercase;
    letter-spacing: 1px;
}
.nav-item:last-child .nav-link{
    background-color: var(--purple);
    font-weight: bold;
    text-transform: lowercase;
    letter-spacing: 1px;
}
.nav-link:hover,
.nav-link.active,
.nav-item:last-child .nav-link:hover,
.nav-item:last-child .nav-link.active{
    background-color: var(--lightgreen);
    color: var(--green) !important;
}
.nav-item:last-child .nav-link:hover,
.nav-item:last-child .nav-link.active{
    background-color: var(--pink);
    color: var(--purple) !important;
    font-weight: bold;
    text-transform: lowercase;
    letter-spacing: 1px;
}

main{
    background-size: 2600px auto;
    background-repeat: no-repeat;
    background-position: center -15px;
    padding-top: 80px;
}

body main{
    color: #FFF;
    background-color: rgb(var(--bs-body-bg-rgb));
    padding-top: 95px;
    background-image: url("/images/bg-home.svg?v=5");
}
body.page-wat-wij-doen main {
    background-image: url("/images/bg-wat-wij-doen.svg?v=5");
}
body.page-ons-verhaal main {
    background-image: url("/images/bg-ons-verhaal.svg?v=6");
}
body.page-doneren main,
body.page-doneerformulier main{
    background-image: url("/images/bg-doneren.svg?v=5");
}
body.page-aanvragen main,
body.page-aanvraagformulier main{
    background-image: url("/images/bg-aanvragen.svg?v=5");
}

body main strong{
    font-weight: 700;
}
body.page-404 main strong,
body.page-home main strong {
    color: var(--pink);
}
body.page-wat-wij-doen main {
    color: var(--green);
}
body.page-ons-verhaal main,
body.page-ons-verhaal main strong {
    color: var(--purple);
}
body.page-doneren main,
body.page-doneerformulier main{
    color: var(--green);
}
body.page-aanvragen main,
body.page-aanvraagformulier main{
    color: #FFF;
}
body.page-aanvragen main{
    text-align: center;
}
body main a{
    color: inherit;
}
body main a:hover{
    text-decoration: underline !important;
}

body.page-wat-wij-doen main .btn,
body.page-doneren main .btn,
body.page-doneerformulier main .btn{
    color: #FFF;
    background-color: var(--green);
    font-weight: bold;
}
body.page-ons-verhaal main .btn{
    color: var(--pink);
    background-color: var(--purple);
    font-weight: bold;
}
body.page-home main .btn,
body.page-aanvragen main .btn,
body.page-aanvraagformulier main .btn{
    color: var(--purple);
    background-color: var(--pink);
    font-weight: bold;
}
body main .btn:hover{
    text-decoration: none !important;
    opacity: 0.8;
    font-weight: bold;
}
@media (max-width: 1400px) {
  body main{
    padding-top: 110px;
  }
}
@media (max-width: 922px) {
  body main{
    background-size: 1800px auto;
	background-position: left -550px top;
    padding-top: 60px;
  }
}
@media (max-width: 600px) {
  body main{
    background-size: 1200px auto;
	  background-position: left -370px top;
  }
}

/*@media (max-width: 767.98px) {*/
/*    body.page-home .hero-wave::before {*/
/*        background-image: url("/images/bg-home-mobile.svg");*/
/*    }*/
/*    body.page-ons-verhaal .hero-wave::before {*/
/*        background-image: url("/images/bg-ons-verhaal-mobile.svg");*/
/*    }*/
/*}*/

/* H1: verborgen op desktop, zichtbaar op mobiel */
.page-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 767.98px) {
    .page-title {
        position: static;
        width: auto;
        height: auto;
        margin-bottom: 1rem;
        overflow: visible;
        clip: auto;
        white-space: normal;
        font-size: 1.8rem;
        font-weight: 700;
    }
}

.imgHolder{
    width: 100%;
    height: 0px;
    padding-top: 93%;
    overflow: hidden;
}
.imgHolder img.pageImage {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 10%;
    top: 10%;
    object-fit: cover;
    width: 80%;
    height: 80%;
}
.imgHolder svg.imgMask {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
}
.imgHolder svg.imgMask .maskBg {
    fill: rgb(var(--bs-body-bg-rgb));
}
.page-ons-verhaal .imgHolder svg.imgMask .maskBorder {
    fill: var(--yellow);
}
.page-wat-wij-doen .imgHolder svg.imgMask .maskBorder,
.page-aanvragen .imgHolder svg.imgMask .maskBorder,
.page-aanvraagformulier .imgHolder svg.imgMask .maskBorder{
    fill: var(--pink);
}

.page-wat-wij-doen .blocksHolder>div:nth-child(4n) .imgHolder svg.imgMask .maskBorder{
    fill: var(--purple);
}
.page-wat-wij-doen .blocksHolder>div:nth-child(4n-1) .imgHolder svg.imgMask .maskBorder{
    fill: var(--pink);
}
.page-wat-wij-doen .blocksHolder>div:nth-child(4n-2) .imgHolder svg.imgMask .maskBorder{
    fill: var(--yellow);
}
.page-wat-wij-doen .blocksHolder>div:nth-child(4n-3) .imgHolder svg.imgMask .maskBorder{
    fill: var(--green);
}


footer{
    background-color: rgba(var(--bs-body-bg-rgb), 0.35);
    font-size: 0.7rem;
}
footer .d-flex{
    border-right-color: rgb(var(--bs-body-bg-rgb)) !important;
}
@media (max-width: 991px) {
    footer .d-flex{
        border: none !important;
    }
}

footer h6, footer a, footer p{
    color: rgb(var(--bs-body-bg-rgb));
}
footer .anbi{
    display: block;
    height: 40px;
    margin-bottom: 5px;
    margin-left: 0px;
    margin-right: auto;
}



.page-doneren footer h6, .page-doneren footer a, .page-doneren footer p,
.page-doneerformulier footer h6, .page-doneerformulier footer a, .page-doneerformulier footer p,
.page-wat-wij-doen footer h6, .page-wat-wij-doen footer a, .page-wat-wij-doen footer p{
    color: var(--green);
}
.page-ons-verhaal footer h6, .page-ons-verhaal footer a, .page-ons-verhaal footer p,
.page-aanvragen footer h6, .page-aanvragen footer a, .page-aanvragen footer p,
.page-aanvraagformulier footer h6, .page-aanvraagformulier footer a, .page-aanvraagformulier footer p{
    color: var(--purple);
}