/*!**********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js!./sass/app.scss ***!
  \**********************************************************************************************************************************************************************************************************/
/*
==========================================================================
    Import all SCSS parts here
==========================================================================
*/
/*
==========================================================================
	Mixins
==========================================================================
*/
/*
==========================================================================
    Variables
==========================================================================
*/
:root[\:has\(body.wp-child-theme-sloepvrienden\)],
body.wp-child-theme-sloepvrienden {
  --col-brand-orange: #f46600;
  --col-brand-black: #111;
  --col-accent: var(--col-brand-orange);
  --col-text: #333;
  --col-text-80: color-mix(in srgb, var(--col-text) 75%, var(--col-text-20));
  --col-text-60: color-mix(in srgb, var(--col-text) 50%, var(--col-text-20));
  --col-text-40: color-mix(in srgb, var(--col-text) 25%, var(--col-text-20));
  --col-text-20: color-mix(var(--col-text), #fff 75%);
  --col-grey: hsl(from var(--col-accent) h calc(s - 50) calc(l + 35));
  --col-grey-80: color-mix(in srgb, var(--col-grey) 75%, var(--col-grey-20));
  --col-grey-60: color-mix(in srgb, var(--col-grey) 50%, var(--col-grey-20));
  --col-grey-40: color-mix(in srgb, var(--col-grey) 25%, var(--col-grey-20));
  --col-grey-20: color-mix(var(--col-grey), #fff 70%);
  --col-background-default: var(--col-brand-black);
  --col-background-prim: var(--col-brand-orange);
  --col-selection: var(--col-brand-orange);
  --col-selection-alt: var(--col-brand-black);
  --col-button-primary-background: var(--col-brand-orange);
  --col-button-secondary-background: var(--col-brand-black);
}
:root:has(body.wp-child-theme-sloepvrienden),
body.wp-child-theme-sloepvrienden {
  --col-brand-orange: #f46600;
  --col-brand-black: #111;
  --col-accent: var(--col-brand-orange);
  --col-text: #333;
  --col-text-80: color-mix(in srgb, var(--col-text) 75%, var(--col-text-20));
  --col-text-60: color-mix(in srgb, var(--col-text) 50%, var(--col-text-20));
  --col-text-40: color-mix(in srgb, var(--col-text) 25%, var(--col-text-20));
  --col-text-20: color-mix(var(--col-text), #fff 75%);
  --col-grey: hsl(from var(--col-accent) h calc(s - 50) calc(l + 35));
  --col-grey-80: color-mix(in srgb, var(--col-grey) 75%, var(--col-grey-20));
  --col-grey-60: color-mix(in srgb, var(--col-grey) 50%, var(--col-grey-20));
  --col-grey-40: color-mix(in srgb, var(--col-grey) 25%, var(--col-grey-20));
  --col-grey-20: color-mix(var(--col-grey), #fff 70%);
  --col-background-default: var(--col-brand-black);
  --col-background-prim: var(--col-brand-orange);
  --col-selection: var(--col-brand-orange);
  --col-selection-alt: var(--col-brand-black);
  --col-button-primary-background: var(--col-brand-orange);
  --col-button-secondary-background: var(--col-brand-black);
}

/*
==========================================================================
    Components
==========================================================================
*/
/*
==========================================================================
	Masthead
==========================================================================
*/
.masthead__logo {
  width: 8.5em;
}
.masthead__logo svg .st0 {
  fill: var(--col-brand-black);
}
.masthead__logo svg .st1 {
  fill: var(--col-brand-orange);
}

@media only screen and (max-width: 400px) {
  .masthead__logo {
    width: 8em;
  }
}
/*
==========================================================================
	Footer
==========================================================================
*/
.site-footer__logo {
  width: 8em;
}

/*# sourceMappingURL=app.css.map*/