@font-face {
  font-family: "fa";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../font/fa-solid-900.woff2");
}

@font-face {
  font-family: "fa";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../font/fa-regular-400.woff2");
}

@font-face {
  font-family: "fa-brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../font/fa-brands-400.woff2");
}

:root {
  --myth-color-white: #fff;
  --myth-color-black: #000;
  --myth-color-brand: #002463;
  --myth-color-accent: #BE0038;
  --myth-color-heading: #1F2937;
  --myth-color-body: #4B586B;
  --myth-color-body2: #637186;
  --myth-color-surface: #F4F6F8;
  --myth-color-border: #D6DDE7;
  --myth-color-support: #A0A0A0;
  --myth-color-blue: #C1D1E9;
  --myth-color-bg: #F3F3F1;

  --myth-header-height: 104px;
  --myth-header-height-s: 70px;
  --myth-hhla-height: 0px;
  --myth-toolbar-height: 0px;
  --myth-heder-fix-top: 0px;

  --swiper-navigation-size: 36px;
  --swiper-theme-color: #fff;
  --swiper-pagination-color: var(--myth-color-accent);
  --swiper-pagination-bullet-inactive-color: #fff;
  --swiper-pagination-bullet-inactive-opacity: 1;
}

.gin--classic-toolbar {
  --myth-heder-fix-top: var(--gin-toolbar-y-offset);
}

* {
  box-sizing: border-box;
}

.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.is-active::before {
  filter: invert(0);
}

body {
  line-height: 1.5;

  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  color: var(--myth-color-body);
}

header.main-header .region__content,
.region-heading .region__content,
.region-footer .region__content,
.region-footer-bottom .region__content,
[data-drupal-messages],
#block-primary-tabs,
.region-top > .region__content,
.region-bottom > .region__content,
.swiper-navigations > .inner,
.promo-item__content,
#block-promo .site_name .wrapper,
.paragraph--type--promo-container.mode--full-width .site_name .wrapper,
.paragraph--type--map.mode--full-width > .paragraph__content,
.paragraph--type--contact.mode--full-width > .paragraph__content,
.node--type-frontpage > .node__content > .field--name-field-image,
.field--name-field-layout > .field__item > .paragraph:not(.paragraph--type--layout):not(.mode--full-width),
.field--name-field-layout > .field__item > .paragraph.paragraph--type--layout > .layout:not(.full-width),
.paragraph--type--attachment.mode--full-width > * {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 20px;
}

.region-highlighted .region__content > div + div {
  margin-top: 1rem;
}

.region-heading {
  position: relative;
  margin-bottom: 2rem;
  background-color: var(--myth-color-brand);

  .region__content {
    padding-block: 1.75rem;
    min-height: 320px;
  }
}

#block-heading-image {
  position: initial;

  .field--name-field-heading-image {
    .contextual-region {
      position: unset;
    }

    .field--name-field-media-image {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: auto;
      // -webkit-mask-image: linear-gradient(to left, black 0%, transparent 100%);
      // mask-image: linear-gradient(to left, black 0%, transparent 100%);
      // -webkit-mask-repeat: no-repeat;
      // mask-repeat: no-repeat;
      // opacity: .65;
  
      &::after {
        content: '';
        position: absolute;
        inset: 0;
        display: block;
        background: var(--myth-color-brand);
        mix-blend-mode: color; 
        pointer-events: none; 
      }
  
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(100%) contrast(110%);
      }
    }
  }
}

#block-heading-text {
  .field--name-field-heading-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    white-space: nowrap;
    font-size: .875rem;
    align-items: center;
    color: var(--myth-color-blue);
    margin-block: 1em;

    .field__item + .field__item {
      color: var(--myth-color-blue);

      &::before {
        content: '\2022';
        display: inline-block;
        transform: translateX(-1rem) translateY(-3px);
        font-size: .6em;
        line-height: 1;
      }
    }
  }
  
  .field--name-field-heading-text {
    color: var(--myth-color-blue);
    font-size: .875rem;
    line-height: 1.3;
  }
}

.breadcrumb {
  li, a {
    color: var(--myth-color-blue);
    font-size: .875rem;
  }

  li::before {
    content: " \2F ";
    color: #ADB3BC;
    padding-inline: .3rem;
  }
}

#block-branding-name {
  margin-top: 2.3rem;
  position: relative;

  .site-name {
    pointer-events: none;
    font-size: .875rem;
    text-transform: uppercase;
    line-height: 1;
    
    a {
      color: var(--myth-color-blue);
    }
  }
}

#block-page-title {
  h1 {
    margin-block: .2em;
    line-height: 1.1;
    color: var(--myth-color-white);
  }
}

#block-branding-name,
#block-heading-text,
#block-page-title {
  max-width: 60%;
}

h1 {
  font-size: 3.5rem;
}

