:root{--timeline-outer: clamp(16px, 4vw, 60px);--timeline-gap: 24px;--timeline-dot-margin: 6px;--timeline-dot-width: 23px;--timeline-line-width: 1px;--timeline-dot-margin-offset: calc(var(--timeline-dot-margin) * -1);--timeline-width-indicator: calc(var(--timeline-dot-width) + var(--timeline-dot-margin) * 2);--timeline-padding: calc(var(--timeline-width-indicator) + var(--timeline-outer))}timeline-component{display:block}.section-timeline{padding-top:var(--padding-section-top, 60px);padding-bottom:var(--padding-section-bottom, 60px)}.section-timeline__wrapper{padding:0 16px 32px}.section-timeline__head{text-align:center}.section-timeline__title{margin-bottom:24px;text-align:left}.section-timeline__subtitle{max-width:640px;margin:0 auto}.section-timeline__mobile-slider{display:block}.section-timeline__desktop-only{display:none}@media screen and (min-width:768px){.section-timeline__title{text-align:center}.section-timeline__mobile-slider{display:none}.section-timeline__desktop-only{display:block;position:relative;min-height:calc(100vh * var(--timeline-counter, 1))}}.section-timeline__slide{display:flex;flex-direction:column;height:auto!important;padding:0 4px;box-sizing:border-box}.section-timeline__slide-image{width:100%;border-radius:8px;overflow:hidden;flex-shrink:0}.section-timeline__slide-content{flex:1;padding:0;color:inherit;margin-top:24px}@media screen and (min-width:768px){.section-timeline__inner{flex:0 1 100%;position:sticky;top:0;display:block;min-height:100vh;overflow:visible;padding:0;margin:0}}.section-timeline__inner{display:none}@media screen and (min-width:768px){.section-timeline__inner{display:block}}.timeline__row{--part-width: 50px;flex:0 0 auto;position:relative;width:calc(100% - var(--part-width));padding-top:var(--timeline-padding)}.timeline__row:not(:last-child){margin-right:var(--timeline-gap)}.timeline__row:only-child{width:100%}@media screen and (min-width:768px){.timeline__row{position:static;padding-top:var(--timeline-outer);width:auto;margin-right:0}}.timeline__row__editor{--row-count: 0;--row-height-min: 0px;--row-height: max(var(--row-height-min), 100vh);position:absolute;left:0;top:0;z-index:-1;width:100%;height:0;opacity:0;visibility:hidden;pointer-events:none}@media screen and (min-width:768px){.timeline__row__editor{top:calc(var(--row-count) * var(--row-height) + 1px);height:var(--row-height)}}@media screen and (min-width:768px){.section-timeline--has-images .timeline__image{position:absolute;top:0;left:50%;bottom:0;right:0}}@media screen and (max-width:767px){.timeline__image{opacity:.5;transition:opacity .5s}}@media screen and (min-width:768px){.timeline__image-inner{position:sticky;top:0;max-height:100vh;overflow:hidden;height:100%}}.timeline__image-figure{overflow:hidden;height:100%}@media screen and (min-width:768px){.timeline__row:first-child .timeline__image-figure{transform:translateY(0)}.timeline__image-figure{transform:translateY(100%);transition:transform .5s;padding-top:0}.timeline__image-figure img,.timeline__image-figure .responsive-image-wrapper{height:100%;object-fit:cover}}.timeline__content{padding:0 0 calc(var(--timeline-outer) * 2)}@media screen and (min-width:768px){.section-timeline--has-images .timeline__content{position:relative;z-index:1;padding:0 0 var(--timeline-outer);width:50%}}.timeline__content__inner{padding-top:calc(var(--timeline-dot-margin) + 2px);margin:0 auto;max-width:560px}@media screen and (min-width:768px){.timeline__content__inner{padding-right:var(--timeline-outer);padding-left:var(--timeline-outer)}}.section-timeline__subheading{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.6;margin:0 0 8px}.section-timeline__block-title{margin:0 0 8px}.section-timeline__block-btn{margin-top:8px}.timeline__dot__holder,.timeline__content__outer{opacity:.5;transition:opacity .5s}.timeline__indicator{--bg: var(--color-scheme-background-color, #fff);position:absolute;top:calc((var(--timeline-width-indicator) / 2) - (var(--timeline-line-width) / 2));left:var(--timeline-dot-margin);right:0;bottom:auto;display:block;width:auto;height:var(--timeline-line-width);font-size:0}@media screen and (min-width:768px){.timeline__indicator{top:29px;left:calc((var(--timeline-width-indicator) / 2) - (var(--timeline-line-width) / 2));bottom:calc(var(--timeline-dot-margin-offset) - var(--timeline-outer));right:auto;width:var(--timeline-line-width);height:auto;margin-left:var(--timeline-outer)}}.timeline__row:last-child .timeline__indicator{background:var(--bg);opacity:1;transition:none;animation:none}@media screen and (min-width:768px){.timeline__row:last-child .timeline__indicator{display:none}}@media screen and (max-width:767px){.timeline__row:only-child .timeline__indicator{display:none}}@media screen and (max-width:767px){.timeline__row:first-child .timeline__indicator{left:0;right:auto;width:calc((100% + var(--timeline-gap)) * var(--timeline-counter, 1) - var(--timeline-gap))}}.timeline__indicator:before,.timeline__indicator:after,.timeline__indicator__line:before{position:absolute;top:0;left:0;min-width:0;max-width:100%;min-height:0;max-height:100%;width:100%;height:100%;background:var(--color-scheme-text-color, #000);content:""}.timeline__indicator:before{opacity:.2}@media screen and (min-width:768px){.timeline__indicator:after{height:var(--percent-desktop, 0%);opacity:0}}@media screen and (max-width:767px){.timeline__indicator:after{width:var(--timeline-dot-width);background:var(--bg)}.timeline__row:not(:first-child) .timeline__indicator:before{content:none}}.timeline__indicator__line{position:relative;top:0;left:0;display:block;max-width:100%;width:100%;height:1px}@media screen and (min-width:768px){.timeline__indicator__line{display:none}}.timeline__indicator__line:before{width:var(--percent-mobile, 0%);height:100%}@media screen and (max-width:767px){.timeline__row:not(:first-child) .timeline__indicator__line:before{content:none}}.timeline__dot__wrapper{position:absolute;top:0;left:0;width:100%;height:var(--timeline-width-indicator)}@media screen and (min-width:768px){.timeline__dot__wrapper{width:var(--timeline-width-indicator);height:100%;margin-left:var(--timeline-outer)}}.timeline__dot__holder{position:absolute;top:0;left:0;width:100%;height:100%}@media screen and (min-width:768px){.timeline__dot__holder{max-height:100vh;height:100vh}}.timeline__dot__button{--bg: var(--color-scheme-background-color, #fff);position:absolute;top:50%;left:var(--timeline-dot-margin);width:var(--timeline-dot-width);height:var(--timeline-dot-width);padding:0;margin-top:calc((var(--timeline-dot-width) / 2) * -1);cursor:pointer;background:transparent;border:none}@media screen and (min-width:768px){.timeline__dot__button{left:50%;top:var(--timeline-dot-margin);margin:0 0 0 calc((var(--timeline-dot-width) / 2) * -1)}}.timeline__dot{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-color:var(--timeline-dot-color, var(--color-scheme-text-color, #000));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0}.timeline__dot:after,.timeline__dot:before{content:"";background-color:inherit;border-radius:inherit;opacity:.3;position:absolute;top:var(--timeline-dot-margin-offset);left:var(--timeline-dot-margin-offset);bottom:var(--timeline-dot-margin-offset);right:var(--timeline-dot-margin-offset);will-change:transform}.timeline__dot:before{opacity:0}.timeline__dot__button:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--bg);border-radius:50%}.timeline__row.is-selected .timeline__indicator:after,.timeline__row.is-selected .timeline__dot__holder,.timeline__row.is-selected .timeline__content__outer{opacity:1}@media screen and (min-width:768px){.timeline__row.is-selected .timeline__image-figure{transform:translateY(0)}}@media screen and (max-width:767px){.timeline__row.is-selected .timeline__image{opacity:1}}.timeline__row:not(.is-selected) .timeline__image{pointer-events:none}@keyframes pulseDot{0%,to{transform:scale(1);opacity:.3}50%{transform:scale(1.4);opacity:0}}@keyframes pulseDotHover{0%,to{transform:scale(1);opacity:.3}50%{transform:scale(1.6);opacity:0}}@media(hover:hover){.timeline__dot__button.is-selected .timeline__dot:before{animation:pulseDot 2.5s linear infinite}.timeline__dot__button:hover .timeline__dot:after{animation:pulseDotHover 1.5s linear infinite}}
/*# sourceMappingURL=/cdn/shop/t/7/assets/section-timeline.css.map */