.etheme-h-timeline-wrapper[data-type=grid] {
  --item-width: calc((100%/var(--cols, 3) - calc( var(--cols-gap, 10px) * 2)));
  overflow: auto;
  padding-bottom: 3px;
}
.etheme-h-timeline-wrapper[data-type=grid] .etheme-h-timeline-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  margin-left: calc(var(--cols-gap, 10px) * -1);
  margin-right: calc(var(--cols-gap, 10px) * -1);
}
.etheme-h-timeline-wrapper[data-type=grid] .etheme-h-timeline-item {
  min-width: var(--item-width);
  margin-left: var(--cols-gap, 10px);
  margin-right: var(--cols-gap, 10px);
}
.etheme-h-timeline-title {
  font-size: 1.4rem;
  text-transform: none;
}
.etheme-h-timeline-description {
  font-size: 1.14rem;
  margin-bottom: 15px;
}
.etheme-h-timeline-date-inner,
.etheme-h-timeline-date-inner > span {
  width: 100%;
  display: block;
}
.etheme-h-timeline-date-inner > span {
  font-size: 0.85em;
  line-height: 1;
  margin-bottom: 10px;
}
.etheme-h-timeline-wrapper[data-layout="chess"] .etheme-h-timeline-items:first-child .etheme-h-timeline-item:nth-child(even) {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.etheme-h-timeline-item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: auto;
  text-align: var(--item-text-align);
}
.etheme-h-timeline-item.is-active .etheme-h-timeline-step {
  border-color: var(--step-br-active-color, var(--line-active-color, var(--et_dark-2-white)));
}
.etheme-h-timeline-item.is-active .etheme-h-timeline-icon {
  color: var(--step-active-color, #fff);
  background-color: var(--step-bg-active-color, var(--line-active-color, var(--et_dark-2-white)));
}
.etheme-h-timeline-content {
  position: relative;
  display: grid;
  grid-template-columns: auto;
  grid-auto-flow: column;
  grid-column-gap: var(--item-cols-gap, 20px);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
  padding: 15px 20px;
  z-index: 1;
}
.etheme-h-timeline-content-icon {
  display: block;
  line-height: 1;
  margin-bottom: 10px;
  -ms-flex-item-align: start;
      align-self: flex-start;
}
.etheme-h-timeline-content-icon-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  font-size: 9em;
  z-index: -1;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  overflow: hidden;
}
.etheme-h-timeline-image img {
  display: inline-block;
}
.etheme-h-timeline-step {
  position: absolute;
  top: calc(100% + var(--rows-gap, 20px) + (var(--line-h, 2px) / 2));
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: var(--step-icon-size, calc(var(--step-proportion,20px) / 2));
  color: var(--step-color, var(--line-color, var(--et_border-color)));
  width: var(--step-proportion, 20px);
  height: var(--step-proportion, 20px);
  border-radius: 50%;
  background-color: var(--step-bg-color, #fff);
  border: var(--step-border-width, 5px) solid var(--step-br-color, var(--line-color, var(--et_border-color)));
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  z-index: 3;
}
.etheme-h-timeline-wrapper[data-layout=bottom] .etheme-h-timeline-step {
  top: auto;
  bottom: calc(100% + var(--rows-gap, 20px) + (var(--line-h,2px) / 2));
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
}
.etheme-h-timeline-icon {
  background-color: var(--line-color, var(--et_border-color));
  color: #fff;
}
.etheme-h-timeline-connector {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - var(--line-h,2px)/2);
  width: 100%;
  height: inherit;
}
.etheme-h-timeline-connector:after {
  content: '';
  position: absolute;
  height: var(--line-h, 2px);
  width: 100%;
  border-bottom: var(--line-h, 2px) var(--line-style, dashed) var(--line-color, var(--et_border-color));
  top: calc(50% - (var(--line-h,2px)/ 2));
}
.etheme-h-timeline-connector-wrapper {
  position: sticky;
  left: 0;
  height: var(--line-h, 2px);
  margin: var(--rows-gap, 20px) 0;
}
.etheme-h-timeline-connector-wrapper:first-child {
  margin-top: calc(var(--step-proportion,20px) /2 - var(--line-h,2px) /2);
}
.etheme-h-timeline-connector-wrapper:last-child {
  margin-bottom: calc(var(--step-proportion,20px) /2 - var(--line-h,2px) /2);
}
.etheme-h-timeline-connector-inner {
  position: absolute;
  background: var(--line-active-color, var(--et_dark-2-white));
  height: inherit;
  width: 0;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  z-index: 1;
}
.etheme-h-timeline-has-arrows .etheme-h-timeline-content:after {
  content: '';
  border-top: var(--border-width) var(--border-style) var(--border-color);
  border-right: var(--border-width) var(--border-style) var(--border-color);
  background: inherit;
  position: absolute;
  width: var(--arrow-size, 14px);
  height: var(--arrow-size, 14px);
  -webkit-clip-path: polygon(0 0, 100% 100%, 100% 0);
          clip-path: polygon(0 0, 100% 100%, 100% 0);
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  top: calc(100% - var(--arrow-size,14px)/2);
}
.etheme-h-timeline-has-arrows[data-layout=chess] .etheme-h-timeline-item:nth-child(even) .etheme-h-timeline-content:after,
.etheme-h-timeline-has-arrows[data-layout=bottom] .etheme-h-timeline-content:after {
  top: auto;
  bottom: calc(100% - var(--arrow-size,14px)/2);
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.etheme-h-timeline-wrapper[data-step-position=left] .etheme-h-timeline-step {
  left: var(--step-offset, 10px);
}
.etheme-h-timeline-wrapper[data-step-position=left] .etheme-h-timeline-content:after {
  left: calc((var(--step-proportion,20px)/ 2) - var(--arrow-size,14px)/ 2 - var(--border-width,0)/ 2 + var(--step-offset,10px));
}
.etheme-h-timeline-wrapper[data-step-position=right] .etheme-h-timeline-step {
  right: var(--step-offset, 10px);
}
.etheme-h-timeline-wrapper[data-step-position=right] .etheme-h-timeline-content:after {
  right: calc((var(--step-proportion,20px)/ 2) - var(--arrow-size,14px)/ 2 - var(--border-width,0)/ 2 + var(--step-offset,10px));
}
.etheme-h-timeline-wrapper[data-step-position=center] .etheme-h-timeline-step {
  left: calc(50% - var(--step-offset, 10px));
}
.etheme-h-timeline-wrapper[data-step-position=center] .etheme-h-timeline-content:after {
  left: calc( 50% - (var(--step-proportion,20px)/ 2) - var(--arrow-size,14px)/ 2 - var(--border-width,0)/ 2 + var(--step-offset,10px));
}
.etheme-h-timeline-wrapper .swiper-pagination-progressbar {
  background: transparent;
  height: var(--line-h, 2px);
}
.etheme-h-timeline-wrapper .swiper-pagination-progressbar:after {
  content: '';
  height: var(--line-h, 2px);
  width: 100%;
  display: block;
  border-bottom: var(--line-h, 2px) var(--line-style, dashed) var(--line-color, var(--et_border-color));
}
.etheme-h-timeline-wrapper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--line-active-color, var(--et_dark-2-white));
}
.etheme-h-timeline-wrapper .swiper-wrapper .etheme-h-timeline-item {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%;
  position: relative;
  list-style: none;
}