/* Timeline (Variables) */
/* --------------------------------------------------------------------- *//* Timeline (Wrapper) */
/* --------------------------------------------------------------------- */

.timeline,
.timeline .item,
.timeline .item-inner {
  position: relative;
}


/* Timeline Start-End (Bullets) */
/* --------------------------------------------------------------------- */

.timeline:before,
.timeline:after {
  content: '';
  position: absolute;
  left: 50%;
  width: 16px;
  height: 16px;
  background: #939fab;
  border-radius: 8.0px;
  margin-left: -8.0px;
}
.timeline:before { top: -8.0px; }
.timeline:after { bottom: -8.0px; }

@media (max-width:767px) {
  .timeline:before,
  .timeline:after {
      left: -14.0px;
  }
}


/* Timeline Start-End (Border) */
/* --------------------------------------------------------------------- */

.timeline .startpoint,
.timeline .endpoint {
  margin-left: 50%;
  transform: translateX( -2.0px );
  width: 4px;
  background: #939fab;
}
.timeline .startpoint { height: 32px }
.timeline .endpoint { height: 24.0px; }

@media (max-width:767px) {
  .timeline .startpoint,
  .timeline .endpoint {
    margin-left: 2.0px;
  }
}


/* Timeline Item (Border) */
/* --------------------------------------------------------------------- */

.timeline .item .border {
  position: absolute;
  height: 100%;
  z-index: 0;
  top: 0px;
  border-width: 0 !important;
}
.timeline .item.left .border {
  right: -2.0px;
  width: 4px;
  background: #939fab;
}
.timeline .item.right .border {
  left: -2.0px;
  width: 4px;
  background:  #939fab;
}
@media (max-width:767px) {
  .timeline {
    margin-left: 28.0px;
  }
  .timeline .item.left .border, 
  .timeline .item.right .border {
    right: auto; left: 0px;
  }
}


/* Timeline Circle (Style) */
/* --------------------------------------------------------------------- */

.timeline .circle,
.timeline .circle-icon {
  border: 4px solid #939fab;
  background: #FFFFFF;
}
.timeline .circle svg, .timeline .circle i,
.timeline .circle-icon svg, .timeline .circle-icon i {
  width: 60%; height: 60%; margin: 20%;
}
.timeline .circle-icon svg, .timeline .circle-icon i {
  color: #DD304F;
  fill: #DD304F;
}
.timeline .circle {
  border-radius: 12.0px;
  width: 24px;
  height: 24px;
}
.timeline .circle-icon {
  border-radius: 28.0px;
  width: 56px;
  height: 56px;
}


/* Timeline Circle (Position) */
/* --------------------------------------------------------------------- */

.timeline .circle {
  position: absolute;
  top: 41.0px;
}
.timeline .circle-icon {
  position: absolute;
  top: 26px;
}
.timeline .item.left  .circle { right: -12px; }
.timeline .item.left  .circle-icon {  right: -28px; }
.timeline .item.right .circle { left: -12px; }
.timeline .item.right .circle-icon {  left: -28px; }

@media (max-width:767px) {
  .timeline .circle {
    margin-left: -10.0px;
  }
  .timeline .circle-icon {
    margin-left: -26.0px;
  }
  .timeline .item.left .circle, .timeline .item.left .circle-icon, 
  .timeline .item.right .circle, .timeline .item.right .circle-icon {
    right: auto; left: 0px;
  }
}


/* Timeline (Content) */
/* --------------------------------------------------------------------- */

.timeline .item-inner {
  border-radius: 20px;
  color:  #000000;
  background: #FFFFFF;
  padding: 24.0px 24.0px 24.0px 24.0px;
  cursor: pointer;
  user-select: none;
}
.timeline .item.left {
  padding-right: 48px;
}
.timeline .item.right {
  padding-left: 48px;
}
@media (max-width:767px) {
  .timeline .item.left,
  .timeline .item.right {
    padding-right: 16px;
    padding-left: 48px;
  }
}
.timeline .item-inner > p:last-child {
  margin-bottom: 0;
}

