empleo.css 1.5 KB

12345678910111213141516171819202122232425
  1. .timeline { position: relative; max-width: 960px; margin: 0 auto; }
  2. .timeline::after { content: ''; position: absolute; width: 2px; background: var(--gray); top: 0; bottom: 0; left: 50%; margin-left: -1px; }
  3. .trabajo { padding: 1rem; position: relative; background: var(--white); width: 50%; }
  4. .trabajo > div { padding-bottom: 0.5rem; }
  5. .trabajo > div > div { padding: 0 1rem; margin-bottom: 0.25rem; }
  6. .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; }
  7. .trabajo:nth-child(odd) { left: 0;}
  8. .trabajo:nth-child(odd) > div { border-radius: 5px; border: 2px solid var(--azul1); }
  9. .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; }
  10. .trabajo:nth-child(even) { left: 50%;}
  11. .trabajo:nth-child(even) > div { border-radius: 5px; border: 2px solid var(--azul2); }
  12. .trabajo:nth-child(even) > div > div.fecha { background: var(--azul2); border-radius: 0 15px 15px 0; margin-left: -1rem; }
  13. .alert { display: none; }
  14. @media (max-width: 576px) {
  15. .timeline::after { display: none; }
  16. .trabajo { width: 100%; }
  17. .trabajo > div > div.fecha { margin-left: -2px !important; }
  18. .trabajo:nth-child(odd) > div > div.fecha { border-radius: 0 15px 15px 0; align-self: start; text-align: left; }
  19. .trabajo:nth-child(even) { left: 0; }
  20. }
  21. @media (max-width: 410px) {
  22. .trabajo > div > div.fecha { width: 75%; }
  23. }