.main-timeline{ font-family: 'Poppins', sans-serif; }
.main-timeline:after{
content: '';
display: block;
clear: both;
}
.main-timeline .timeline{
width: calc(50% + 65px);
margin: 0 0 15px;
float: left;
}
.main-timeline .timeline-content{
padding: 0 150px 0 60px;
display: block;
position: relative;
}
.main-timeline .timeline-content:hover{ text-decoration: none; }
.main-timeline .timeline-year{
color: #f93a5f;
font-size: 40px;
font-weight: 700;
line-height: 40px;
transform: translateY(-50%) rotate(90deg);
position: absolute;
top: 50%;
left: -30px;
}
.main-timeline .timeline-icon{
color: #f93a5f;
background:linear-gradient(to right,#fe566c 49%,#f93a5f 50%);
font-size: 50px;
text-align: center;
line-height: 120px;
width: 120px;
height: 120px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
transform: translateY(-50%);
position: absolute;
top: 50%;
right: 5px;
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.main-timeline .timeline-icon:before{
content: "";
background: #fff;
width: 80%;
height: 80%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.main-timeline .title{
color: #eb3853;
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
margin: 0 0 7px;
}
.main-timeline .title:after{
content: "";
background: #eb3853;
width: 100px;
height: 2px;
margin: 5px 0 0;
display: block;
clear: both;
}
.main-timeline .description{
color: #777;
font-size: 15px;
letter-spacing: 1px;
margin: 0 0 5px;
}
.main-timeline .timeline:nth-child(even){ float: right; }
.main-timeline .timeline:nth-child(even) .timeline-content{ padding: 0 60px 0 150px; }
.main-timeline .timeline:nth-child(even) .timeline-icon{
right: auto;
left: 5px;
}
.main-timeline .timeline:nth-child(even) .timeline-year{
left: auto;
right: -30px;
}
.main-timeline .timeline:nth-child(4n+2) .timeline-icon{
background:linear-gradient(to right,#fc8d05 49%,#fc7100 50%);
}
.main-timeline .timeline:nth-child(4n+2) .timeline-icon,
.main-timeline .timeline:nth-child(4n+2) .timeline-year,
.main-timeline .timeline:nth-child(4n+2) .title{
color: #fc7100;
}
.main-timeline .timeline:nth-child(4n+2) .title:after{ background-color: #fc7100; }
.main-timeline .timeline:nth-child(4n+3) .timeline-icon{
background:linear-gradient(to right,#c058c4 49%,#b645bd 50%);
}
.main-timeline .timeline:nth-child(4n+3) .timeline-icon,
.main-timeline .timeline:nth-child(4n+3) .timeline-year,
.main-timeline .timeline:nth-child(4n+3) .title{
color: #b645bd;
}
.main-timeline .timeline:nth-child(4n+3) .title:after{ background-color: #b645bd; }
.main-timeline .timeline:nth-child(4n+4) .timeline-icon{
background:linear-gradient(to right,#36a2c9 49%,#147aba 50%);
}
.main-timeline .timeline:nth-child(4n+4) .timeline-icon,
.main-timeline .timeline:nth-child(4n+4) .timeline-year,
.main-timeline .timeline:nth-child(4n+4) .title{
color: #147aba;
}
.main-timeline .timeline:nth-child(4n+4) .title:after{ background-color: #147aba; }
@media screen and (max-width:767px){
.main-timeline .timeline,
.main-timeline .timeline:nth-child(even){
width: 100%;
margin: 0 0 40px;
}
}
@media screen and (max-width:576px){
.main-timeline .timeline-content,
.main-timeline .timeline:nth-child(even) .timeline-content{
text-align: center;
padding: 140px 0 60px;
}
.main-timeline .timeline-icon,
.main-timeline .timeline:nth-child(even) .timeline-icon{
transform: translateX(-50%);
top: 10px;
left: 50%;
right: auto;
}
.main-timeline .timeline-year,
.main-timeline .timeline:nth-child(even) .timeline-year{
transform: translateX(-50%) translateY(0%) rotate(0deg);
left: 50%;
right: auto;
top: auto;
bottom: 10px;
}
.main-timeline .title:after{ margin: 5px auto 0; }
}
