.block-byv-timeline{padding-bottom:var(--wp--preset--spacing--60);padding-top:var(--wp--preset--spacing--60);}

.block-byv-timeline{--progress:20px;}

.timeline{display:flex;gap:var(--wp--preset--spacing--30);}
.timeline--center{text-align:center;flex-direction:column;}
.timeline--left{text-align:left;flex-direction:row;}
.timeline--right{text-align:right;flex-direction:row-reverse;}

/*Horizontal layouts*/
.timeline__content{flex:2;align-self:center;}
.timeline__timeline{flex:1;align-self:center;padding:1em 0;}
.timeline--center .timeline__timeline{align-self:stretch;}

/*Timeline*/
.tl{display:flex;list-style-type:none;padding:0;margin:0;position:relative;justify-content:space-around;}
.tl__item{flex:0 0 50px;display:flex;}
.tl__item--future{opacity:0.5;}
.tl__item__icon{font-size:32px;width:40px;height:40px;flex: 0 0 40px;text-align:center;}
.tl__item__title{display:inline-flex;font-family:var(--wp--custom--font--heading);font-weight:var(--wp--custom--font--heading-weight);line-height:100%;justify-content: center;gap:0.5em;}
.tl__item__date{color:var(--wp--preset--color--primary);}
.tl__gap{flex:1;position:relative;opacity:0;transition:0.6s opacity;}
.tl__gap:before{background-color:currentColor;content:'';position:absolute;opacity:0.2;}
.tl__gap__progress{background-color:currentColor;position:absolute;}
.tl__gap:first-child{display:none;}
.tl__marker{color:var(--wp--preset--color--primary);list-style-type:none;position:absolute;font-size:80%;font-family:var(--wp--custom--font--heading);font-weight:var(--wp--custom--font--heading-weight);}
.tl__marker:after{content:'';border:8px solid transparent;position:absolute;}

.visible .tl__gap{opacity:1;}

.tl__gap--past:before,
.tl__gap--current:before{opacity:1;}
.tl__item--current .tl__item__icon{color:var(--wp--preset--color--primary);}
.tl__item--current .tl__item__icon:before{content:'';border:8px solid transparent;position:absolute;}
.tl__item--future .tl__item__icon{opacity:0.4;}

/*vertical timeline*/
.tl--vertical{flex-direction:column;}
.tl--vertical .tl__marker{transform:translate(calc(-100% - 10px), -50%);left:0 !important;}
.tl--vertical .tl__marker:after{left:calc(100% + 8px);transform:translateY(-50%);top:50%;border-left-color:var(--wp--preset--color--primary);border-left-width:12px;left:calc(100% + 8px);}

.tl--vertical .tl__item{flex-direction:row;align-items:flex-start;}
.tl--vertical .tl__item__title{width:auto!important;text-align:left;align-self:flex-start;padding-top: 18px;}
.tl--vertical .tl__gap{flex:0 0 30px;}
.tl--vertical .tl__gap__progress{width:3px!important;left:18.5px;top:0;}
.tl--vertical .tl__gap:before{width:3px;top:0px;bottom:0;left:18.5px;}

.tl--vertical .tl__item{opacity:0;transition:1s all;transform:translateX(100px);}
.visible .tl--vertical .tl__item{opacity:1;transform:translateX(0);}

/*Horizontal timeline*/
.tl--horizontal .tl__marker{left:var(--progress);transform:translateX(-50%);opacity:0;}
.tl--horizontal .tl__marker:after{left:50%;transform:translateX(-50%);border-top-color:var(--wp--preset--color--primary);border-top-width:12px;top:100%;}

.tl--horizontal .tl__marker,
.tl--horizontal .tl__item{align-items:center;flex-direction:column;}
.tl--horizontal .tl__item{position:relative;}
.tl--horizontal .tl__item__icon{line-height: 40px;}
.tl--horizontal .tl__item__title{position:absolute;top:40px;display:block;}
.tl--horizontal .tl__item__title .tl__item__date{display:block;margin:0.5em auto;}
.tl--horizontal .tl__gap__progress{top:18px;left:0;}
.tl--horizontal .tl__gap:before{height:3px;top:18px;left:0;right:0;}

.tl--horizontal .tl__item--current .tl__item__icon:before{border-top-color:var(--wp--preset--color--primary);border-top-width:12px;top:-14px;left:50%;transform:translateX(-50%);}

.tl--horizontal .tl__item{opacity:0;transition:1s all;transform:translateY(100px);}
.visible .tl--horizontal .tl__marker{opacity:1;}
.visible .tl--horizontal .tl__item{opacity:1;transform:translateY(0);}

@media (min-width: 481px) {
  .tl--vertical .tl__gap__progress{width:3px !important;}
  .tl--vertical .tl__marker{left:0 !important;}
  .tl--horizontal .tl__gap__progress{height:3px !important;}
  .tl--horizontal .tl__marker{top:-20px !important;}
}

@media (max-width: 767px) {
  .timeline{flex-direction:column;}
  .timeline__content{text-align:center;}
  .timeline__content .button-set{justify-content:center;}
  
  .tl--vertical{padding-left:60px !important;}
}

@media (max-width: 480px) {
  
  /*horizontal has to become vertical*/
  .timeline--center .timeline__timeline{align-self:center;}
  
  .tl--horizontal{flex-direction:column;padding-left:60px !important;}
  .tl--horizontal .tl__marker{left:0!important;transform:translate(calc(-100% - 10px), -50%);}
  .tl--horizontal .tl__marker:after{left:calc(100% + 8px);transform:translateY(-50%);top:50%;border-top-color:transparent;border-left-color:var(--wp--preset--color--primary);border-left-width:12px;border-top-width:8px;}
  .tl--horizontal .tl__item{flex-direction:row;align-items:center;}
  .tl--horizontal .tl__item__title{position:static;width:auto!important;text-align:left;}
  .tl--horizontal .tl__gap{flex:0 0 30px;}
  .tl--horizontal .tl__gap__progress{width:3px !important;left:19px;top:0;}/*not sure why left is 19 instead of 15*/
  .tl--horizontal .tl__gap:before{width:3px;height:30px;top:0px;bottom:0;left:19px;}/*not sure why left is 19 instead of 15*/
  
  
}