/**
 * QUARKS
 * -------------------------------------------------------------------
 */
/**
 * MIXINS
 * -------------------------------------------------------------------
 * Collection of custom mixins
 */
/**
 * FONT FACE
 * -------------------------------------------------------------------
 */
/**
 * INPUT PLACEHOLDER MIXIN
 * -------------------------------------------------------------------
 * Change base styling for placeholder text on input fields
 * Note: Styling the placeholder text is not supported on older
 * browsers, use a html5-placeholder polyfill for that
 *
 * Background info:
 * - http://davidwalsh.name/html5-placeholder
 * - http://davidwalsh.name/placeholder-overflow
 * - http://jamesallardice.github.io/Placeholders.js
 */
/**
 * FOCUS
 * -------------------------------------------------------------------
 */
/**
 * CLEARFIX
 * -------------------------------------------------------------------
 */
/**
 * MEDIA QUERIES MIXIN
 * -------------------------------------------------------------------
 */
/**
 * COLORS
 * -------------------------------------------------------------------
 * Collection of all available branding colors
 */
/**
 * COMPLETE COLOR PALETTE
 * -------------------------------------------------------------------
 * Variable names generated by Name That Color
 * http://chir.ag/projects/name-that-color
 */
/**
 * GRAYSCALE COLOR PALETTE
 * -------------------------------------------------------------------
 * Collection of grayscale colors
 */
/**
 * SOCIAL BRAND COLOR PALETTE
 * -------------------------------------------------------------------
 * Collection of social branding colors
 * Also see https://mdigi.tools/darken-color/
 * We used 25%
 */
/**
 * GLOBAL VARIABLES
 * -------------------------------------------------------------------
 * Leave here for renderer
 */
/**
 * BREAKPOINTS
 * -------------------------------------------------------------------
 * CSS variables can't (yet) be used in media queries, so we need to define
 * them here as SCSS variables so we can use them like that in media queries.
 */
:root {
  --enviso-primary-color: var(--BRAND-1);
  --enviso-secondary-color: var(--BRAND-2);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  display: flex;
  flex: 1 1 auto;
}

main > * {
  flex: 1 1 auto;
}

.c-cta {
  border: 0 !important;
}

.c-cta .m-card__body h3.h5 {
  font-family: "Antwerpen Regular" !important;
  font-size: 23px !important;
}

.wdg-homepage-menu nav ul {
  justify-content: center;
}

/* SHOULD BE FIXED IN WIDGETS */
.wdg-m-search-result-card__heading,
.m-title--primary {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

.introduction-text {
  font-size: 1.188rem;
  line-height: 1.5rem;
}

.clausule-text {
  font-size: 0.75em;
}

.embed-wrapper {
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
}

.mtn-o-doormat {
  background-color: var(--BG-COLOR);
}

.home-hero {
  margin-top: -4.5rem;
  z-index: -1;
}

@media screen and (max-width: 44.9375rem) {
  .mtn-o-header-bottom__content:empty {
    display: none;
  }
  .mtn-m-search.mtn-m-search--open {
    padding-right: var(--SPACER);
    right: 0;
  }
}
.home-title {
  text-align: center;
}

#mtn-doormat-middle-left {
  position: relative;
}

#mtn-doormat-top {
  padding-top: var(--SPACER-L);
}

.mtn-m-html {
  margin: calc(-1 * var(--SPACER)) 0 var(--SPACER-L);
}

.condolence-page .m-alert p {
  margin-bottom: 0 !important;
}

.cta-banner .link-wrapper img {
  height: 2.75rem;
}

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