h1, h2, h3, h4, h5 {
  font-weight: 500;
  color: var(--myth-color-brand);
  line-height: 1.3;
  margin-block: .7em;

  &.underline {
    position: relative;
    padding-bottom: .7em;

    &::after {
      content: '';
      display: block;
      height: 2px;
      width: 46px;
      background-color: var(--myth-color-accent);
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
}

h2 {
  font-size: 2.5rem;
  line-height: 1.2;
}

h3 {
  font-size: 1.5rem;
  line-height: 1.2;
}

.field--type-text-long a {
  color: var(--myth-color-brand);
  text-decoration: underline;
}

.field--type-text-long a.button-blue,
.field--type-text-long a.button-grey {
  display: inline-flex;
  align-items: center;
  background-color: var(--myth-color-brand); 

  color: var(--myth-color-white);
  padding: 1rem 1.5rem;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .875rem;
  gap: 2rem;
  
  transition: background-color .2s;

  &::after {
    display: block;
    content: '';
    width: 24px;
    height: 24px;
    background-color: var(--myth-color-white);
    mask: url(../images/icons/icon-link.svg);
    mask-repeat: no-repeat;
    mask-position: center;
  }

  &:hover {
    background-color: var(--myth-color-accent);
  }
}

.field--type-text-long a.button-grey {
  border: 1px solid var(--myth-color-border);
  background-color: #F5F6F8;
  color: var(--myth-color-brand);
  transition: background-color .2s, color .2s;

  &::after {
    background-color: var(--myth-color-brand);
    transition: background-color .2s;
  }

  &:hover {
    background-color: var(--myth-color-brand);
    color: var(--myth-color-white);

    &::after {
      background-color: var(--myth-color-white);
    }
  }
}

.text-formatted {
  table {
    border-collapse: collapse;

    p {
      margin-block: 0;
    }
  }

  thead {
    background-color: var(--myth-color-surface);
  }

  th {
    text-align: left;
    color: #626B78;
    font-size: .875rem;
    padding: 1rem;
    font-weight: 400;
  }

  td {
    padding: 1rem;
  }
  
  tr {
    border-bottom: 1px solid var(--myth-color-border);
  }

  .text-small {
    font-size: .875rem;
  }

  .text-big {
    font-size: 1.2rem;
    font-weight: 500;
  }
  
  .text-huge {
    font-size: 1.5rem;
    font-weight: 500;
  }

  blockquote {
    background-color: #FCF5F7;
    border-left: 2px solid var(--myth-color-accent);
    margin: 1em 0;
    padding: .5rem 1.5rem;
  }

  figure {
    margin-inline: 0;
  }

  figure:has(img[width*="50%"]) {
    width: 50% !important;
  }

  figure:has(img[width*="100%"]) {
    width: 100% !important;
  }

  figure:has(img[width*="50%"]) figcaption,
  figure:has(img[width*="100%"]) figcaption,
  figure:has(img[width*="50%"]) img,
  figure:has(img[width*="100%"]) img {
    width: 100% !important;
  }

  figcaption {
    margin-top: 1rem;
    font-size: .875rem;
    text-align: right;
  }

  hr {
    border: none;
    height: 1px;
    background-color: var(--myth-color-border);
    margin-block: 2rem;
  }

  ul {
    list-style-type: disc;
    padding-left: 1.6rem;

    li::marker {
      font-size: .8em;
      color: var(--myth-color-accent)
    }
    
    li + li { 
      margin-top: .5rem;
    }
  }

  p.box {
    background-color: var(--myth-color-surface);
    padding: 2rem;
    border-left: 2px solid #BE0038;

    &.red {
      background-color: #FCF5F7;
    }
  }

  a[target="_blank"] {
    color: var(--myth-color-brand);
    display: inline-flex;
    gap: 1rem;
    align-items: center;
    text-decoration: none;

    &::after {
      content: '';
      display: block;
      width: 20px;
      height: 20px;
      background-color: var(--myth-color-brand);
      mask: url(../images/icons/icon-link.svg);
      mask-size: 100%;
      mask-repeat: no-repeat;
      mask-position: center;
    }

    &:hover {
      text-decoration: underline;
    }
  }
}

.text-formatted ol,
.paragraph--type--navigation ol {
  list-style: none;
  counter-reset: list-counter;
  padding-left: 0;
  margin-block: 1em;

  li {
    counter-increment: list-counter;
    padding-left: 60px;;
    position: relative;

    & + li {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--myth-color-border);
    }

    &::before {
      content: counter(list-counter, decimal-leading-zero);
      flex-shrink: 0;
      position: absolute;
      color: var(--myth-color-brand);
      left: 0;
    }
  }
}

.ajax-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex!important;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0);
  z-index: 999;
  margin: 0!important;
}

.ajax-progress-throbber .message {
  display: none;
}

.ajax-progress-throbber .throbber {
  padding: 0;
  background-image: url(../images/loader.svg);
  width: 42px;
  height: 42px;
  display: block;
  background-size: 100%;
}

.ajax-progress-fullscreen {
  background-color: rgba(255, 255, 255, 0);
  background-image: url(../images/loader.svg);
  background-size: 42px;
  background-position: center;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

video {
  vertical-align: top;
}

a {
  text-decoration: none;
  color: var(--myth-color-heading);

  -webkit-tap-highlight-color: rgba(94, 94, 94, .3);

  &:focus-visible {
    outline: none;
  }
}

header.main-header {
  position: sticky;
  height: calc( var(--myth-header-height) + var(--myth-hhla-height));
  z-index: 299;
  
  .region-header {
    background-color: var(--myth-color-brand);
    transition: background-color .3s;
    will-change: background-color;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);

    .region__content {
      display: flex;
      align-items: center;
      width: 100%;
      height: var(--myth-header-height);
      transition: height .3s;
      will-change: height;
      border-bottom: 1px solid var(--myth-color-border);
    }
  }
}

