@font-face {
    font-family: 'Inter';
    src: url("assets/fonts/Inter_28pt-Regular.ttf");
}

body {
    /*margin: 15px 15px;*/
    background-color: #fff;
    /*padding: 0 20px;*/
}

:root {
    /* Font-groottes */
    --font-xxl: 40px; /* h1 */
    --font-xl: 35px; /* h2 */
    --font-lg: 30px; /* h3 */
    --font-md: 18px; /* text */
    --font-sm: 16px; /* text */

    /* Spacing voor headings */
    --spacing-lg: 24px;
    --spacing-md: 16px;

    /* display */
    --display-flex: flex;
    --display-grid: grid;
    --display-inline-block: inline-block;

    /* margin */
    --margin-0: 0;
    --margin-auto: 0 auto;

    /* padding */
    --padding-lg: 60px 0;
    --padding-md: 16px 0;

    /* flex-direction */
    --flex-direction: column;

    /* grid */
    --grid-template-columns-1: 1fr;

    /* gap */
    --gap-xl: 40px;
    --gap-lg: 32px;
    --gap-md: 24px;
    --gap-sm: 16px;
    --gap-xs: 12px;

    /* width */
    --width-100: 100%;
    --max-width-lg: 1520px;

    /* height */
    --height-auto: auto;

    /* text-align */
    --text-align: left;

    /* wrap */
    --flex-wrap: wrap;

    /* opacity */
    --opacity: .8;

    /* Kleur */
    --color-primary: #321E28;
    --color-secundary: #3F3F3F;

    /* border */
    --border-basic: 1px solid #ccc;

    /* text-decoration */
    --text-decoration: none;

    /* line-height */
    --line-height-lg: 1.5;
}

/* component CSS */
h2 {
    font-size: var(--font-xl);
}
h3 {
    font-size: var(--font-lg);
}

/*section {*/
/*    padding: var(--padding-lg);*/
/*}*/

:root {
    --menu-toggle-padding: 25px 34px;
    --menu-toggle-toggled-padding: 0px 0px;
}
@media (max-width: 769px) {
    :root {
        --menu-toggle-padding: 0;
    }
}

/* hamburger menu */
.menu-toggle {
    display: block;
    padding: var(--menu-toggle-padding) !important;
    font-size: 24px;
    margin: 0 !important;
}

.main-navigation.toggled .menu-toggle {
    padding: var(--menu-toggle-toggled-padding) !important;
}

.main-navigation .main-nav {
    display: none;
}

.main-navigation.toggled .main-nav {
    display: block;
}

.main-navigation .main-nav ul li a,
.main-navigation .main-nav .menu-item-has-children > a,
.widget_nav_menu .menu-item-has-children > a {
    padding-left: 0;
    padding-right: 0;
    position: relative;
}

.main-navigation .main-nav .menu-item-has-children > a::after,
.widget_nav_menu .menu-item-has-children > a::after {
    content: "☰";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    margin: 0;
    padding: 0 !important;
}