body { background: #e6e6e6; font-family: "Roboto", sans-serif; font-weight: 400;
}
/*===== Vertical Timeline =====*/
#conference-timeline { position: relative; max-width: 920px; width: 100%; margin: 0 auto;margin-top:2rem;
}
#conference-timeline .timeline-end { display: table; font-family: "Roboto", sans-serif; font-size: 18px; font-weight: 900; text-transform: uppercase; background: #007bff; padding: 15px 23px; color: #fff; max-width: 15%; width: 100%; text-align: center; margin: 0 auto;
}
#conference-timeline .timeline-start{ display: table; font-family: "Roboto", sans-serif; font-size: 18px; font-weight: 900; text-transform: uppercase; background: #007bff; padding: 15px 23px; color: #fff; max-width: 55%; width: 100%; text-align: center; margin: 0 auto;
}
#conference-timeline .conference-center-line { position: absolute; width: 3px; height: 95%; top: 52; left: 50%; margin-left: -2px; background: #007bff; z-index: 0;
}
#conference-timeline .conference-timeline-content { padding-top: 67px; padding-bottom: 67px;
}
.timeline-article { width: 100%; height: 100%; position: relative; overflow: hidden; margin: 20px 0;
}
.timeline-article .content-left-container,
.timeline-article .content-right-container { max-width: 44%; width: 100%;
}
.timeline-article .timeline-author { display: block; font-weight: 400; font-size: 14px; line-height: 24px; color: #242424; text-align: right;
}
.timeline-article .content-left,
.timeline-article .content-right { position: relative; width: auto; border: 1px solid #ddd; background-color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.03); padding: 27px 25px;
}
.timeline-article p { margin: 0 0 0 60px; padding: 0; font-weight: 400; color: #242424; font-size: 16px; line-height: 24px; position: relative; margin-bottom: 20px;
}
.timeline-article p span.article-number { position: absolute; font-weight: 300; font-size: 44px; top: 10px; left: -60px; color: #008f4c;
}
.timeline-article .content-left-container { float: left;
}
.timeline-article .content-right-container { float: right;
}
.timeline-article .content-left:before,
.timeline-article .content-right:before{ position: absolute; top: 20px; font-size: 23px; font-family: "FontAwesome"; color: #fff;
}
.timeline-article .content-left:before { content: "\f0da"; right: -8px;
}
.timeline-article .content-right:before { content: "\f0d9"; left: -8px;
}
.timeline-article .meta-date { position: absolute; top: 0; left: 50%; width: 72px; height: 72px; color: #fff; border-radius: 100%; background: #007bff;
}
.timeline-article .meta-date .date,
.timeline-article .meta-date .month { display: block; text-align: center; font-weight: 900;
}
.timeline-article .meta-date .date { font-size: 30px; line-height: 40px;
}
.timeline-article .meta-date .month { font-size: 14px; line-height: 10px;
}
/*===== // Vertical Timeline =====*/
/*===== Resonsive Vertical Timeline =====*/
@media only screen and (max-width: 830px) { #conference-timeline .timeline-start, #conference-timeline .timeline-end { margin: 0; } #conference-timeline .conference-center-line { margin-left: 0; left: 50px; } .timeline-article .meta-date { margin-left: 0; left: 20px; } .timeline-article .content-left-container, .timeline-article .content-right-container { max-width: 100%; width: auto; float: none; margin-left: 110px; min-height: 53px; } .timeline-article .content-left-container { margin-bottom: 20px; } .timeline-article .content-left, .timeline-article .content-right { padding: 10px 25px; min-height: 65px; } .timeline-article .content-left:before { content: "\f0d9"; right: auto; left: -8px; } .timeline-article .content-right:before { display: none; }
}
.article-p{ font-size: 14px; color: #a8a8a8;text-align: justify;
}
.month-to{ display: block; text-align: center; font-weight: 600;font-size: 10px; }
@media only screen and (max-width: 400px) { .timeline-article p { margin: 0; } .timeline-article p span.article-number { display: none; }
} .article-red{color: #e6210b !important;}
.meta-date-red {background: #e6210b !important;}
/*===== // Resonsive Vertical Timeline =====*/
#node-34644{background-color: #e6e6e6 !important;}
.article-check{position: absolute; font-weight: 300; font-size: 35px; top: 10px; left: -60px; color: #e6210b;
}
.meta-date {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: red;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.conference-center-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;            /* grosor de la línea */
  background: green;
  top: 0;
  bottom: 0;
}