#block-logo {
  margin-right: auto;
  flex-shrink: 0;

  a.logo {
    display: grid;
    max-width: 140px;

    > span {
      grid-row: 1 / 1;
      grid-column: 1 / 1;
      display: grid;
      place-content: center;
      transition: opacity .3s;
      position: relative;

      img {
        width: 100%;
        height: auto;
      }
    }

    .logo {
      opacity: 0;
    }
  }
}

.region-top,
.region-bottom {
  background-color: var(--myth-color-surface);
  
  > .region__content {
    height: var(--myth-hhla-height);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
  }
}

.region-bottom > .region__content {
  height: 58px;
}

.block-hhla {
  a {
    display: block;

    img {
      width: 218px;
      height: auto;
    }
  }
}

/* .region-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}

.gin--classic-toolbar .region-header {
  top: var(--gin-toolbar-y-offset);
} */

.form-text,
.form-email,
.form-number,
.form-pass,
.form-tel {
  width: 100%;

  border: 1px solid var(--myth-color-heading);
  border-radius: .5rem;
  padding: 1rem;
  outline-style: none;

  &:focus {
    outline: 1px solid #616161;
    outline-offset: -1px;
  }
}

.form-submit {
  color: var(--myth-color-white);
  background-color: var(--myth-color-brand);

  padding: 1rem 1.5rem;
  border-radius: 8px;
  text-decoration: none; 
  border: none;
  font-weight: 500;
  cursor: pointer;
  margin-inline: 0;
  transition: background-color .2s;  

  &:hover {
    background-color: var(--myth-color-black);
  }
}

.form-item:not(.form-item-checkbox):not(.form-item-radio) > label {
  font-weight: 600;
  font-size: .875rem;
  margin-bottom: .3rem;
  display: block;
  color: var(--myth-color-brand);
}

#block-main-navigation {
  .block__content > .menu {
    list-style: none;
    display: flex;
    margin: 0;
    gap: 1.5rem;
    
    a {
      display: flex;
      gap: 1rem;
      color: #fff;
      font-size: .875rem;
      font-weight: 500;
      align-items: center;
      padding: .5rem 1rem;
      transition: color .2s;
      position: relative;
      text-transform: uppercase;
  
      // will-change: background-color, color;
      transform: translate3d(0, 0, 0); 
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
  
      &::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 2px;
        opacity: 0;
        background-color: var(--myth-color-accent);
        transition: opacity .2s;
        will-change: opacity;
      }
    }

    .menu-item.depth-0 > a {
      text-align: center;
      height: 100%;
      padding-inline: 0;

      &::before {
        width: 100%;
        top: unset;
        height: 2px;
        background-color: var(--myth-color-white);
      }
    }
  
    .menu-item.depth-0:hover > a,
    .menu-item.depth-0 > a.is-active {
      // background-color: #fff;
      color: var(--myth-color-white)!important;
  
      &::before {
        opacity: 1;
      }
    }
  
    .menu-item:not(.depth-0):hover > a {
      color: var(--myth-color-accent)!important;
  
      &::before {
        opacity: 1;
      }
    }
    
    .menu-item {
      position: relative;
      list-style: none;
      margin: 0;
      padding: 0;
      
      &:hover > .menu {
        display: block;
      }
  
      .menu {
        margin: 0;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 100%;
        max-width: 180px;
        width: max-content;
        display: none;
        list-style: none;
        background: #fff;
        padding: .5rem 0;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        z-index: 9;
  
        a {
          padding: .5rem 1rem;
          color: var(--myth-color-heading);
        }

        &.edge {
          left: initial;
          right: 0;
        }
  
        .menu {
          top: -.5rem;
          left: 100%;

          &.edge {
            left: initial;
            right: 100%;
          }
        }
      }
    }
  }

  .menu-item--expanded > a::after {
    content: '\f107';
    font-family: 'fa';
    font-weight: bold;
    font-size: .7em;
    margin-left: auto;
  }
  
  .menu-item--expanded .menu-item--expanded > a::after {
    content: '\f105';
  }
  
}


.block-language {
  .block__content > .links {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 1rem;

    li {
      list-style: none;
      padding: 0;
    }

    a {
      color: #fff;
      font-size: .875rem;
      font-weight: 500;
      text-transform: uppercase;
    }
  }
}

.main-header.fixed {
  top: calc(var(--drupal-displace-offset-top, 0px) - var(--myth-hhla-height));

  &.fixed__second {
    top: calc(-1 * var(--myth-hhla-height));
  }

  /* .region-header {
    background-color: #fff;
    -webkit-box-shadow: 0 2px 8px -2px rgba(0,0,0,0.2);
    box-shadow: 0 2px 8px -2px rgba(0,0,0,0.2);
  } */

  &.small .region-header .region__content {
    height: calc(var(--myth-header-height) - 30px);
  }

  /* #block-logo {
    .logo {
      opacity: 1;
    }
    
    .logo-white {
      opacity: 0;
    }
  } */

  /* #block-main-navigation .menu a,
  .block-language a {
    color: var(--myth-color-brand);
  }

  #block-main-navigation {
    .menu-item.depth-0:hover > a,
    .menu-item.depth-0 > a.is-active {
      color: var(--myth-color-accent)!important;
    }

    .menu-item.depth-0 > a {
      &::before {
        background-color: var(--myth-color-accent);
      }
    }
  } */
}

#block-promo,
.paragraph--type--promo-container {
  position: relative;
  background-color: var(--myth-color-brand);

  .site_name {
    position: absolute;
    z-index: 99;
    top: 0;
    left: 0;
    padding-top: 80px;
    width: 100%;
    font-weight: 400;
    font-size: .875rem;
    text-transform: uppercase;
    color: var(--myth-color-blue)
  }
}


