/*!***************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./frontend/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./frontend/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./frontend/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./web/app/themes/parent/components/timeline/src/timeline.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************/
.twz-timeline {
  --timeline-items-gap: 10rem;
  --timeline-items-padding: 4rem;
  --timeline-tabs-padding: 11rem;
  --timeline-item-min-width: 80rem;
  --timeline-item-gap: 4rem;
  --tab-indicator-width: 5rem;
  --timeline-background-overlay: var(--blue-800);
}
@media (max-width: 767px) {
  .twz-timeline {
    --timeline-tabs-padding: 6rem;
    --timeline-items-gap: 4rem;
    --timeline-item-min-width: 80%;
  }
}
.twz-timeline__subtitle {
  display: block;
  position: absolute;
  top: 1rem;
  left: 0;
  z-index: 2;
}
.twz-timeline__subtitle .slash {
  padding: 2rem 3rem 2rem 0;
  color: var(--text-color-dark);
}
.twz-timeline__subtitle .slash::before {
  --slash-offset: 1.9em;
  --slash-bg: var(--white);
  left: calc(var(--space-to-screen) * -1);
  width: calc(100% + var(--space-to-screen) + 4rem);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--slash-degree-px)) 100%, 0 100%);
}
.twz-timeline__content {
  padding-top: 6rem;
  position: relative;
}
.twz-timeline__content .twz-timeline__background {
  position: absolute;
  top: calc(var(--paddingTop, var(--padding-default)) * -1);
  left: 0;
  height: calc(100% + var(--paddingTop, var(--padding-default)));
  left: calc(var(--space-to-screen) * -1);
  width: calc(100% + var(--space-to-screen) * 2);
}
.twz-timeline__content .twz-timeline__background img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.twz-timeline__content .twz-timeline__background:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: color-mix(in srgb, var(--timeline-background-overlay, var(--blue-800)), transparent 11%);
}
.twz-timeline .twz-text,
.twz-timeline .twz-tabs {
  position: relative;
}
.twz-timeline .twz-tabs {
  padding-block: var(--timeline-tabs-padding, 8rem);
  margin-right: calc(var(--space-to-screen) * -1);
}
.twz-timeline .twz-tabs::-webkit-scrollbar {
  display: none;
}
.twz-timeline__items {
  display: flex;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  gap: var(--timeline-items-gap, 4rem);
  margin-right: calc(var(--space-to-screen) * -1);
  padding-block: var(--timeline-items-padding, 4rem);
}
.twz-timeline__items::-webkit-scrollbar {
  display: none;
}
.twz-timeline__item {
  min-width: var(--timeline-item-min-width, 80rem);
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  gap: var(--timeline-item-gap, 2rem);
  max-width: 80%;
}
.twz-timeline__item:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--timeline-item-year-line-color, var(--blue-300));
}
.twz-timeline__item-year {
  font-weight: 500;
}
.twz-timeline__item .content {
  display: flex;
  gap: 2rem;
  order: 3;
}
@media (max-width: 767px) {
  .twz-timeline__item .content {
    flex-direction: column-reverse;
  }
}
.twz-timeline__item .content img {
  max-width: 19rem;
  max-height: 13rem;
  -o-object-fit: contain;
     object-fit: contain;
}
.twz-timeline__item .content p {
  margin-top: 0.5em;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./frontend/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./frontend/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./frontend/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./web/app/themes/stxgroup/components/timeline/src/timeline.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************/
.twz-timeline {
  --timeline-items-gap: 10rem;
  --timeline-items-padding: 4rem;
  --timeline-tabs-padding: 11rem;
  --timeline-item-min-width: 80rem;
  --timeline-item-gap: 4rem;
  --tab-indicator-width: 5rem;
  --timeline-background-overlay: var(--blue-800);
}
@media (max-width: 767px) {
  .twz-timeline {
    --timeline-tabs-padding: 6rem;
    --timeline-items-gap: 4rem;
    --timeline-item-min-width: 80%;
  }
}
.twz-timeline__subtitle {
  display: block;
  position: absolute;
  top: 1rem;
  left: 0;
  z-index: 2;
}
.twz-timeline__subtitle .slash {
  padding: 2rem 3rem 2rem 0;
  color: var(--text-color-dark);
}
.twz-timeline__subtitle .slash::before {
  --slash-offset: 1.9em;
  --slash-bg: var(--white);
  left: calc(var(--space-to-screen) * -1);
  width: calc(100% + var(--space-to-screen) + 4rem);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--slash-degree-px)) 100%, 0 100%);
}
.twz-timeline__content {
  padding-top: 6rem;
  position: relative;
}
.twz-timeline__content .twz-timeline__background {
  position: absolute;
  top: calc(var(--paddingTop, var(--padding-default)) * -1);
  left: 0;
  height: calc(100% + var(--paddingTop, var(--padding-default)));
  left: calc(var(--space-to-screen) * -1);
  width: calc(100% + var(--space-to-screen) * 2);
}
.twz-timeline__content .twz-timeline__background img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.twz-timeline__content .twz-timeline__background:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: color-mix(in srgb, var(--timeline-background-overlay, var(--blue-800)), transparent 11%);
}
.twz-timeline .twz-text,
.twz-timeline .twz-tabs {
  position: relative;
}
.twz-timeline .twz-tabs {
  padding-block: var(--timeline-tabs-padding, 8rem);
  margin-right: calc(var(--space-to-screen) * -1);
}
.twz-timeline .twz-tabs::-webkit-scrollbar {
  display: none;
}
.twz-timeline__items {
  display: flex;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  gap: var(--timeline-items-gap, 4rem);
  margin-right: calc(var(--space-to-screen) * -1);
  padding-block: var(--timeline-items-padding, 4rem);
}
.twz-timeline__items::-webkit-scrollbar {
  display: none;
}
.twz-timeline__item {
  min-width: var(--timeline-item-min-width, 80rem);
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  gap: var(--timeline-item-gap, 2rem);
  max-width: 80%;
}
.twz-timeline__item:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--timeline-item-year-line-color, var(--blue-300));
}
.twz-timeline__item-year {
  font-weight: 500;
}
.twz-timeline__item .content {
  display: flex;
  gap: 2rem;
  order: 3;
}
@media (max-width: 767px) {
  .twz-timeline__item .content {
    flex-direction: column-reverse;
  }
}
.twz-timeline__item .content img {
  max-width: 19rem;
  max-height: 13rem;
  -o-object-fit: contain;
     object-fit: contain;
}
.twz-timeline__item .content p {
  margin-top: 0.5em;
}