.main-timeline{ font-family: 'Noto Sans', sans-serif; position: relative; } .main-timeline:after{ content: ''; display: block; clear: both; } .main-timeline .timeline{ width: 50%; padding: 0 40px 0 0; margin: 0 50px 0 0; float: left; position: relative; z-index: 1; } .main-timeline .timeline-content{ background-color: #f5f5f5; min-height: 140px; padding: 20px 60px 20px 20px; border-radius: 20px 10px 10px 20px; box-shadow: 0 0 15px -5px #555; display: block; position: relative; } .main-timeline .timeline-content:hover{ text-decoration: none; } .main-timeline .timeline-icon{ color: #fff; background-color: #009432; font-size: 45px; text-align: center; line-height: 80px; height: 80px; width: 80px; border-radius: 10px 10px 0 10px; transform: translateY(-50%); position: absolute; top: 50%; right: -40px; z-index: 1; } .main-timeline .timeline-icon:after{ content: ''; background: linear-gradient(to left top,transparent 49%, #046d27 50%); height: 20px; width: 40px; position: absolute; right: 0; top :100%; } .main-timeline .title{ color: #009432; font-size: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 7px 0; } .main-timeline .description{ color: #555; font-size: 15px; letter-spacing: 1px; text-align: justify; margin: 0; } .main-timeline .timeline:nth-child(even){ padding: 0 0 0 40px; margin: 0 0 0 50px; float: right; } .main-timeline .timeline:nth-child(even) .timeline-content{ padding: 20px 20px 20px 60px; border-radius: 10px 20px 20px 10px; } .main-timeline .timeline:nth-child(even) .timeline-icon{ border-radius: 10px 10px 10px 0; right: auto; left: -40px; } .main-timeline .timeline:nth-child(even) .timeline-icon:after{ transform: rotateY(180deg); right: auto; left: 0; } .main-timeline .timeline:nth-child(4n+2) .timeline-icon{ background-color: #ff4300; } .main-timeline .timeline:nth-child(4n+2) .timeline-icon:after{ background: linear-gradient(to left top,transparent 49%, #d63804 50%); } .main-timeline .timeline:nth-child(4n+2) .title{ color: #ff4300; } .main-timeline .timeline:nth-child(4n+3) .timeline-icon{ background-color: #0652DD; } .main-timeline .timeline:nth-child(4n+3) .timeline-icon:after{ background: linear-gradient(to left top,transparent 49%, #003eaa 50%); } .main-timeline .timeline:nth-child(4n+3) .title{ color: #0652DD; } .main-timeline .timeline:nth-child(4n+4) .timeline-icon{ background-color: #a504db; } .main-timeline .timeline:nth-child(4n+4) .timeline-icon:after{ background: linear-gradient(to left top,transparent 49%, #8205af 50%); } .main-timeline .timeline:nth-child(4n+4) .title{ color: #a504db; } @media screen and (max-width:767px){ .main-timeline .timeline, .main-timeline .timeline:nth-child(even){ width: 100%; padding: 40px 0 0 40px; margin-bottom: 20px; } .main-timeline .timeline-icon, .main-timeline .timeline:nth-child(even) .timeline-icon{ border-radius: 10px 10px 10px 0; transform: translateY(0); top: -40px; left: -40px; right: auto; } .main-timeline .timeline-icon:after{ transform: rotateY(-180deg); right: auto; left: 0; } .main-timeline .timeline-content, .main-timeline .timeline:nth-child(even) .timeline-content{ padding: 60px 20px 20px; } } @media screen and (max-width:567px){ .main-timeline .title{ font-size: 18px; } }