.promo-item {
  position: relative;
  // aspect-ratio: 2.5;
  min-height: 650px;
  height: 100%;

  .promo-item__content {
    position: relative;
    z-index: 1;
    color: #fff;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 130px 5rem 120px 20px;

    > * {
      max-width: 780px;
    }
  }

  .field--name-title {
    margin-left: -3px;
  }

  .field--name-field-description,
  .field--name-field-text {
    font-size: 5rem;
    font-weight: 500;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    line-height: 1;
    letter-spacing: -2px;

    p {
      margin-block: 0;
    }

    .last-word {
      color: #B7CDEC;
    }
  }

  .field--name-title,
  .field--name-field-label {
    font-size: 1.1rem;
    font-weight: 400;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color: var(--myth-color-blue);

    p {
      margin-block: 0;
    }
  }
  
  .media--type-image {
    position: unset;
  }
  
  .field--name-field-image,
  .field--name-field-media-image {

    position: absolute;
    z-index: 0;
    height: 100%;
    aspect-ratio: 1;
    top: 0;
    right: 0;
    bottom: 0;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: right;
    }
  }

  .field--name-field-link a {
    display: inline-flex;
    color: var(--myth-color-heading);
    background-color: var(--myth-color-white);
    font-weight: 500;
    font-size: .875rem;
    padding: 1.1rem 1.3rem;
    text-transform: uppercase;
    gap: 1.5rem;
    align-items: center;
    transition: background-color .2s, color .2s;
    border-radius: 3px;

    &::after {
      content: '\f061';
      font-family: 'fa';
      font-size: .7rem;
      margin-left: auto;
      padding-top: 2px;
      font-weight: bold;
    }

    &:hover {
      background-color: var(--myth-color-brand);
      color: var(--myth-color-white);
    }
  }

  .field--name-title,
  .field--name-field-label,
  .field--name-field-description,
  .field--name-field-text,
  .field--name-field-link {
    opacity: 0;
  }  
}

.promo.solo-item {
  .swiper-navigations {
    display: none;
  }
}

.paragraph--type--promo-container.mode--full-width {
  // background: #000;
}

.paragraph--type--promo-container.mode--wrapped {
  .site_name {
    display: none;
  }

  .promo-item__content {
    padding-top: 120px;
  }
}

.swiper-slide-active {
  .field--name-title,
  .field--name-field-label,
  .field--name-field-description,
  .field--name-field-text,
  .field--name-field-link {
    animation: promoText .3s;
    animation-fill-mode: forwards;
  }
  
  .field--name-title,
  .field--name-field-label {
    animation-delay: .1s;
  }

  .field--name-field-link {
    animation-delay: .2s;
  }
}

@keyframes promoText {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#block-promo .swiper-wrapper {
  background-color: #000;
}

.swiper-wrapper {
  align-items: stretch;

  .swiper-slide {
    height: auto;
  }
}



.swiper-navigations {
  position: absolute;
  bottom: 0;
  z-index: 99;
  width: 100%;
  left: 0;
  color: var(--myth-color-white);
  font-size: .875rem;
  padding-bottom: 3rem;
  
  > .inner {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .swiper-navigation {
    display: flex;
    gap: .5rem;
    padding: .8rem 1rem;
    border: 1px solid var(--myth-color-border);
    border-radius: 10px;
    backdrop-filter: blur(4px);
    -webkit-box-shadow: 0 4px 18px 0 rgba(0,0,0,0.08);
    box-shadow: 0 4px 18px 0 rgba(0,0,0,0.08);
    margin-bottom: 4rem;
  }

  .swiper-button-next,
  .swiper-button-prev {
    color: #fff;
    width: 22px;
    height: auto;
    aspect-ratio: 1;
    position: initial;
    margin: 0!important;
    padding: 0;
    top: unset;
    right: unset;
    display: block;
  
    svg {
      fill: none;
      width: 22px;
      height: 22px;
      vertical-align: top;
    }
  }
  
  .play-pause-btn {
    background: transparent;
    border: none;
    display: grid;
    place-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
  
    svg {
      vertical-align: top;
    }
  
    &[data-status="playing"] {
      svg.play {
        display: none;
      }
    }
    
    &[data-status="paused"] {
      svg.pause {
        display: none;
      }
    }
  }
  
  .swiper-pagination-fraction {
    display: grid;
    text-align: center;
    grid-template-columns: repeat(3, 1fr);
    border-right: 1px solid var(--myth-color-border);
    padding-right: 1rem;
  }

  .swiper-pagination-bullets.swiper-pagination-horizontal {
    display: flex;
    gap: 2rem;
    position: initial;
    bottom: unset;
    left: unset;
    width: 100%;

    .swiper-pagination-bullet {
      width: auto;
      height: auto;
      border-radius: 0;
      background: none;
      flex: 1;
      text-align: left;
      text-transform: uppercase;
      padding-bottom: 1rem;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        display: block;
        width: 100%;
        bottom: 0;
        left: 0;
        height: 1px;
        background-color: var(--myth-color-border);
        transition: height .15s;
        will-change: height;
      }

      &.swiper-pagination-bullet-active::after {
        height: 5px;
      }
    }
  }
}






