:root {
    --Brand-Color-1: #E9477A;
    --Brand-Color-1-nav-selected-bg: #FDEDF2;
    --Brand-Color-1-enough-contrast: #E41B5B;
    --Brand-Color-1-very-light-line: #EECAD5;
    --Brand-Color-1-enough-contrast-nav-selected: #D21953;
    --Brand-Hover-effect: #C2003E;
    --Text-Heading: #0D0D0D;
    --Text-Core: #333;
    --Text-Link: #E41B5B;
    --Text-Deemphasized: #757575;
    --Line-Input-border: #949494;
    --Neutral-White: #FFF;
    --Neutral-Bg: #F5F5F5;
    --Line-Divider: #E0E0E0;
    --Line-Input-border-enough-contrast-for-bg: #999;
    --Neutral-5: #F2F2F2;
    --Brand-Color-2-enough-contrast: #127EA5;
    --bl---belong: 3rem;
    --RoundedCornersUI: 1rem;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--Text-Heading);
    font-family: Helvetica;
    font-style: normal;
    font-weight: 700;
    line-height: 4rem;
    letter-spacing: -0.08rem;
}

h1 {
    margin: 5rem;
    font-family: "Frank Ruhl Libre";
    line-height: 5rem;
}

p.subheader {
    font-weight: bold;
    font-size: 2.5rem;
    text-align: center;
    line-height: 4rem;
}

h2, h2 span {
    color: var(--Text-Heading);
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 3.5rem;
    margin-top: 0;
    vertical-align: sub;
}

h4 {
    color: var(--Text-Core);
    font-size: 2rem;
    line-height: 3rem;
    border-bottom: 1px solid var(--Line-Input-border);
    padding-bottom: 1rem;
}

a {
    text-decoration: none;
}


.error {
    text-align: center;
}

.error,
.text-danger {
    color: red;
}

@media only screen and (max-width: 1280px) {
    #left-content {
        display: none;
    }
}

/*#region  main menu */

div#main-menu {
    background-color: var(--Neutral-White);
    height: 10rem;
    line-height: 10rem
}

    div#main-menu a {
        color: var(--Text-Core);
    }

        div#main-menu a:hover {
            text-decoration: none;
            color: var(--Brand-Color-1);
        }

    div#main-menu div, div#main-menu ul, div#main-menu ul li {
        float: left;
        height: 10rem;
        line-height: 10rem;
        padding: 0;
        margin: 0;
    }

div.logo {
    color: var(--Text-Core, #333);
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 700;
    background: url(/images/LVE-hartje.png) no-repeat;
    background-position: 2rem 3.5rem;
    padding-left: 6rem !important;
    white-space: nowrap;
}

div.logo-small {
    display: none;
}

div.logo-large {
    display: inline-block;
}

div#main-menu ul li {
    list-style-type: none;
    padding: 0 0.5rem 0 0;
}

    div#main-menu ul li a {
        font-size: 2rem;
        line-height: 2rem;
        padding: 1.5rem 2rem;
    }

        div#main-menu ul li a span {
            display: inline-block;
            vertical-align: middle;
            padding: 0 0.5rem 0 0;
        }

        div#main-menu ul li a:hover {
            border-bottom: var(--Brand-Color-1) 0.1rem solid;
        }

div#main-menu ul.home li#home a,
div#main-menu ul.avatar li#home a,
div#main-menu ul.contact li#contact a,
div#main-menu ul.blogs li#blogs a {
    border-bottom: var(--Brand-Color-1) 0.1rem solid;
    border-radius: 1rem 1rem 0.125rem 0.125rem;
    background: var(--Brand-Color-1-nav-selected-bg);
    color: var(--Text-Link);
}


@media only screen and (max-width: 780px) {
    div.logo-small {
        display: inline-block;
    }

    div.logo-large {
        display: none;
    }

    .col-1 {
        width: 15rem;
    }

    span.menu-text {
        display: none !important;
    }
}

@media only screen and (min-width: 481px) and (max-width: 1279px) {
    div.logo-large {
        width: auto;
        margin-right: 5rem !important;
    }
}

/*#endregion  main menu */

