/**
 * Import global settings
 */
/**
 * Colors
 */
/**
 * Import frontend block styles 
 */
/**
 * The following styles get applied on the front of your site.
 */
.accordion .title {
  cursor: pointer;
  display: flex;
}
.accordion .title:after {
  content: "";
  background: url("../../../assets/dist/img/chevron.svg") no-repeat;
  background-size: contain;
  width: 24px;
  height: 24px;
  margin-left: auto;
  margin-right: 0;
  transition: all 0.2s ease-in-out;
}
.accordion .title[aria-expanded=true]:after {
  transform: rotateZ(180deg);
}
.accordion .description {
  display: none;
}
.accordion .description[aria-hidden=false] {
  display: block;
}

/**
 * The following styles get applied on the frontend of your site.
 */
/**
 * The following styles get applied on the frontend of your site.
 */
.factcard {
  position: relative;
  -webkit-hyphens: auto;
          hyphens: auto;
}
.factcard > a {
  display: block;
}
.factcard figure {
  max-width: 100%;
  overflow: hidden;
}
.factcard figure img,
.factcard figure video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  margin: 0;
}

/**
 * The following styles get applied on the frontend of your site.
 */
.factcards {
  display: grid;
  gap: 1rem;
}
@media (max-width: 767px) {
  .factcards {
    grid-template-columns: repeat(auto-fill, minmax(max(100%, 280px), 1fr));
  }
}
.factcards.has-1-columns {
  grid-template-columns: repeat(auto-fill, minmax(max(100% / 1 - 1rem, 280px), 1fr));
}
.factcards.has-2-columns {
  grid-template-columns: repeat(auto-fill, minmax(max(100% / 2 - 1rem, 280px), 1fr));
}
.factcards.has-3-columns {
  grid-template-columns: repeat(auto-fill, minmax(max(100% / 3 - 1rem, 280px), 1fr));
}
.factcards.has-4-columns {
  grid-template-columns: repeat(auto-fill, minmax(max(100% / 4 - 1rem, 280px), 1fr));
}
.factcards.has-5-columns {
  grid-template-columns: repeat(auto-fill, minmax(max(100% / 5 - 1rem, 280px), 1fr));
}
.factcards.has-6-columns {
  grid-template-columns: repeat(auto-fill, minmax(max(100% / 6 - 1rem, 280px), 1fr));
}

/**
 * The following styles get applied on the frontend of your site.
 */
.keyvisual {
  position: relative;
  max-width: 100%;
  height: 400px;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.keyvisual .text {
  width: 100%;
}
.keyvisual .media {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.keyvisual picture {
  width: 100%;
  height: 100%;
}
.keyvisual img,
.keyvisual video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.keyvisual.has-media-on-the-right .media {
  order: 2;
}

/**
 * The following styles get applied on the frontend of your site.
 */
.map {
  max-width: 100%;
  min-height: 400px;
  aspect-ratio: 16/9;
}
.map .leaflet-marker-icon {
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.75));
}

/**
 * The following styles get applied on the frontend of your site.
 */
.media-compare {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}
.media-compare img, .media-compare video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  margin: 0;
}
.media-compare .media-one {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
          clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.media-compare .media-one img {
  position: absolute;
}
.media-compare .media-two {
  height: 100%;
}
.media-compare .slider-handle {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

/**
 * The following styles get applied on the frontend of your site.
 */
/**
 * The following styles get applied on the frontend of your site.
 */
/**
 * The following styles get applied on the frontend of your site.
 */
/**
 * The following styles get applied on the frontend of your site.
 */
.slider {
  width: 100%;
  display: block;
}
.slider .slick-track {
  display: flex !important;
}
.slider .slick-slide {
  height: inherit !important;
}

/**
 * The following styles get applied on the frontend of your site.
 */
/**
 * The following styles get applied on the frontend of your site.
 */
.tabs {
  overflow: hidden;
}
.tabs [role=tablist] {
  position: relative;
  min-width: 100%;
  display: flex;
  flex-wrap: wrap;
  scroll-snap-type: x mandatory;
  box-sizing: content-box;
  z-index: 2;
  margin-bottom: -1px;
  overflow: hidden;
}
.tabs [role=tab] {
  display: inline-block;
  position: relative;
  z-index: 2;
  margin: 0;
  top: 2px;
  padding: 5px;
  border: 1px solid #dddddd;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: #F0F0F0;
  color: #000000;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  scroll-snap-align: start;
  flex: 1 1 0px;
}
.tabs [role=tab]:focus,
.tabs [role=tab]:hover {
  z-index: 3;
  border: 1px solid #000000;
}
.tabs [role=tab][aria-selected=true] {
  background: #ffffff;
}
.tabs [role=tabpanel] {
  padding: 1rem;
  border: 1px solid #dddddd;
  background: #ffffff;
  width: 100%;
  overflow: auto;
}
.tabs [role=tabpanel].is-hidden {
  display: none;
}
.tabs .tablist-nav {
  position: absolute;
  padding: 0;
  height: 100%;
  top: 2px;
  z-index: 4;
  display: none;
}
.tabs .tablist-nav:before {
  display: block;
  content: "";
  background: url("../../../assets/dist/img/chevron.svg") no-repeat;
  background-size: contain;
  width: 24px;
  height: 24px;
}
.tabs .scroll-left {
  left: 0;
  transform: rotateZ(90deg);
}
.tabs .scroll-right {
  right: 0;
  transform: rotateZ(-90deg);
}

/**
 * The following styles get applied on the frontend of your site.
 */
.timeline {
  width: 100%;
}
.timeline article {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-areas: "date text" "media media";
  grid-gap: 1rem;
}
.timeline:nth-child(even) article {
  grid-template-areas: "media media" "date text";
}
.timeline .media {
  grid-area: media;
  max-width: 100%;
  overflow: hidden;
}
.timeline .media img,
.timeline .media video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.timeline .text {
  grid-area: text;
}
.timeline .date {
  grid-area: date;
}

/**
 * The following styles get applied on the frontend of your site.
 */
.timelines ul,
.timelines ol {
  list-style: none;
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}

:root {
  --wp--style--global--narrow-size: 640px;
}

.alignnarrow {
  max-width: var(--wp--style--global--narrow-size);
  margin-left: auto;
  margin-right: auto;
}

.wp-block-button.has-icon .wp-block-button__link:before {
  margin-right: 5px;
}

ul.wp-block-list li.icon {
  list-style: none;
}
ul.wp-block-list li.icon:before {
  margin-left: -1rem;
}

/**
 * Helpers
 */
@media (min-width: 767px) and (max-width: 1366px) {
  .show-for-mobile {
    display: none !important;
  }
}
@media (min-width: 1366px) {
  .show-for-mobile {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .hide-for-mobile {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .show-for-tablet {
    display: none !important;
  }
}
@media (min-width: 1366px) {
  .show-for-tablet {
    display: none !important;
  }
}

@media (min-width: 767px) and (max-width: 1366px) {
  .hide-for-tablet {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .show-for-desktop {
    display: none !important;
  }
}
@media (min-width: 767px) and (max-width: 1366px) {
  .show-for-desktop {
    display: none !important;
  }
}

@media (min-width: 1366px) {
  .hide-for-desktop {
    display: none !important;
  }
}