@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://use.typekit.net/mpg8qon.css');

:root {

    --btn-primary-bg: #000;
    --btn-primary-border-color: #000;
    --btn-primary-hover: #00764A;

    --btn-primary-outline-border-color: #189E6C;

    /* --btn-secondary: #E7F9F2;
    --btn-secondary-border-color: #E7F9F2;
    --btn-secondary-hover: #E7F9F2; */

    --main-color-125: #00764A;
    --main-color-100: #14865C;
    --main-color-75: #189E6C;

    --tint-1-50: #98D3BD;
    --tint-1-25: #E7F9F2;
    --tint-2-50: #9A57A5;
    --tint-2-25: #F5EEF6;
    --tint-3-50: #008CD2;
    --tint-3-25: #FFE7AA;
    --tint-4-50: #E10092;
    --tint-4-25: #FFF6E1;

    --font-primary: "Abril Fatface", serif;
    --font-secondary: "DM Sans", sans-serif;
    --font-tertiary: "IBM Plex Sans", sans-serif;

    --Font-weight-body: 350;

}

.btn {
    border-radius: var(--bs-border-radius-pill) !important;
}


.billboard-intro {
    font-size: 19px;
}

.pe--editie_viewer.billboard .article-content-top {
    color: #fff;
}

.pe--editie_viewer.billboard .article-content-wrapper a {
    color: #fff;
}

.pe--editie_viewer.billboard .article-content-wrapper a svg path {
    fill: #fff;
}

.pe--editie_viewer.billboard .article-content-wrapper a:hover {
    color: var(--tint-1-50);
}

.pe--editie_viewer.billboard .article-content-wrapper a:hover svg path {
    fill: var(--tint-1-50);
}




body { 
  color: #000;
  font-family: var(--font-tertiary), sans-serif;
  font-size: 17px;
  font-style: normal;
  font-optical-sizing: auto;
  font-weight: var(--Font-weight-body);
  line-height: 190%;
  letter-spacing: 0;
}


@media (min-width: 1024px) {

    body {
        font-size: 17px;
    }

}


body .text-small {
    font-family: var(--font-tertiary);
    font-size: 17px;
}


h1, .h1 {
    letter-spacing: 0;
    font-size: 28px;
}
.primary-font { letter-spacing: 0; }

h2, .h2 {
    font-size: 44px;
    letter-spacing: 0;
    color: var(--main-color-75);
}

h5, .h5 {
    font-family: var(--font-tertiary);
    font-weight: 300;
    font-size: 19px;
    letter-spacing: 0;
}



@media (min-width: 1024px) {

    h1, .h1 {
        font-size: 58px;
    }

    h2, .h2 {
        font-size: 44px;
    }

}






.btn-outline-secondary {
    color: #000;
    border-color: var(--main-color-75);
}


.btn-outline-secondary:active,
.btn-outline-secondary:hover {
    --bs-btn-hover-bg: var(--main-color-75);
}








.page-title-wrapper {
  background: var(--main-color-100);
  color: #fff;
}



#updatesModalButton svg path {
    fill: var(--main-color-100);
}

.billboard {
  background: var(--main-color-100) url('../images/tvn/tvn_bg.svg') center -100px / 94% auto no-repeat;
  color: #fff;
}

.billboard .article-card {
    border-color: #fff;
}


.billboard .related-title {
    color: #fff !important;
}

.variant1-article { background: var(--tint-1-25) url('../images/tvn/tvn_article_bg.svg') center -100px / 94% auto no-repeat; }
.variant2-article { background: var(--tint-2-25) url('../images/tvn/tvn_article_bg.svg') center -100px / 94% auto no-repeat; }
.variant3-article { background: var(--tint-3-25) url('../images/tvn/tvn_article_bg.svg') center -100px / 94% auto no-repeat; }
.variant4-article { background: var(--tint-4-25) url('../images/tvn/tvn_article_bg.svg') center -100px / 94% auto no-repeat; }


.header-tools-wrapper .btn-outline-primary {
    background: var(--tint-1-25);
    border-color: var(--tint-1-25);
}

.header-tools-wrapper .btn-outline-primary.disabled {
    background: #f5f5f5;
    border-color: #f5f5f5;
}




.badge {
    font-size: 14px;
    font-weight: 550;
}



.article-list-intro-title {
    font-family: var(--font-tertiary);
    font-weight: 350;
    font-size: 19px;
    letter-spacing: 0;
}

.article-top-textwrapper {
    font-size: 20px;
    font-weight: 350;
    line-height: 170%;
}

.article-textblok {
    font-family: var(--font-tertiary);
    font-size: 17px;
    line-height: 190%;
    letter-spacing: 0;
}



@media (min-width: 1024px) {

    .article-top-textwrapper {
        font-size: 23px;
    }

    .article-textblok {
        font-size: 19px;
    }

}




.article-card {
    background: #fff;
}

.article-card.variant1 {
    border: 1px solid var(--tint-1-50);
}
.article-card.variant2 {
    border: 1px solid var(--tint-2-50);
}
.article-card.variant3 {
    border: 1px solid var(--tint-3-50);
}
.article-card.variant4 {
    border: 1px solid var(--tint-4-50);
}

.article-card.variant1 .article-card-title {
    color: var(--main-color-75);
}
.article-card.variant2 .article-card-title {
    color: var(--tint-2-50);
}
.article-card.variant3 .article-card-title {
    color: var(--tint-3-50);
}
.article-card.variant4 .article-card-title {
    color: var(--tint-4-50);
}

.article-intro-top {
    font-size: 19px;
}

.card-hover:hover {
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08), 0 8px 32px 0 rgba(0, 118, 74, 0.16);
}


.pe--tijdschrift_artikel_tegel .badge.text-bg-white,
.badge.text-bg-variant1 {
  color: #000;
  background-color: var(--tint-3-25);
  font-family: var(--font-secondary);
}

.actueel-card-date.badge.text-bg-white {
    background-color: #fff;
}

.actueel-card-title {
    font-weight: 625;
}


.books-section {
    background-color: var(--tint-4-25);
}

.books-section .book-title,
.books-section .book-title span,
.article-card-title {
    font-family: 'abril-display', serif;
    font-size: 25px;
    line-height: 136%;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0;
}

.books-section .book-title span {
    color: var(--main-grijs_100);
    font-family: var(--font-secondary);
    font-size: 14px;
}

.books-section .backdrop {
    font-family: var(--font-primary);
    letter-spacing: 0;
    text-transform: unset;
    font-size: clamp(8rem, 30vw, 24.2rem);
    color: rgba(243, 184, 37, 0.16);
}

.books-section.edities .backdrop {
    left: 0;
    font-family: var(--font-primary);
    letter-spacing: 0;
    text-transform: unset;
    font-size: clamp(8rem, 30vw, 24.2rem);
    color: rgba(24, 158, 108, 0.08);
    word-break: break-all;
    white-space: normal;
}

.pe--formulier .btn-secondary,
.pe--tekst-banner .btn-secondary {
    --bs-btn-bg: #000;
    --bs-btn-border-color: #000;
    color: #fff;
}

.pe--formulier .btn-secondary:hover,
.pe--tekst-banner .btn-secondary:hover {
    --bs-btn-hover-bg: var(--main-color-75);
    --bs-btn-hover-border-color: var(--main-color-75);
    color: #fff;
}

.counter-number {
    font-family: var(--font-primary);
    letter-spacing: 0;
    font-size: 68px;
}

.counter svg path {
    fill: var(--tint-2-50);
}

.Citaat-klein,
uitgelicht,
.quote {
    font-family: var(--font-tertiary);
}