.main-timeline{ font-family: 'Roboto Condensed', sans-serif; } .main-timeline:after{ content: ''; display: block; clear: both; } .main-timeline .timeline{ width: calc(50% + 75px); margin: 0 0 20px; float: left; } .main-timeline .timeline-content{ color: #00CBBB; text-align: center; min-height: 100px; padding: 10px 170px 10px 0; display: block; position: relative; } .main-timeline .timeline-content:hover{ text-decoration: none; } .main-timeline .timeline-icon{ font-size: 35px; line-height: 35px; transform: translateY(-50%); position: absolute; top: calc(50% - 25px); right: 58px; } .main-timeline .timeline-year{ color: #fff; background-color: #00CBBB; font-size: 47px; font-weight: 700; line-height: 45px; letter-spacing: -2px; width: 150px; transform: translateY(-50%); position: absolute; top: calc(50% + 20px); right: 0; clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%, 10% 50%); } .main-timeline .title{ font-size: 22px; font-weight: 600; text-transform: uppercase; margin: 0 0 10px; } .main-timeline .description{ color: #555; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 400; letter-spacing: 0.5px; line-height: 18px; margin: 0; } .main-timeline .timeline:nth-child(even){ float: right; } .main-timeline .timeline:nth-child(even) .timeline-content{ padding: 10px 0 10px 170px; } .main-timeline .timeline:nth-child(even) .timeline-icon{ right: auto; left: 58px; } .main-timeline .timeline:nth-child(even) .timeline-year{ right: auto; left: 0; } .main-timeline .timeline:nth-child(4n+2) .timeline-content{ color: #FE7803; } .main-timeline .timeline:nth-child(4n+2) .timeline-year{ background-color: #FE7803; } .main-timeline .timeline:nth-child(4n+3) .timeline-content{ color: #EC3739; } .main-timeline .timeline:nth-child(4n+3) .timeline-year{ background-color: #EC3739; } .main-timeline .timeline:nth-child(4n+4) .timeline-content{ color: #A42F69; } .main-timeline .timeline:nth-child(4n+4) .timeline-year{ background-color: #A42F69; } @media screen and (max-width:767px){ .main-timeline .timeline{ width: 100%; margin: 0 0 30px; } } @media screen and (max-width:576px){ .main-timeline .timeline-content, .main-timeline .timeline:nth-child(even) .timeline-content{ padding: 110px 10px 10px; } .main-timeline .timeline-icon, .main-timeline .timeline:nth-child(even) .timeline-icon{ transform: translateY(0) translateX(-50%); left: 50%; right: auto; top: 0; } .main-timeline .timeline-year, .main-timeline .timeline:nth-child(even) .timeline-year{ transform: translateY(0) translateX(-50%); left: 50%; right: auto; top: 41px; } }