.paragraph--type--personal {
  .field--name-field-par-references {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4rem;

    // > div {
    //   display: grid;
    //   grid-template-rows: subgrid;
    //   grid-row: span 3;
    //   gap: .5rem;
    // }
  }

  .field--name-field-label {
    font-size: 2.5rem;
    color: var(--myth-color-brand);
    font-weight: 500;
  }

  .field--name-field-par-references {
    margin-top: 1.5rem;
  }
}

.paragraph--type--person {
  // display: grid;
  // grid-template-rows: subgrid;
  // grid-row: span 3;
  // gap: .3rem;

  > div + div,
  .contacts > div + div {
    margin-top: .5rem;
  }

  .field--name-field-image {
    margin-bottom: 1rem;
  }

  .field--name-field-description {
    font-size: .875rem;
  }

  .field--name-field-label {
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--myth-color-brand);
  }

  .field--name-field-email,
  .field--name-field-phone {
    font-size: .875rem;
    color: var(--myth-color-brand);

    a {
      color: var(--myth-color-brand);
    }
  }
}

.field--name-field-layout > .field__item + .field__item {
  margin-top: 3rem;

  .text-formatted > *:first-child {
    margin-top: 0;
  }

  .text-formatted > *:last-child {
    margin-bottom: 0;
  }
}

.paragraph--type--attachment {
  .field--name-field-label {
    font-weight: bold;
    color: var(--myth-color-brand);
    font-size: 1.2rem;
    margin-bottom: 1rem;
  }

  &.mode--full-width {
    background-color: var(--myth-color-bg);
    padding-block: 5rem;

    .field--name-field-label {
      font-weight: bold;
      color: #647083;
      font-size: .875rem;
      text-transform: uppercase;
    }
  }
}

.field--name-field-files {
  display: flex;
  flex-direction: column;
  // gap: .5rem;
  align-items: stretch;
  width: 100%;
  counter-reset: list-counter;

  > .field__item {
    counter-increment: list-counter;

    & + .field__item {
      border-top: 1px solid var(--myth-color-border);
    }
  }

  a {
    display: flex;
    gap: 1rem;
    color: var(--myth-color-brand);
    padding: 1.5rem 0;
    line-height: 1.2;
    background: none;
    position: relative;
    transition: color .2s;
    align-items: center;

    &:hover {
      color: var(--myth-color-accent);
    }

    &::after {
      display: block;
      content: '';
      width: 24px;
      height: 24px;
      background-image: url(../images/icons/icon-download.svg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: 24px;
    }

    .details {
      flex-grow: 1;
      display: flex;
      gap: .5rem;
      justify-content: space-between;
      flex-wrap: wrap;
      padding-top: 2px;
    }
    
    .label {
      font-size: .875rem;
      font-weight: 500;
      color: inherit;
    }

    .size {
      font-size: .875em;
      color: #626B78;
    }
    
    .extension {
      font-size: .8em;
      color: var(--myth-color-brand);
      text-transform: uppercase;
      font-weight: 600;
      background-color: var(--myth-color-surface);
      border: 1px solid var(--myth-color-border);
      padding: .2rem;
      display: inline;
    }
  }
}



.layout--twocol {
  gap: 1rem;
}

.paragraph--type--navigation {
  .field--name-field-label {
    margin-block: 1em;
    color: var(--myth-color-brand);
    font-size: .875rem;
    font-weight: 600;
  }

  ol.nav {
    font-size: .875rem;
    margin-top: 2rem;

    li::before {
      width: 35px;
    }

    span.link {
      cursor: pointer;
      transition: color .2s;

      &:hover,
      &.active {
        color: var(--myth-color-brand);
        font-weight: 500;
      }
    }
  }
}



.paragraph--type--gallery .field--name-field-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  counter-reset: img-counter;

  > .field__item {
    counter-increment: img-counter;
  }

  .field__item {
    height: 100%;
    width: 100%;
    aspect-ratio: 1.4;

    a {
      display: block;
      height: 100%;
      width: 100%;
      overflow: hidden;
      position: relative;
      
      &::before {
        content: counter(img-counter, decimal-leading-zero);
        flex-shrink: 0;
        width: 34px;
        height: 20px;
        display: flex;
        place-content: center;
        background-color: rgba(0, 0, 0, 0.55);
        color: var(--myth-color-white);
        position: absolute;
        bottom: 1rem;
        left: 1rem;
        z-index: 2;
        font-size: .8rem;
      }

      &::after {
        display: block;
        content: '';
        width: 24px;
        height: 24px;
        background-color: var(--myth-color-white);
        background-image: url(../images/icons/icon-link.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 16px;
        z-index: 2;
        position: absolute;
        bottom: 1rem;
        right: 1rem;
      }
    }
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .15s;
    will-change: transform;

    &:hover {
      transform: scale(1.04);
    }
  }  
}

@media (min-width: 600px) {
  .paragraph--type--gallery .field--name-field-images {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;

    .field__item:nth-child(1) {
      grid-column: 1 / -2;
      grid-row: 1 / 3;
    }

    .field__item a::after {
      width: 40px;
      height: 40px;
      background-size: 22px;
    }
  }
}

.field--type-video-embed-field {
  .field__label {
    margin-bottom: 2rem;
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    font-size: .875rem;
    
    .label__value {
      color: var(--myth-color-accent);
    }

    .count {
      font-weight: normal;
    }
  }

  .field__items {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
  }
}

.video-embed-field-provider-youtube {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  iframe {
    width: 100%;
    aspect-ratio: calc(16 / 9);
    height: auto;
  }

  .video__title {
    font-size: 1.2rem;
    color: var(--myth-color-brand);
    font-weight: 500;
    line-height: 1.3;
  }

  .video__link a {
    color: var(--myth-color-brand);
    font-size: .875rem;
    display: inline-flex;
    gap: 1rem;
    align-items: center;

    &:hover {
      text-decoration: underline;
    }

    &::after {
      content: '';
      display: block;
      width: 20px;
      height: 20px;
      background-color: var(--myth-color-brand);
      mask: url(../images/icons/icon-link.svg);
      mask-size: 100%;
      mask-repeat: no-repeat;
      mask-position: center;
    }
  }
}

@media (min-width: 600px) {
  .field--type-video-embed-field .field__items {
    grid-template-columns: repeat(2, 1fr);
  }

  .video-embed-field-provider-youtube .video__title {
    font-size: 2.2rem;
  }
}


.paragraph--type--map {
  &.mode--full-width {
    background-color: var(--myth-color-surface);
    padding-block: 4rem;
  }

  .paragraph__content {
    .text {
      display: flex;
      justify-content: space-between;
      gap: 2rem;
      align-items: end;
      flex-wrap: wrap;
    }

    .field--name-field-link a {
      padding: 1rem 1.5rem;
      border-radius: 4px;
      display: inline-flex;
      background-color: var(--myth-color-brand);
      color: #fff;

      &::after {
        width: 20px;
        height: 20px;
        background-color: var(--myth-color-white);
        mask-size: 100%;
        transition: background-color .15s;
      }

      &:hover {
        text-decoration: none;
        background-color: var(--myth-color-black);
      }
    }

    iframe {
      margin-top: 2.5rem;
      width: 100%;
      height: 400px;
    }
  }
}

.region-footer {
  background-color: var(--myth-color-brand);
  padding-top: 4rem;
  // margin-top: 4rem;

  > .region__content {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: center;
  }

  .block__content,
  .block__content a,
  .block__label {
    color: var(--myth-color-white);
  }
}

.region-footer-bottom {
  background-color: var(--myth-color-brand);
  padding-top: 3rem;

  .region__content {
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    padding-block: 2rem;

    background-image: linear-gradient(var(--myth-color-border), var(--myth-color-border));
    background-size: calc(100% - 40px) 1px;
    background-position: 20px top;
    background-repeat: no-repeat;
  }
}

#block-copyright .block__content {
  display: flex;
  gap: 1rem;
  color: #CCD6E9;
  font-size: .875rem;

  a {
    color: #CCD6E9;
  }
}