div#body-area {
    min-height: calc(100vh - 17rem);
    background-repeat: no-repeat;
    background-color: var(--Neutral-Bg);
    background-image: url("/images/clovers.png"), url("/images/4-love-clover.png");
    background-size: 35rem, 25rem;
    background-position: 15rem 5rem, 100% 100%;
    position: relative;
    flex: 1;
    overflow: auto;
}

    div#body-area h1 {
        text-align: center;
    }

div#left-content, div#main-content, div#right-content {
    padding: 2rem;
    position: relative;
}

a#heb-je-een-vraag {
    display: block;
    white-space: nowrap;
    border-radius: 1rem;
    margin: 3rem 0;
    padding: 4rem;
    text-align: left;
    background-color: var(--Neutral-White);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
    color: var(--Text-Link);
}

    a#heb-je-een-vraag span {
        vertical-align: bottom
    }

    a#heb-je-een-vraag:hover {
        box-shadow: 1px 6px 6px 1px rgba(0, 0, 0, 0.3);
    }

div.content-block, a.content-block {
    border-radius: 1rem;
    background: var(--Neutral-White);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
    padding: 2rem 4rem;
    margin-bottom: 2rem;
}

.avatar-content-blocks {
    display: flex;
    gap: 2rem;
    justify-content: space-between;
}

    .avatar-content-blocks a.content-block {
        flex: 1;
        text-decoration: none;
        color: var(--Text-Core);
    }

        .avatar-content-blocks a.content-block img {
            display: block;
            margin: 0 auto 1rem auto;
            width: 96%;
            border-radius: 1rem;
        }

        .avatar-content-blocks a.content-block:hover {
            box-shadow: 1px 6px 6px 1px rgba(0, 0, 0, 0.3);
            text-decoration: none;
        }


@media only screen and (max-width: 768px) {
    .avatar-content-blocks {
        flex-direction: column;
    }
}

p.let-op-text {
    text-align: center;
    clear: both;
}

iframe.avatar-iframe {
    overflow: hidden;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: calc(100dvh - 200px);
    border-radius: 2rem;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
}

@media only screen and (max-width: 600px) {
    iframe.avatar-iframe {
        height: 600px;
    }
}

/*region ContactForm*/

div.contact-pagina div {
    margin: 1.5rem 0;
}

div.contact-pagina label {
    font-weight: bold;
}

div.contact-pagina input,
div.contact-pagina textarea {
    width: 100%;
    border-radius: 1rem;
    padding: 1rem 2rem;
    border-color: var(--Line-Input-border-enough-contrast-for-bg);
}

div.contact-pagina textarea {
    height: 24rem;
}


div.contact-pagina .button-area {
    text-align: right;
    margin-top: 2rem;
    display: flex;
    flex-direction: row-reverse;
}

div.contact-pagina button,
div.contact-pagina a {
    width: 20rem;
    padding: 1rem;
    display: inline-block;
    text-align: center;
    margin-left: 2rem;
}

div.contact-pagina button {
    padding: 1.5rem;
}

/*endregion ContactForm*/

/*region Buttons */

.btn-primary {
    display: flex;
    padding: 1.5rem 4rem;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    background: var(--Text-Core);
    color: var(--Neutral-White);
    cursor: pointer;
    font-size: 2rem;
    font-weight: bold;
    border: none;
    position: relative;
    font-family: Helvetica;
}

    .btn-primary:hover {
        background: var(--Brand-Hover-effect);
    }

    .btn-primary.inverse {
        background: var(--Brand-Color-1);
    }

        .btn-primary.inverse:hover {
            background: var(--Brand-Hover-effect);
        }

a.btn-primary:hover {
    text-decoration: none;
}

a.btn-primary.clear {
    background-color: transparent;
    color: var(--Text-Core);
    border: solid 1px var(--Text-Core);
}

.btn-primary span.material-symbols-outlined {
    padding-right: 1rem;
    padding-left: 1rem;
    font-size: 2.5rem;
}

