@import url("https://e6t7a8v2.stackpathcdn.com/tutorial/css/fontawesome-all.min.css");

.main-timeline:after{
 content: '';
 display: block;
 clear: both;
}

.main-timeline .timeline{
 width: calc(50% + 65px);
 padding: 0 123px 0 0;
 float: left; 
}

.timeline a{
 text-decoration: none;
}

.main-timeline .timeline-content{
 color: #F63959;
 background: linear-gradient(to top,transparent 50%, #F63959 50%);
 text-align: center;
 min-height: 170px;
 padding: 15px;
 border-radius: 40px;
 display: block;
 position: relative;
 z-index: 1;
}

.main-timeline .timeline-content:before{
 content: '';
 background-color: #fff;
 border-radius: 35px;
 position: absolute;
 left: 7px;
 right: 7px;
 top: 7px;
 bottom: 7px;
 z-index: -1;
}

.main-timeline .timeline-content:hover{ text-decoration: none; }

.main-timeline .timeline-year{
 color: #fff;
 background: linear-gradient(transparent 50%, #F63959 50%);
 font-size: 33px;
 line-height: 130px;
 height: 130px;
 width: 130px;
 border-radius: 50%;
 transform: translateY(-50%);
 position: absolute;
 right: -123px;
 top: 50%;
 z-index: 1;
}

.main-timeline .timeline-year:before{
 content: '';
 font-family: 'Roboto', sans-serif;
 background-color: #D81B60;
 border-radius: inherit;
 border: 10px solid #fff;
 position: absolute;
 left: 7px;
 right: 7px;
 top: 7px;
 bottom: 7px;
 z-index: -1;
}

.main-timeline .timeline-icon{ font-size: 35px; }

.main-timeline .title{
 font-family: 'Roboto', sans-serif;
 font-size: 20px;
 font-weight: 500;
 text-transform: capitalize;
 margin: 0 0 8px;
}

.main-timeline .description{
 font-family: 'Roboto', sans-serif;
 color: #8da2b5;
 font-size: 14px;
 font-weight: 400;
 letter-spacing: 0.5px;
 line-height: 18px;
 margin: 0;
}

.main-timeline .timeline:nth-child(even){
 padding: 0 0 0 123px;
 float: right;
}

.main-timeline .timeline:nth-child(even) .timeline-year{
 right: auto;
 left: -123px;
}


.main-timeline .timeline:nth-child(6n+2) .timeline-content{
 color: #8E24AA;
 background: linear-gradient(to top,transparent 50%, #8E24AA 50%);
 border-color: #8E24AA;
}
.main-timeline .timeline:nth-child(6n+2) .timeline-year{
 background: linear-gradient(transparent 50%, #8E24AA 50%);
}
.main-timeline .timeline:nth-child(6n+2) .timeline-year:before{ background: #8E24AA; }


.main-timeline .timeline:nth-child(6n+3) .timeline-content{
 color: #FB8C00;
 background: linear-gradient(to top,transparent 50%, #FB8C00 50%);
 border-color: #FB8C00;
}
.main-timeline .timeline:nth-child(6n+3) .timeline-year{
 background: linear-gradient(transparent 50%, #FB8C00 50%);
}
.main-timeline .timeline:nth-child(6n+3) .timeline-year:before{ background: #FB8C00; }


.main-timeline .timeline:nth-child(6n+4) .timeline-content{
 color: #039BE5;
 background: linear-gradient(to top,transparent 50%, #039BE5 50%);
 border-color: #039BE5;
}
.main-timeline .timeline:nth-child(6n+4) .timeline-year{
 background: linear-gradient(transparent 50%, #039BE5 50%);
}
.main-timeline .timeline:nth-child(6n+4) .timeline-year:before{ background: #039BE5; }




.main-timeline .timeline:nth-child(6n+5) .timeline-content{
 color: #E53935;
 background: linear-gradient(to top,transparent 50%, #E53935 50%);
 border-color: #E53935;
}
.main-timeline .timeline:nth-child(6n+5) .timeline-year{
 background: linear-gradient(transparent 50%, #E53935 50%);
}
.main-timeline .timeline:nth-child(6n+5) .timeline-year:before{ background: #E53935; }


.main-timeline .timeline:nth-child(6n+6) .timeline-content{
 color: #43A047;
 background: linear-gradient(to top,transparent 50%, #43A047 50%);
 border-color: #43A047;
}
.main-timeline .timeline:nth-child(6n+6) .timeline-year{
 background: linear-gradient(transparent 50%, #43A047 50%);
}
.main-timeline .timeline:nth-child(6n+6) .timeline-year:before{ background: #43A047; }


@media screen and (max-width:767px){
 .main-timeline .timeline{
 width: 100%;
 margin: 0 0 30px;
 } 
}

@media screen and (max-width:576px){
 .main-timeline .timeline,
 .main-timeline .timeline:nth-child(even){
 padding: 123px 0 0 0;
 }

 .main-timeline .timeline-year,
 .main-timeline .timeline:nth-child(even) .timeline-year{
 transform: translateY(0) translateX(-50%);
 left: 50%;
 right: auto;
 top: -123px;
 }
}