/* Body background color (outside wrapper) */
body {
    background-color: var(--base-200);
}

/* body {
	margin-bottom: 0; // match to your theme
} */

/* Site Wrapper */
.site-wrapper {
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
    background-color: var(--base-100);
}

/* Set the main content area to a minimum of 65vh */
#main {
    min-height: 65vh
}

/* Specify the size of 
the JPG/PNG/WEBP logo -
for a SVG logo add via a php file 
img.header-image.is-logo-image {
	width: 112px;
    height: 200px;
} */

/* GeneratePress Theme - Solar Template */
.highlight-word .gb-highlight {
                font-style: italic;
}
.highlight-word mark.gb-highlight {
    background-image: linear-gradient(180deg,var(--brand-alt) 0%,var(--brand-alt) 100%);
    background-position: 0 86%;
    background-repeat: no-repeat;
    background-size: 100% 30%;
    padding-left: 0.1em;
    padding-right: 0.1em;
    margin-right: -0.1em;
    margin-left: -0.1em;
}
.gb-highlight {
    color: unset;
}
.shadow {
	box-shadow: 0 3px 10px 5px rgba(0,0,0,0.05);
}

.main-navigation.toggled ul {
    background-color: var(--brand);
}

/* Change the hero background image on the Home page for mobile */
@media (max-width: 768px) {
    .gb-container.gb-container-5dee9fb2:before {
        background-image: url(https://blauwdruk.instawp.xyz/wp-content/uploads/header-achtergrond-800px.webp);
    }
}
/* Change the hero background image on all other pages for mobile */
@media (max-width: 768px) {
    .gb-container.gb-container-8b6d1c4b:before {
        background-image: url(https://blauwdruk.instawp.xyz/wp-content/uploads/header-achtergrond-800px.webp);
    }
}

/* Insert background image in the header of 404 Template Element */
.gb-container-8b6d1c4b:before {
    background-image: url(https://blauwdruk.instawp.xyz/wp-content/uploads/header-achtergrond.webp);
}

/* Styling of Block Quotes and Citations */
.wp-block-quote{
	position: relative;
	border-left: 0; 
	padding-left: 32px;
	padding-block: 0;
	margin-block: 32px;
}

.wp-block-quote::before{
	position: absolute;
	content: ''; background-image: url('https://blauwdruk.instawp.xyz/images/ck-shape.svg');
	background-size: 100% 100%;
	left: 0;
	top: 0;
	height: 100%;
	width: 24px;
	transform: rotate(180deg) scale(-1);
	
}

cite {
	font-size: .8rem; 
	font-family: Arial !important;
	font-style: normal;
	letter-spacing: .072em;
	font-weight: 600;
}


/* Breadcrumbs */
#breadcrumbs {
     box-shadow: 1px 1px var(--base-200);
     background: var(--base-300);
     border: 1px solid var(--base-300);
     border-radius: 5px;
	 padding: 0 5px 0 10px;
     font-size: 1rem;
}

/* Breadcrumbs */
.yoast-breadcrumbs {
	margin-left: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
}

/* Breadcrumbs */
.breadcrumbs {
     font-size: 1rem;
	 padding: 20px;
}


/* cormorant-garamond-regular - latin */
@font-face {
    font-display: swap; 
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400;
    src: url('https://blauwdruk.instawp.xyz/fonts/cormorant-garamond-v16-latin-regular.woff2') format('woff2'); 
  }
  /* cormorant-garamond-700 - latin */
  @font-face {
    font-display: swap; 
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 700;
    src: url('https://blauwdruk.instawp.xyz/fonts/cormorant-garamond-v16-latin-700.woff2') format('woff2'); 
  }

/* raleway-regular - latin */
@font-face {
    font-display: swap; 
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: url('https://blauwdruk.instawp.xyz/fonts/raleway-v29-latin-regular.woff2') format('woff2'); 
  }
  /* raleway-700 - latin */
  @font-face {
    font-display: swap; 
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: url('https://blauwdruk.instawp.xyz/fonts/raleway-v29-latin-700.woff2') format('woff2'); 
  }



/* Make the section padding on GeneratePress elements match GenerateBlocks */
.inside-header{
	padding-inline: 1.5rem;
}

@media (max-width: 768px) { 
.inside-header{
	padding-inline: 1rem;
}
}

.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header{
		padding-inline: 1.5rem;
	padding-block: 5rem;
}

@media (min-width: 769px) and (max-width: 1024px) { 
.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header{
	padding-block: 4.5rem;
}
} 

@media (max-width: 768px) { 
.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header{
		padding-inline: 1rem;
	padding-block: 3rem;
}
}

/* Line limits */
.line-limit-3,
.line-limit-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.line-limit-3 {
    -webkit-line-clamp: 3
}

.line-limit-2 {
    -webkit-line-clamp: 2
}

/* Aspect Ratios */
.ar-16-9,
.ar-9-16,
.ar-4-3 {
    object-fit: cover
}

.ar-16-9 {
    aspect-ratio: 16/9
}

.ar-9-16 {
    aspect-ratio: 9/16
}

.ar-4-3 {
    aspect-ratio: 4/3
}

.ar-1-1 {
    aspect-ratio: 1/1
}


/* No Underline */
.no-ul,
.no-ul a {
    text-decoration: none
}

/* If a link is needed in the Cookie popup message - give the link the class 'jv-one' */
a.jv-one:link {color:var(--base-200);text-decoration:underline;}
a.jv-one:visited {color:var(--base-200);text-decoration:none;}
a.jv-one:hover {text-decoration:none;}

/* Buttons */
a.gb-button-brand {
    display: inline-flex;
    padding: .8em 2.5em;
    border-radius: .3em;
    border: 1px solid var(--brand);
    background-color: var(--brand);
    color: var(--base-0);
}

a.gb-button-brand:hover, a.gb-button-brand:active, a.gb-button-brand:focus {
    border-color: var(--brand-alt);
    background-color: var(--brand-alt);
    color: var(--base-0);
}

a.gb-button-brand-alt {
    display: inline-flex;
    padding: .8em 2.5em;
    border-radius: .3em;
    border: 1px solid rgba(1, 51, 125, 0.1);
    background-color: rgba(1, 51, 125, 0.1);
    color: var(--brand);
}

a.gb-button-brand-alt:hover, a.gb-button-brand-alt:active, a.gb-button-brand-alt:focus {
    border-color: var(--brand-alt);
    background-color: var(--brand-alt);
    color: var(--base-0);
}

a.gb-button-brand-outline {
    display: inline-flex;
    padding: .8em 2.5em;
    border-radius: .3em;
    border: 1px solid var(--brand);
    background-color: rgba(0, 0, 0, 0);
    color: var(--brand);
}

a.gb-button-brand-outline:hover, a.gb-button-brand-outline:active, a.gb-button-brand-outline:focus {
    border-color: var(--brand-alt);
    background-color: var(--brand-alt);
    color: var(--base-0);
}

a.gb-button-guestbook {
    display: inline-flex;
    padding: .8em 2.5em;
    border-radius: .3em;
    border: 1px solid var(--base-0);
    background-color: transparent;
    color: var(--base-0);
}

a.gb-button-guestbook:hover, a.gb-button-guestbook:active, a.gb-button-guestbook:focus {
    border-color: var(--brand-alt);
    background-color: var(--brand-alt);
    color: var(--base-0);
}

a.gb-button-brand-ghost {
    display: inline-flex;
    padding: .8em 2.5em;
    border-radius: .3em;
    border: 1px solid rgba(1, 51, 125, 0);
    background-color: rgba(0, 0, 0, 0);
    color: var(--base-600);
}

a.gb-button-brand-ghost:hover, a.gb-button-brand-ghost:active, a.gb-button-brand-ghost:focus {
    border-color: rgba(6, 67, 158, 0);
    background-color: rgba(255, 255, 255, 0);
    color: var(--base-700);
}

a.gb-button-action {
    display: inline-flex;
    padding: .8em 2.5em;
    border-radius: .3em;
    border: 1px solid var(--action);
    background-color: var(--action);
    color: var(--base-0);
}

a.gb-button-action:hover, a.gb-button-action:active, a.gb-button-action:focus {
    border-color: var(--action-alt);
    background-color: var(--action-alt);
    color: var(--base-0);
}


a.gb-button-brand-on-dark {
    display: inline-flex;
    padding: .8em 2.5em;
    border-radius: .3em;
    border: 1px solid var(--base-200);
    background-color: var(--base-200);
    color: var(--base-600);
}

a.gb-button-brand-on-dark:hover, a.gb-button-brand-on-dark:active, a.gb-button-brand-on-dark:focus {
    border-color: var(--base-0);
    background-color: var(--base-0);
    color: var(--base-800);
}

a.gb-button-brand-alt-on-dark {
    display: inline-flex;
    padding: .8em 2.5em;
    border-radius: .3em;
    border: 1px solid rgba(252, 254, 255, 0.2);
    background-color: rgba(252, 254, 255, 0.2);
    color: var(--base-100);
}

a.gb-button-brand-alt-on-dark:hover, a.gb-button-brand-alt-on-dark:active, a.gb-button-brand-alt-on-dark:focus {
    border-color: var(--base-0);
    background-color: var(--base-0);
    color: var(--base-800);
}

a.gb-button-brand-outline-on-dark {
    display: inline-flex;
    padding: .8em 2.5em;
    border-radius: .3em;
    border: 1px solid var(--base-100);
    background-color: rgba(252, 254, 255, 0);
    color: var(--base-100);
}

a.gb-button-brand-outline-on-dark:hover, a.gb-button-brand-outline-on-dark:active, a.gb-button-brand-outline-on-dark:focus {
    border-color: var(--base-0);
    background-color: var(--base-0);
    color: var(--base-800);
}

a.gb-button-brand-ghost-on-dark {
    display: inline-flex;
    padding: .8em 2.5em;
    border-radius: .3em;
    border: 1px solid rgba(252, 254, 255, 0);
    background-color: rgba(252, 254, 255, 0);
    color: var(--base-200);
}

a.gb-button-brand-ghost-on-dark:hover, a.gb-button-brand-ghost-on-dark:active, a.gb-button-brand-ghost-on-dark:focus {
    border-color: rgba(255, 255, 255, 0);
    background-color: rgba(255, 255, 255, 0);
    color: var(--base-0);
}

:root {
    --radius-xs: .125rem;
    --radius-s: .25rem;
    --radius-m: .5rem;
    --radius-l: 1rem;
    --radius-xl: 1.5rem;
    --radius-xxl: 2rem;
    --radius-50: 50%;
    --radius-circle: 50%
}

/*** TYPOGRAPHY  ***/

:root {
    /* These HAVE TO match what is in the Customizer > Typography: 
    Font manager: add your fonts 
    Typography manager: Base -> 'HTML' and Content -> 'All headings' */ 
    --headline-font: 'Cormorant Garamond', serif;
    --body-font: Raleway, sans-serif;
    --fs-body: clamp(1rem, calc(0.96rem + 0.21vw), 1.125rem);
    --fs-headline-xxl: clamp(4rem, 3.45rem + 2.75vw, 6.75rem);
    --fs-headline-xl: clamp(3.05rem, calc(2.24rem + 4.08vw), 5.5rem);
    --fs-headline-h1: clamp(2.44rem, calc(1.96rem + 2.41vw), 3.89rem);
    --fs-headline-h2: clamp(1.95rem, calc(1.69rem + 1.33vw), 2.75rem);
    --fs-headline-h3: clamp(1.56rem, calc(1.44rem + 0.64vw), 1.94rem);
    --fs-headline-h4: clamp(1.25rem, calc(1.21rem + 0.21vw), 1.38rem);
    --fs-headline-h5: clamp(1.25rem, calc(1.21rem + 0.21vw), 1.38rem);
    --fs-headline-h6: clamp(1.25rem, calc(1.21rem + 0.21vw), 1.38rem);
    --fs-headline-pre: clamp(0.97rem, calc(1.01rem + -0.05vw), 1rem);
    --fs-headline-body-xl: clamp(1.27rem, calc(1.15rem + 0.59vw), 1.62rem);
    --fs-headline-body-l: clamp(1.13rem, calc(1.05rem + 0.38vw), 1.35rem);
    --fs-headline-body-s: clamp(0.89rem, calc(0.87rem + 0.08vw), 0.94rem);
    --fs-headline-body-xs: clamp(0.78rem, calc(0.79rem + -0.01vw), 0.79rem);
    --text-s: clamp(0.89rem, calc(0.87rem + 0.08vw), 0.94rem);
    --text-xs: clamp(0.78rem, calc(0.79rem + -0.01vw), 0.79rem)
}

/* To style the current year [footer_date] shortcode - Webdesign by ... */
.custom-date {
    font-size: var(--fs-headline-body-xs);
	font-weight: 400;
	line-height: 1.5;
    margin-bottom: 1.5rem;
	font-family: var(--body-font);
}

/* Default Body / p font settings */ 
p {
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    font-family: var(--body-font);
}

/* Default Headings weight, margin, font-family */ 
h1,
h2,
h3,
h4,
h5,
h6,
.gb-headline-xxl,
.gb-headline-xl,
.gb-headline-h1,
.gb-headline-h2,
.gb-headline-h3,
.gb-headline-h4,
.gb-headline-h5,
.gb-headline-h6 {
    font-weight: 600;
    margin-bottom: .5em;
    font-family: var(--headline-font);
}

/* Heading font-size and line-height */ 
.gb-headline-xxl{
    font-size: var(--fs-headline-xxl);
    line-height: 1.05;
}

.gb-headline-xl {
    font-size: var(--fs-headline-xl);
    line-height: 1.05
}

h1,
.gb-headline-h1 {
    font-size: var(--fs-headline-h1);
    line-height: 1.05
}

h2,
.gb-headline-h2 {
    font-size: var(--fs-headline-h2);
    line-height: 1.1
}

h3,
.gb-headline-h3 {
    font-size: var(--fs-headline-h3);
    line-height: 1.15
}

h4,
.gb-headline-h4 {
    font-size: var(--fs-headline-h4);
    line-height: 1.1
}

h5,
.gb-headline-h5 {
    font-size: 1.375rem;
    font-size: var(--fs-headline-h5);
    line-height: 1.25
}

h6,
.gb-headline-h6 {
    font-size: 1.25rem;
    font-size: var(--fs-headline-h6);
    line-height: 1.4
}

.gb-headline-pre {
    font-size: var(--fs-headline-pre);
    text-transform: uppercase;
    letter-spacing: .1em
}

/* Additional Body font-size */ 
.gb-headline-body-xl {
    font-family: var(--body-font);
    font-size: var(--fs-headline-body-xl)
}

.gb-headline-body-l {
    font-family: var(--body-font);
    font-size: var(--fs-headline-body-l)
}

.gb-headline-body-s {
    font-family: var(--body-font);
    font-size: var(--fs-headline-body-s)
}

.gb-headline-body-xs {
    font-family: var(--body-font);
    font-size: var(--fs-headline-body-xs)
}


/* Add top margin to blog post H2-H6 */
.single-post :is(h2, h3, h4, h5, h6) {
    margin-top: 1.5em
}

/* Button Global Line Height */
.gb-button {
    line-height: 1em
}

/* Remove bottom margin on last paragraph */
.gb-container p:last-child:last-of-type {
    margin-bottom: 0
}

.block-editor-block-list__layout .gb-container p:nth-last-child(2) {
    margin-bottom: 0
}

/*** GLOBAL STYLES ***/ 

/* Sections (= Outer Containers)  */
.gb-container-section-xs {
	padding: 1rem clamp(1rem, 0.848rem + 0.758vw, 1.5rem) 1rem clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
}

.gb-container-section-s {
	padding: clamp(1.5rem, 1.5rem + 0vw, 1.5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem) clamp(1.5rem, 1.5rem + 0vw, 1.5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
}

.gb-container-section-m {
	padding: clamp(1.5rem, 1.197rem + 1.515vw, 2.5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem) clamp(1.5rem, 1.197rem + 1.515vw, 2.5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
}

.gb-container-section-d {
	padding: clamp(3rem, 2.394rem + 3.03vw, 5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem) clamp(3rem, 2.394rem + 3.03vw, 5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
}

.gb-container-section-l {
	padding: clamp(4.5rem, 3.591rem + 4.545vw, 7.5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem) clamp(4.5rem, 3.591rem + 4.545vw, 7.5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
}

.gb-container-section-xl {
	padding: clamp(6rem, 4.788rem + 6.061vw, 10rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem) clamp(6rem, 4.788rem + 6.061vw, 10rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
}

/* Container Widths */

:root {
    --width-m: 64rem;
    --width-s: 48rem;
    --width-xs: 40rem
}

/*** FLUENT FORMS ***/

.fluentform .frm-fluent-form input:not([type=submit]),
.fluentform .frm-fluent-form textarea {
    border-width: 1px;
    border-radius: 0;
    border-color: var(--base-300);
    background-color: var(--base-0);
    padding: 12px 16px
}

.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after {
    color: var(--brand)
}

.fluentform .ff-el-group {
    margin-bottom: 15px
}

.fluentform .frm-fluent-form input:not([type=submit]):focus,
.fluentform .frm-fluent-form textarea:focus {
    border-width: 1px;
    border-color: var(--base-600);
    background-color: var(--base-0);
    box-shadow: 0 0 0 0 transparent
}

.fluentform .ff_t_c {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
    padding-left: 5px;
    padding-bottom: 16px
}

.fluentform .ff-el-is-error .ff-el-form-control {
    border: 1px solid var(--brand)
}

.fluentform .ff-el-is-error .text-danger {
    font-size: 14px;
    color: var(--base-600)
}

.fluentform .ff-el-form-check-label .ff-el-form-check-input {
    top: -1px
}

.fluentform .frm-fluent-form .ff-el-input--label label {
    font-size: .9rem;
    color: var(--base-600)
}

.fluentform .frm-fluent-form input::placeholder,
.fluentform .frm-fluent-form textarea::placeholder {
    font-size: 16px;
    font-weight: 400;
    color: var(--base-600)
}

.fluentform .frm-fluent-form button[type=submit] {
    font-size: 16px;
    font-weight: 600;
    color: var(--base-0);
    background-color: var(--brand);
    padding: 12px 32px;
    height: auto;
    display: block;
    margin-right: auto;
    border-radius: 4px
}

.fluentform .frm-fluent-form button[type=submit]:hover {
    color: var(--base-0);
    background-color: var(--brand-alt)
}

#fluentform_4_success .ff-message-success {
    border: 0 solid var(--base-0);
    box-shadow: 0 0 0 0 var(--base-0);
    margin-top: 16px;
    font-size: 1rem;
    padding: 0
}

.fluentform .ff-el-form-control {
    background: var(--base-0)
}


/* Simple CSS GRID */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr
}

.grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr
}

.grid-5 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr
}

.grid-6 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr
}

.gap-xs {
    gap: .5rem
}

.gap-s {
    gap: 1rem
}

.gap-m {
    gap: 2rem
}

.gap-l {
    gap: 4rem
}

.gap-xl {
    gap: 6rem
}

/* TABLET */
@media(min-width:769px) and (max-width:1024px) {
    .grid-2 {
        grid-template-columns: 1fr
    }
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr 1fr
    }
    .grid-5,
    .grid-6 {
        grid-template-columns: 1fr 1fr 1fr
    }
    .gap-xs {
        gap: .5rem
    }
    .gap-s {
        gap: 1rem
    }
    .gap-m {
        gap: 1.5rem
    }
    .gap-l {
        gap: 3rem
    }
    .gap-xl {
        gap: 4rem
    }
}

/* MOBILE */
@media(max-width:768px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr
    }
    .grid-5,
    .grid-6 {
        grid-template-columns: 1fr 1fr
    }
    .gap-xs {
        gap: .25rem
    }
    .gap-s {
        gap: .5rem
    }
    .gap-m {
        gap: 1rem
    }
    .gap-l {
        gap: 2rem
    }
    .gap-xl {
        gap: 3rem
    }
}

/* ####################### */

@media (max-width: 768px) {
    /* CSS in here for mobile only */
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* CSS in here for tablet only */
}

@media (min-width: 1025px) {
    /* CSS in here for desktop only */
}