/**
 SASS files that don't get compiled into CSS. Do not put element selectors in here.
 Every file not starting with '_' should import this file if you want to use functions and mixins.
 */
/**
 * SASS variables
 *
 These are only used in the properties and abstract SASS files.
 */
/**
 Breakpoints and columns
 */
/**
 Text
 */
/**
Fill in the header styles, only write the properties you want to override.
 */
/**
 Form
 */
/**
  Buttons
 */
/**
 Breakpoints

 @param {Keyword} $breakpoint - The breakpoint name of the minimum width. Can be any of the names in the $breakpoint variable
 */
/**
  Custom column size.
  Especially handy inside other columns.

  @param {Number|string} $size - the size in columns or 'expand'/'shrink'.
  @param {number} $total - the total size in columns. Ignored when size is 'expand'/'shrink'
 */
/**
  Custom offset size.
  Especially handy inside other columns.

  @param {Number|string} $size - the size of the offset.
  @param {number} $total - the total size in columns.
  @param {string} - the side from the offset.
 */
.region-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 22px 0px;
}
@media (min-width: 1200px) {
  .region-header {
    padding: 44px 0px;
  }
}
.region-header .system-branding-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.region-header .system-branding-block svg {
  max-width: 160px;
}
@media (min-width: 1200px) {
  .region-header .system-branding-block svg {
    max-width: 160px;
  }
}
@media (min-width: 1440px) {
  .region-header .system-branding-block svg {
    max-width: 269px;
  }
}
.region-header .menu--main, .region-header .menu--programma {
  display: none;
}
@media (min-width: 1200px) {
  .region-header .menu--main, .region-header .menu--programma {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.region-header .menu--programma a {
  color: var(--black) !important;
}
.region-header .menu--main li {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.region-header .menu--main li a {
  font-family: var(--header-font-family);
  font-weight: 400 !important;
  text-decoration: none !important;
}
.region-header #block-elaba-off-canvas-right-toggle {
  margin-left: auto;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0px;
}
@media (min-width: 1200px) {
  .region-header #block-elaba-off-canvas-right-toggle {
    display: none;
  }
}
.region-header #block-elaba-off-canvas-right-toggle button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 40px;
  height: 40px;
  padding: 0px;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.2563 15.2563C10.0922 15.4204 10 15.6429 10 15.875C10 16.1071 10.0922 16.3296 10.2563 16.4937C10.4204 16.6578 10.6429 16.75 10.875 16.75H30.125C30.3571 16.75 30.5796 16.6578 30.7437 16.4937C30.9078 16.3296 31 16.1071 31 15.875C31 15.6429 30.9078 15.4204 30.7437 15.2563C30.5796 15.0922 30.3571 15 30.125 15H10.875C10.6429 15 10.4204 15.0922 10.2563 15.2563Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 23.75C10 23.5179 10.0922 23.2954 10.2563 23.1313C10.4204 22.9672 10.6429 22.875 10.875 22.875H30.125C30.3571 22.875 30.5796 22.9672 30.7437 23.1313C30.9078 23.2954 31 23.5179 31 23.75C31 23.9821 30.9078 24.2046 30.7437 24.3687C30.5796 24.5328 30.3571 24.625 30.125 24.625H10.875C10.6429 24.625 10.4204 24.5328 10.2563 24.3687C10.0922 24.2046 10 23.9821 10 23.75Z' fill='white'/%3E%3C/svg%3E%0A");
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  border: solid 0px white;
  background-color: transparent;
  transition: var(--transition);
  cursor: pointer;
}
@media (min-width: 1200px) {
  .region-header #block-elaba-off-canvas-right-toggle button {
    width: 40px;
    height: 40px;
  }
}

.path-frontpage header#header {
  background-color: var(--primary-color);
}
.path-frontpage header#header a {
  color: var(--body-background);
}

body:not(.path-frontpage) header#header .system-branding-block path {
  fill: var(--primary-color);
}