@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-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-brand);

    margin-block: 1em;



    .field__item + .field__item {

      color: var(--myth-color-body);



      &::before {

        content: '\2022';

        display: inline-block;

        transform: translateX(-1rem) translateY(-3px);

        font-size: .6em;

        line-height: 1;

      }

    }

  }

}



.breadcrumb {

  li, a {

    color: #626B78;

    font-size: .875rem;

  }



  li::before {

    content: " \2F ";

    color: #ADB3BC;

    padding-inline: .3rem;

  }

}



#block-branding-name {

  margin-top: 2.875rem;

  position: relative;



  .site-name {

    pointer-events: none;

    font-size: .875rem;

    text-transform: uppercase;

    font-weight: 600;

    line-height: 1;

    

    a {

      color: var(--myth-color-accent);

    }

  }



  &::before {

    content: '';

    display: block;

    position: absolute;

    left: 0;

    width: 2px;

    height: 44px;

    background-color: var(--myth-color-accent);

  }

}



#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 {

  padding-left: 1.75rem;

  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-accent);

      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: #C1D1E9;

  }

}





.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: #C1D1E9;



    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-accent);

      }

    }

  }

}







.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;

  }

}