#werk {
    margin-bottom:80px;
}

.btn-yellow {
    background-color: #F8F552;
    border:1px solid #000;
    border-radius:30px;
    padding:10px 20px 10px 20px;
    margin-bottom:20px;
}

.btn-yellow:hover {
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 30px;
    padding: 10px 20px 10px 20px;
}

/* =========================================
   RESET
========================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Regular.woff2') format('woff2'), url('/fonts/Inter-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    background: #000;
    color: #fff;
    font-family: Inter, Arial, Helvetica, sans-serif;
}

.text-small {
    font-size:14px;
}

.text-medium {
    font-size: 17px;
}

.text-large {
    font-size: 23px;
}
.text-extralarge {
    font-size: 32px;
}

.text-extraextralarge {
    font-size: 64px;
}

/* =========================================
   MOBILE FIRST
========================================= */
@media (max-width:768px) {

    .hipka-nav.container {
        padding-left: 0;
        padding-right: 0;
    }

    .mobile-menu-wrapper {
        width: 100%;
        min-height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }

    .nav-left,
    .nav-right {
        position: static;
        transform: none;
    }

    .nav-left {
        display: flex;
        align-items: center;
    }

    .nav-right {
        display: flex;
        align-items: center;
    }

    .navbar-brand {
        margin: 0;
    }

    .content-block img,
    .content-block video {
        width: 100%;
        border-radius: 20px !important;
    }

    .content-block.hero img,
    .content-block.footer img {
        border-radius: 0 !important;
    }
}

.content-block {
    display: flow-root;
    position: relative;
    width: calc(100% - 40px);
    margin: 20px auto 0;
}

    /* MEDIA */

    .content-block img,
    .content-block video {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        border-radius:40px;
    }

    /* HERO & FOOTER */

    .content-block.hero,
    .content-block.footer {
        width: 96%;
    }

/* =========================================
   PLACEHOLDERS
   Alleen voor de voorbeeldtemplate
========================================= */

.placeholder {
    width: 100%;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
}

.placeholder-hero {
    aspect-ratio: 16 / 9;
}

.placeholder-wide {
    aspect-ratio: 1100 / 700;
}

.placeholder-portrait {
    aspect-ratio: 480 / 750;
}

.placeholder-square {
    aspect-ratio: 1 / 1;
}

.placeholder-footer {
    min-height: 320px;
}

/* =========================================
   DESKTOP
========================================= */

@media (min-width: 992px) {

    :root {
        --content-width: min(1300px, calc(100vw - 80px));
        --column-gap: 140px;
        --row-gap: 140px;
        --column-width: calc( (var(--content-width) - var(--column-gap)) / 2 );
        --content-left: calc( (100vw - var(--content-width)) / 2 );
    }

    /* BASIS */

    .content-block {
        width: var(--content-width);
        margin: 0 auto;
        transform: none;
    }

        /* HERO */

        .content-block.hero {
            width: 96%;
            margin: 40px auto 140px;
        }

        /* FULL WIDTH */

        .content-block.full:not(.hero):not(.footer) {
            width: var(--content-width);
            margin: 0 auto 140px;
        }

        /* FOOTER */

        .content-block.footer {
            width: 96%;
            margin: 0 auto 40px;
        }

        /* HALF WIDTH */

        .content-block.half {
            width: var(--column-width);
            margin-top: 0;
            margin-bottom: 140px;
            margin-right: 0;
        }

            /* LINKERKOLOM */

            .content-block.half.is-left {
                margin-left: var(--content-left);
                margin-bottom: 0;
            }

            /* RECHTERKOLOM */

            .content-block.half.is-right {
                margin-left: calc( var(--content-left) + var(--column-width) + var(--column-gap) );
                transform: translateY( var(--right-offset, 0px) );
                margin-bottom: var(--row-after, 140px);
            }

            /* LOS HALF BLOK */

            .content-block.half.is-single-half {
                margin-left: var(--content-left);
                margin-bottom: var(--row-gap);
            }

        .content-block.full:not(.hero):not(.footer) .text-fw-wrapper {
            /*width: 75%;
            max-width: 75%;*/
        }

    /* Links uitlijnen */
    .text-fw-wrapper.align-left {
        margin-left: 0;
        margin-right: auto;
    }

    /* Rechts uitlijnen */
    .text-fw-wrapper.align-right {
        margin-left: auto;
        margin-right: 0;
    }

    /* Centreren */
    /*.text-fw-wrapper.align-center {
        margin-left: auto;
        margin-right: auto;
    }*/

}