/* Time + Title */
.timeline .item-inner time > span,
.timeline .item-inner time > strong {
  font-size 20px;
  font-weight 600;
}
.timeline .item-inner .time {
  max-width: 93%;
}


/* Timeline Caret (Style) */
/* --------------------------------------------------------------------- */

.timeline .item.left .item-inner:before,
.timeline .item.left .item-inner:after,
.timeline .item.right .item-inner:before {
  content: '';
  display: none;
	width: 0; height: 0; 
  position: absolute;
  margin-top: 9px;
}
.timeline .item.right .item-inner:before,
.timeline .item.left .item-inner:after {
	border-bottom: 10px solid transparent;
	border-top: 10px solid transparent;
	border-right: 10px solid #FFFFFF;
  left: -9px;
}
.timeline .item.left .item-inner:before {
	border-bottom: 10px solid transparent;
	border-top: 10px solid transparent;
	border-left: 10px solid #FFFFFF;
  right: -9px;
}
@media (max-width:767px) {
  .timeline .item.left .item-inner:before { display: none; }
}
@media (min-width:768px) {
  .timeline .item.left .item-inner:after { display: none; }
}


/* Timeline Caret (Position) */
/* --------------------------------------------------------------------- */

.timeline .item .item-inner:before,
.timeline .item .item-inner:after {
  top: 11.0px;
}
.timeline .item .item-inner.with-icon:before,
.timeline .item .item-inner.with-icon:after {
  top: 11.0px;
}


/* Timeline Input + Content (Toggle) */
/* --------------------------------------------------------------------- */

.timeline .toggle + label .area {
  max-height: 0;
  transition: max-height 0.3s ease-out;
  overflow: hidden;
}
.timeline .toggle:checked ~ label .area {
  max-height: 512px;
}
.timeline .area > *:first-child {
  padding-top: 24.0px;
}


/* Timeline (Custom) */
/*--------------------------------------------------------------------------*/



/* Custom Caret Icon */
.timeline .toggle + label > .time {
  width: 100%;
  display: inline-block;
}
.timeline .toggle + label > .time::after {
  display: flex;
  position: absolute;
  right: 17.5px;
  content: "";
  width: 43px;
  height: 43px;
  top: 16px;
  align-items: center;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 43px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="%2397A3AE" d="M33.846,22.154h-8V14.154c0-1.019-.827-1.846-1.846-1.846s-1.846,.827-1.846,1.846v8H14.154c-1.019,0-1.846,.827-1.846,1.846s.827,1.846,1.846,1.846h8v8c0,1.019,.827,1.846,1.846,1.846s1.846-.827,1.846-1.846v-8h8c1.019,0,1.846-.827,1.846-1.846s-.827-1.846-1.846-1.846Z"/><path fill="%2397A3AE" d="M24,0C10.767,0,0,10.767,0,24s10.767,24,24,24,24-10.767,24-24S37.233,0,24,0Zm0,44.308c-11.197,0-20.308-9.111-20.308-20.308S12.803,3.692,24,3.692s20.308,9.111,20.308,20.308-9.111,20.308-20.308,20.308Z"/></svg>');
}
.timeline .toggle:checked + label > .time::after {
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="%2397A3AE" d="M33.846,25.846H14.154c-1.019,0-1.846-.827-1.846-1.846s.827-1.846,1.846-1.846h19.692c1.019,0,1.846,.827,1.846,1.846s-.827,1.846-1.846,1.846Z"/><path fill="%2397A3AE" d="M24,48C10.767,48,0,37.233,0,24S10.767,0,24,0s24,10.767,24,24-10.767,24-24,24Zm0-44.308C12.803,3.692,3.692,12.803,3.692,24s9.111,20.308,20.308,20.308,20.308-9.111,20.308-20.308S35.197,3.692,24,3.692Z"/></svg>'); 
}

.timeline .toggle + label > .time {
  padding-right: 30px;
}