.btn-primary.alt {
    background-color: var(--Brand-Color-1-enough-contrast);
}

    .btn-primary.alt:hover {
        background-color: var(--Brand-Hover-effect);
    }

    .btn-primary.alt:disabled {
        background-color: var(--Brand-Color-1-enough-contrast);
        cursor: default;
    }

/*endregion Buttons */

/*#region Blogs*/

h1.blogs-title {
    background: url('/images/lve-hartje.png') no-repeat 0 50%;
    display: block;
    width: 38rem;
    margin-left: auto;
    margin-right: auto;
}

div#blog-items {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    margin-bottom: 10rem;
}

div.blog-large {
    width: 48%;
}

@media only screen and (max-width: 1280px) {
    div.blog-block {
        width: 48%;
    }
}

@media only screen and (max-width: 768px) {
    div.blog-block {
        width: 100%;
    }
}

div.blog-block a {
    position: relative;
    height: 28rem;
    line-height: 11rem;
    display: flex;
    flex-direction: column;
    z-index: 1;
    padding: 0;
    color: var(--Text-Core);
}

div.blog-large a {
    height: 44rem;
    text-decoration: none;
}

div.blog-image {
    background-color: #ddd;
}

div.blog-block a div.blog-image {
    padding: 0;
    margin: 0;
    height: 11rem;
    border-radius: 1rem 1rem 0 0;
    background-size: cover;
}

div.blog-large a div.blog-image {
    height: 18rem;
}

div.blog-block b {
    display: block;
    line-height: 3rem;
    padding: 2rem;
    overflow: hidden;
    height: 8rem;
}

div.blog-block p {
    line-height: 3rem;
    text-align: left !important;
    padding: 0 2rem;
    margin: 0;
    height: 9rem;
    overflow: hidden;
    color: var(--Text-Deemphasized);
}

div.blog-block a div.read-blog {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    padding: .5rem;
    line-height: 3rem;
    display: block;
    text-align: right;
    color: var(--Brand-Color-1-enough-contrast);
}

div.blog-block a span.material-symbols-outlined {
    vertical-align: middle;
    font-size: 2.5rem;
    padding-right: 1rem
}

div#blog-items div.blog-block a.content-block:hover {
    box-shadow: 1px 6px 6px 1px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

    div#blog-items div.blog-block a.content-block:hover div.read-blog {
        text-decoration: underline;
    }

/*#endregion Blogs */

/*#region  footer */
div#footer {
    clear: both;
    background-color: var(--Text-Core);
    height: 7rem;
    line-height: 7rem;
    color: var(--Neutral-White);
    font-family: Helvetica;
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    margin-top: auto;
}

    div#footer div, div#footer a {
        display: inline-block;
    }

    div#footer a {
        color: var(--Neutral-White);
        margin-left: 10rem;
    }

@media only screen and (max-width: 768px) {
    div#footer {
        height: auto;
    }

        div#footer div, div#footer a {
            display: block;
            margin-left: 0;
        }
}

/*#endregion footer */

/*#region 404 */

div.not-found-page {
    width: 80%;
    margin: 2rem auto;
    text-align: center;
}

    div.not-found-page a.btn-primary {
        width: 50%
    }

/*#endregion 404 */

/*#region avatar cta */

.avatar-container {
    position: relative;
}

.avatar-cta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.5s ease;
}

.avatar-cta-box {
    position: relative;
    background: white;
    border-radius: 12px;
    padding: 4rem 6rem;
    text-align: center;
    max-width: 400px;
}

    .avatar-cta-box h2 {
        color: #333;
        margin-bottom: 2rem;
    }

.avatar-cta-button,
.avatar-cta-later {
    display: inline-block;
    background: #E9477A;
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

    .avatar-cta-button:hover,
    .avatar-cta-later:hover {
        background: #d03a6a;
    }

.avatar-cta-later {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    border: none;
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    font-weight: normal;
}


.avatar-cta-minimized {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background: #E9477A;
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    animation: fadeIn 0.4s ease;
    z-index: 1000;
}

    .avatar-cta-minimized a {
        color: white;
        text-decoration: none;
        font-weight: bold;
        white-space: nowrap;
    }

    .avatar-cta-minimized:hover {
        background: #d03a6a;
    }

/*#endregion avatar cta */