:root{ --text: #fff; --bg-color1: #F24137; --bg-color2: #87C033; --bg-color3: #F8982A; --bg-color4: #61C2ED; } .main-timeline{ font-family: 'Mukta', sans-serif; position: relative; margin: 5px 0; padding: 20px 0; } .main-timeline:after{ content: ''; display: block; clear: both; } .main-timeline .timeline{ background-color: var(--bg-color1); text-align: center; width: 50.1%; margin: 0 0 20px; float: left; position: relative; } .main-timeline .timeline:before{ content: ''; background-color: var(--text); height: 115%; width: 120px; box-shadow: 0 0 10px #555; transform: translateY(-50%); position: absolute; left: 0; top: 50%; } .main-timeline .timeline-content{ color: var(--text); display: block; } .main-timeline .timeline-content:hover{ color: var(--text); text-decoration: none; } .main-timeline .timeline-icon{ color: var(--text); background-color: var(--bg-color1); font-size: 70px; line-height: 110px; height: 100px; width: 100px; box-shadow: 3px 3px 5px #999; transform: translateY(-50%); position: absolute; top: 50%; left: 10px; } .main-timeline .inner-content{ padding: 10px 10px 10px 130px; } .main-timeline .title{ font-size: 25px; font-weight: 700; text-transform: uppercase; margin: 0 0 3px; display: block; } .main-timeline .description{ font-size: 15px; letter-spacing: 1px; margin: 0; } .main-timeline .timeline:nth-child(even){ float: right; } .main-timeline .timeline:nth-child(even):before{ left: auto; right: 0; } .main-timeline .timeline:nth-child(even) .timeline-icon{ left: auto; right: 10px; } .main-timeline .timeline:nth-child(even) .inner-content{ padding: 10px 130px 10px 10px; } .main-timeline .timeline:nth-child(4n+2) .timeline-icon{ background-color: var(--bg-color2); } .main-timeline .timeline:nth-child(4n+2){ background-color: var(--bg-color2); } .main-timeline .timeline:nth-child(4n+3) .timeline-icon{ background-color: var(--bg-color3); } .main-timeline .timeline:nth-child(4n+3){ background-color: var(--bg-color3); } .main-timeline .timeline:nth-child(4n+4) .timeline-icon{ background-color: var(--bg-color4); } .main-timeline .timeline:nth-child(4n+4){ background-color: var(--bg-color4); } @media only screen and (max-width:767px){ .main-timeline .timeline{ width: 100%; margin: 0 0 40px; float: right; } .main-timeline .timeline:before{ width: 65px; } .main-timeline .timeline-icon{ font-size: 30px; line-height: 55px; height: 50px; width: 50px; left: 7px; } .main-timeline .timeline:nth-child(even) .timeline-icon{ font-size: 30px; left: auto; right: 7px; } .main-timeline .inner-content{ padding: 10px 10px 10px 90px; } .main-timeline .timeline:nth-child(even) .inner-content{ padding: 10px 90px 10px 10px; } .main-timeline .title{ font-size: 20px; } }