#block-address .block__content a {
  color: #CCD6E9;
  text-decoration: none;
}

body:not(.path-frontpage) .region-content {
  margin-top: 4rem;
}


.field--name-field-layout .text-formatted > *,
.field--name-field-layout .field--name-field-email,
.paragraph--type--person,
.paragraph--type--gallery .field--name-field-images > .field__item,
.paragraph--type--attachment .field--name-field-files > .field__item,
.paragraph--type--youtube-video .field--name-field-video .field__item,
.paragraph--type--navigation ol.nav > li,
.paragraph--type--attachment > .field--name-field-label {
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;

  // &.is-animating {
  //   .paragraph:not(.paragraph--type--layout)
  // }
}

.admin-toolbar__logo {
  border-radius: 0!important;
}

#block-footer-members {
  @media (min-width: 699px) {
    grid-column: 2 / -1;
    grid-row: 1 / 10;
  }

  .block__label {
    margin-top: 0;
  }
  
  .field--name-field-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2rem;

    * {
      color: #CCD6E9;
    }
    
    h3 {
      color: #fff;
    }
  }
}

#block-social-links {
  margin-top: 2rem;

  .block__content {
    display: flex;
    gap: 2rem;
  }
}

#block-menu-social {
  // background-color: var(--myth-color-brand);

  .block__content {
    display: flex;
    gap: 2rem;
    justify-content: center;
  }  

  svg {
    width: 20px;
    height: 20px;
  }

  .field--name-field-facebook,
  .field--name-field-linkedin {
    svg path {
      fill: var(--myth-color-brand);
    }
  }

  .field--name-field-instagram {
    svg path {
      stroke: var(--myth-color-brand);
    }
  }
}

#block-footer-menu {
  .block__content .menu {
    margin: 0;

    a {
      color: #D5DEEF;
    }
  }
}


.menu-toggle {
  width: 32px;
  height: 32px;
  overflow: hidden;
  display: none;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  span {
    display: block;
    width: 22px;
    height: 3px;
    background-color: var(--myth-color-white);
    position: relative;
    transition: background-color .2s;

    &::before,
    &::after {
      content: '';
      display: block;
      width: 100%;
      height: 3px;
      background-color: var(--myth-color-white);
      position: absolute;
      will-change: transform;
      transition: background-color .2s, transform .2s;
    }

    &::before {
      transform: translateY(-7px);
    }

    &::after {
      transform: translateY(7px);
    }
  }
}

/* .main-header.fixed .menu-toggle {
  span,
  span::before,
  span::after {
    background-color: var(--myth-color-brand);
  }
} */

body.menu-open .menu-toggle span {
  background-color: transparent!important;
  
  &::before {
    transform: translateY(0) rotate(45deg);
  }

  &::after {
    transform: translateY(0) rotate(-45deg);
  }
}

