.main-timeline{ font-family: 'Heebo', sans-serif; } .main-timeline:after{ content: ''; display: block; clear: both; } .main-timeline .timeline{ width: calc(50% + 23px); padding: 0 45px 0 0; margin: 0 5px 0 0; float: left; } .main-timeline .timeline-content{ color: #fff; background: #026cd6; text-align: left; min-height: 140px; padding: 20px 65px 20px 20px; border: 7px solid #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); border-radius: 20px; display: block; position: relative; } .main-timeline .timeline-content:hover{ text-decoration: none; } .main-timeline .timeline-icon{ color: #026cd6; background: #fff; font-size: 35px; text-align: center; line-height: 80px; height: 80px; width: 90px; border-radius: 40px 30px 80px/40px 20px 50px; box-shadow: 0 0 10px rgba(0,0,0,0.2); transform: translateY(-50%); position: absolute; right: -45px; top: 50%; z-index: 1; } .main-timeline .title{ font-size: 22px; font-weight: 500; text-transform: capitalize; letter-spacing: 0.5px; margin: 0 0 5px; } .main-timeline .description{ color: rgba(255,255,255,0.85); font-size: 14px; font-weight: 300; line-height: 20px; letter-spacing: 1px; margin: 0; } .main-timeline .timeline:nth-child(even){ width: calc(50% + 23px); padding: 0 0 0 45px; margin: 0 0 0 5px; float: right; } .main-timeline .timeline:nth-child(even) .timeline-content{ padding: 20px 20px 20px 65px; } .main-timeline .timeline:nth-child(even) .timeline-icon{ right: auto; left: -45px; } .main-timeline .timeline:nth-child(4n+2) .timeline-content{ background: #ef590e; } .main-timeline .timeline:nth-child(4n+2) .timeline-icon{ color: #ef590e; } .main-timeline .timeline:nth-child(4n+3) .timeline-content{ background: #9231c6; } .main-timeline .timeline:nth-child(4n+3) .timeline-icon{ color: #9231c6; } .main-timeline .timeline:nth-child(4n+4) .timeline-content{ background: #31c45a; } .main-timeline .timeline:nth-child(4n+4) .timeline-icon{ color: #31c45a; } @media screen and (max-width:576px){ .main-timeline .timeline, .main-timeline .timeline:nth-child(even){ width: 100%; padding: 0 45px 0 0; margin: 0 0 30px; } .main-timeline .timeline:nth-child(even){ padding: 0 0 0 45px; } } @media screen and (max-width:479px){ .main-timeline .timeline{ padding: 35px 20px 0 0; } .main-timeline .timeline:nth-child(even){ padding: 35px 0 0 20px; } .main-timeline .timeline-content, .main-timeline .timeline:nth-child(even) .timeline-content{ padding: 55px 15px 20px; } .main-timeline .timeline-icon{ transform: translateY(0); top: -40px; right: -25px; } .main-timeline .timeline:nth-child(even) .timeline-icon{ left: -25px; } }