.cd-container { width: 90%; max-width: 1170px; margin: 0 auto; } .cd-container::after { content: ''; display: table; clear: both; } #cd-timeline { position: relative; padding: 2em 0; margin-top: 2em; margin-bottom: 2em; } #cd-timeline::before { content: ''; position: absolute; top: 0; left: 18px; height: 100%; width: 4px; background: #d7e4ed; } .cd-timeline-block { position: relative; margin: 2em 0; } .cd-timeline-block:after { content: ""; display: table; clear: both; } .cd-timeline-block:first-child { margin-top: 0; } .cd-timeline-block:last-child { margin-bottom: 0; } .cd-timeline-img { position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(0,0,0,.09); } .cd-timeline-img img { display: block; width: 40px; height: 40px; position: relative; } .cd-timeline-content { position: relative; margin-left: 60px; border-radius: 0.25em; padding: 1em; background-color: #01579B; color: #fff; } .cd-timeline-content:after { content: ""; display: table; clear: both; } .cd-timeline-content .cd-date { display: inline-block; } .cd-timeline-content p { margin: 1em 0; line-height: 1.6; } .cd-timeline-content .cd-date { float: left; padding: .8em 0; } .cd-timeline-content::before { content: ''; position: absolute; top: 16px; right: 100%; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #01579B; } @media (min-width: 1200px) { #cd-timeline { margin-top: 3em; margin-bottom: 3em; } #cd-timeline::before { left: 50%; margin-left: -2px; } .cd-timeline-block { margin: 4em 0; } .cd-timeline-block:first-child { margin-top: 0; } .cd-timeline-block:last-child { margin-bottom: 0; } .cd-timeline-img { width: 60px; height: 60px; left: 50%; margin-left: -30px; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; } .cd-timeline-img img{ width: 60px; height: 60px; } .cd-timeline-content .cd-date { color: #01579B; } .cd-timeline-content { margin-left: 0; width: 45%; } .cd-timeline-content::before { top: 24px; left: 100%; border-color: transparent; border-left-color: #01579B; } .cd-timeline-content .cd-date { position: absolute; width: 100%; left: 122%; top: 6px; font-size: 16px; font-size: 1rem; } .cd-timeline-block:nth-child(even) .cd-timeline-content { float: right; } .cd-timeline-block:nth-child(even) .cd-timeline-content::before { top: 24px; left: auto; right: 100%; border-color: transparent; border-right-color: #01579B; } .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date { left: auto; right: 122%; text-align: right; } }