.timeline { position: relative; max-width: 960px; margin: 0 auto; }
.timeline::after { content: ''; position: absolute; width: 2px; background: var(--gray); top: 0; bottom: 0; left: 50%; margin-left: -1px; }
.trabajo { padding: 1rem; position: relative; background: var(--white); width: 50%; }
.trabajo > div { padding-bottom: 0.5rem; }
.trabajo > div > div { padding: 0 1rem; margin-bottom: 0.25rem;  }
.trabajo > div > div.fecha { width: 60%; padding: 0.25rem 1rem; height: 30px; max-height: 30px; margin-top: -15px; outline: 5px solid white; margin-bottom: 0.5rem!important; }
.trabajo:nth-child(odd) { left: 0;}
.trabajo:nth-child(odd) > div { border-radius: 5px; border: 2px solid var(--azul1); }
.trabajo:nth-child(odd) > div > div.fecha { background: var(--azul1); border-radius: 15px 0 0 15px; align-self: end; text-align: right; margin-right: -1rem; }
.trabajo:nth-child(even) { left: 50%;}
.trabajo:nth-child(even) > div { border-radius: 5px; border: 2px solid var(--azul2); }
.trabajo:nth-child(even) > div > div.fecha { background: var(--azul2);  border-radius: 0 15px 15px 0; margin-left: -1rem; }
.alert { display: none; }

@media (max-width: 576px) {
  .timeline::after { display: none; }
  .trabajo { width: 100%; }
  .trabajo > div > div.fecha { margin-left: -2px !important; }
  .trabajo:nth-child(odd) > div > div.fecha { border-radius: 0 15px 15px 0; align-self: start; text-align: left; }
  .trabajo:nth-child(even) { left: 0; }
}

@media (max-width: 410px) {
  .trabajo > div > div.fecha { width: 75%; }
}