.region-open-menu {
  position: fixed;
  top: 0;
  display: block;
  z-index: 499;
  background: #fff;
  width: 100%;
  height: 100dvh;
  will-change: transform, opacity;
  transition: opacity .2s, transform .2s;
  padding: 20px;
  overflow-y: auto;
  transform: translateX(100%);
  opacity: 0;
  background-image: linear-gradient(var(--myth-color-brand), var(--myth-color-brand));
  background-size: 100% 80px;
  background-position: top;
  background-repeat: no-repeat;

  .contextual {
    display: none;
  }

  .region__content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    height: 100%;
  }

  .menu-close {
    width: 32px;
    height: 32px;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    display: flex;
    position: absolute;
    top: 20px;
    right: 20px;

    span {
      display: block;
      width: 22px;
      height: 3px;
      position: relative;

      &::before,
      &::after {
        content: '';
        display: block;
        width: 100%;
        height: 3px;
        background-color: var(--myth-color-white);
        position: absolute;
      }

      &::before {
        transform: rotate(45deg);
      }

      &::after {
        transform: rotate(-45deg);
      }
    }
  }
}

body.menu-open {
  overflow: hidden;
}

body.menu-open .region-open-menu {
  transform: translateX(0);
  opacity: 1;
}

#block-menu-logo {
  a.logo {
    max-width: 200px;
    display: block;
  }
}

#block-menu-navigation {
  margin-top: 1rem;
  flex-grow: 1;
}

#block-menu-navigation .block__content {
  overflow: hidden;
  position: relative;
  border-radius: 5px;
  
  .root_menu, .root_menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    transition: transform 0.2s ease-in-out;
  }

  .root_menu {
    position: relative;
  }

  .root_menu ul {
    position: absolute;
    top: 0;
    left: 100%;
    height: 100%;
    z-index: 2;
    display: none;
  }

  li {
    border-bottom: 1px solid var(--myth-color-border);
  }

  .menu-item-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  a {
    display: flex;
    color: var(--myth-color-brand);
    font-size: 1.375rem;
    font-weight: 500;
    padding: 10px 0;
    text-decoration: none;
    gap: 1rem;
    justify-content: space-between;

    &::after {
      display: block;
      content: '';
      width: 32px;
      height: 32px;
      background-color: var(--myth-color-brand);
      mask: url(../images/icons/arrow_right.svg);
      mask-size: 22px;
      mask-position: 100% center;
      mask-repeat: no-repeat;
      mask-position: 100%;
    }
  }

  .menu-item-wrapper a {
    flex-grow: 1;
  }

  // .arrow-btn {
  //   display: block;
  //   content: '';
  //   width: 32px;
  //   height: 32px;
  //   background-color: var(--myth-color-brand);
  //   mask: url(../images/icons/arrow_right.svg);
  //   mask-size: 22px;
  //   mask-position: 100% center;
  //   mask-repeat: no-repeat;
  //   mask-position: 100%;
  // }

  .root_menu li.back-button a {
    color: var(--myth-color-brand);
    font-weight: 500;
    display: inline-flex;
    text-decoration: none;;
    font-size: 1rem;
    margin-bottom: 10px;
    line-height: 1;
    align-items: center;
  }

  .root_menu li.back-button a::before {
    display: block;
    content: '';
    width: 24px;
    height: 24px;
    background-color: var(--myth-color-brand);
    mask: url(../images/icons/arrow_right.svg);
    transform: rotateY(180deg);
    mask-size: 22px;
    mask-position: 100% center;
    mask-repeat: no-repeat;
  }
}

#block-footer-logo {
  min-width: 170px;
}

body.path-user:not(.user-logged-in) {
  .region-heading {
    display: none;
  }

  main {
    display: grid;
  }

  #block-primary-tabs,
  [data-drupal-messages],
  .region-content .region__content {
    padding-inline: 20px;
    margin-inline: auto;
    max-width: 500px;
  }

  .region-content {
    margin-top: 0;
  }

  #block-main-page-content {
    padding: 20px;
    border: 1px solid var(--myth-color-border);
    background-color: var(--myth-color-surface);
    border-radius: 8px;
    margin-top: 2rem;
  }

  .form-submit {
    width: 100%;
    margin-top: 1rem;
  }
}

.login-addon-links {
  margin-top: 1rem;
  font-size: .875rem;
}

#block-language {
  .links {
    a {
      color: var(--myth-color-body);
      font-weight: 400;

      &.is-active {
        color: var(--myth-color-brand);
        font-weight: 600;
      }

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

#block-menu-language {
  .links {
    flex-direction: column;
    gap: 0;

    a {
      color: var(--myth-color-brand);
      font-weight: 500;
      position: relative;
      display: block;
      padding: .875rem;

      &.is-active {
        background-color: var(--myth-color-surface);

        &::after {
          content: '';
          display: block;
          width: 6px;
          height: 6px;
          position: absolute;
          background-color: var(--myth-color-accent);
          border-radius: 50%;
          top: calc(50% - 3px);
          right: .875rem;
        }
      }

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

.paragraph--type--contact {
  background-color: var(--myth-color-surface);
  padding-block: 4rem;

  .paragraph__content {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem 1.5rem;

    > *:nth-child(3)::before {
      display: block;
      content: '';
      height: 1px;
      position: absolute;
      left: 0;
      right: 0;
      background-color: var(--myth-color-border);
      transform: translateY(-2.5rem);
    }
  }

  .field--name-field-text td {
    padding: 0 3rem .3rem 0;
  }

  .field--name-field-text tr {
    border: none;
  }

  .field--name-field-text td:first-child {
    padding-left: 0;
  }

  .field--name-field-text td:last-child {
    padding-right: 0;
  }

  .meta {
    color: var(--myth-color-body2);
    font-size: .875rem;

    h2 {
      margin-block: 1rem 0;
    }
  }

  .field--name-field-email {
    .field__label {
      font-size: .875rem;
      color: var(--myth-color-body2);
      font-weight: normal;
    }

    .field__items {
      margin-top: 1rem;
      font-size: 2.5rem;
      line-height: 1.2;
      font-weight: 500;
      
      a {
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        color: var(--myth-color-brand);
        align-items: center;
      }

      a::after {
        content: "";
        display: block;
        width: 24px;
        height: 24px;
        background-color: var(--myth-color-brand);
        mask: url(../images/icons/icon-link.svg) center center / 100% auto no-repeat;
        mask-position: center center;
      }
    }
  }
}

#block-menu-info {
  .block__content {
    background-color: var(--myth-color-surface);
    padding: 1rem;
    content: var(--myth-color-body);
    font-size: .875rem;

    a {
      text-decoration: none;
      color: var(--myth-color-brand);
    }

    p {
      margin-block: .5em;
    }
  }
}

#block-menu-footer {
  ul.menu {
    margin: 0;

    a {
      color: var(--myth-color-body);
      font-size: .875rem;
    }
  }
}

@media (max-width: 64rem) {
  #block-main-navigation,
  #block-header-info {
    display: none;
  }
  
  .menu-toggle {
    display: flex;
  }

  .promo-item {
    min-height: auto;
  }

  .paragraph--type--promo-container.mode--full-width .promo-item {
    min-height: calc(100svh - var(--myth-header-height) - var(--myth-hhla-height));
  }

  .promo-item {
    .field--name-field-media-image {
      height: 50%;
      aspect-ratio: unset;
      top: unset;
      right: -20%;
      bottom: 0;
      width: 100%;
      opacity: .75;
    }
  }
}


@media (max-width: 799px) {
  .layout--two-column {
    grid-template-columns: 1fr;
  }

  #block-footer-members .field--name-field-items {
    grid-template-columns: 1fr;
  }

  .promo-item {
    .field--name-field-description, .field--name-field-text {
      font-size: 2.75rem;
    }

    .field--name-title, .field--name-field-label {
      font-size: 1rem;
    }
  }
}




@media (min-width: 64rem) {
  .paragraph--type--layout > .layout--twocol-fixed_left > .layout__region--first {
    position: sticky;
    top: calc(var(--myth-header-height) + var(--myth-heder-fix-top));
  }
}

@media (max-width: 699px) {
  h1 {
    font-size: 2.75rem;
  }

  h2,
  .paragraph--type--personal .field--name-field-label {
    font-size: 1.75rem;
  }

  h3,
  .paragraph--type--person .field--name-field-label {
    font-size: 1.375rem;
  }

  .swiper-navigations {
    padding-bottom: 0;

    .swiper-navigation {
      margin-bottom: 2rem;
    }

    .swiper-pagination-bullets.swiper-pagination-horizontal {
      flex-direction: column;
      gap: 1rem;
    }
  }

  .promo-item .promo-item__content {
    // gap: 1rem;
    padding: 100px 20px 0 20px;
  }

  #block-promo,
  .paragraph--type--promo-container {
    .site_name {
      padding-top: 55px;
    }
  }

  .region-footer > .region__content {
    grid-template-columns: 1fr;
  }

  #block-footer-members .field--name-field-items {
    gap: 0;
  }

  .paragraph--type--map .paragraph__content {
    flex-direction: column;
    align-items: start;

    .field--name-field-text {
      width: auto;
    }
  }
}

#cookiesjsr {
  --btn-bg-color: var(--myth-color-brand);
  --btn-prime-font-color: var(--myth-color-brand);
  --btn-inv-font-color: var(--myth-color-brand);
  --btn-inv-border-color: var(--myth-color-brand);
  --btn-prime-inv-border-color: var(--myth-color-brand);
  --btn-prime-inv-bg-color: var(--myth-color-brand);
  --banner-bg-color: var(--myth-color-brand);
  --layer-tab-active-bg-color: var(--myth-color-brand);
  --layer-bg-dark: var(--myth-color-brand);
  --switch-always-on-font-color: var(--myth-color-heading);
}

.cookiesjsr-btn {
  padding-inline: 1em;
  font-size: .75rem;
}

.cookiesjsr-banner--info {
  font-size: .875rem;
}

@media (max-width: 599px) {
  #block-copyright .block__content {
    flex-direction: column;
  }

  #block-branding-name, 
  #block-heading-text, 
  #block-page-title {
    max-width: 80%;
  }

  .region-heading .region__content {
    min-height: 270px;
  }

  #block-branding-name {
    margin-top: 1.5rem;
  }

  .paragraph--type--personal .field--name-field-par-references {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .field--name-field-files a {
    padding-left: 0;

    &::before {
      display: none;
    }
  }

  .form-submit {
    width: 100%;
  }

  #block-language {
    display: none;
  }

  .region-footer > .region__content {
    flex-direction: column;
    align-items: start;
  }

  .paragraph--type--contact .paragraph__content {
    grid-template-columns: 1fr;
  }
}