.main-timeline{ position: relative; }
.main-timeline .timeline{
margin-bottom: 5px;
overflow: hidden;
position: relative;
}
.main-timeline .timeline-content{
display: block;
width: 30%;
padding-left: 40px;
}
.main-timeline .timeline-content:hover{ text-decoration: none; }
.main-timeline .title{
font-size: 22px;
font-weight: 600;
color: #fac34e;
margin: 0 0 5px 0;
}
.main-timeline .timeline-icon{
display: block;
width: 100px;
height: 100px;
line-height: 100px;
background: #ffc750;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: #fff;
transform: translate(-50%, -50%);
}
.main-timeline .timeline-icon:before,
.main-timeline .timeline-icon:after{
content: "";
width: 100%;
height: 100%;
background: linear-gradient(45deg,transparent 49%,#fed67f 50%);
position: absolute;
top: 0;
left: -100%;
z-index: -1;
}
.main-timeline .timeline-icon:after{
background: linear-gradient(-135deg,transparent 49%,#fbb321 50%);
left: 100%;
}
.main-timeline .description{
font-size: 15px;
color: #000;
letter-spacing: 1px;
margin: 0;
}
.main-timeline .timeline-year{
font-size: 30px;
font-weight: 600;
color: #fac34e;
position: absolute;
top: 50%;
left: -12px;
transform: translateY(-50%) rotate(-90deg);
}
.main-timeline .timeline:nth-child(2n) .timeline-content{
float: right;
padding-left: 0;
padding-right: 40px;
}
.main-timeline .timeline:nth-child(2n) .timeline-year{
left: auto;
right: -12px;
}
.main-timeline .timeline:nth-child(2n) .timeline-icon{ background: #fe912a; }
.main-timeline .timeline:nth-child(2n) .timeline-icon:before{ background: linear-gradient(45deg,transparent 49%,#ffa757 50%); }
.main-timeline .timeline:nth-child(2n) .timeline-icon:after{ background: linear-gradient(-135deg,transparent 49%,#fa7902 50%); }
.main-timeline .timeline:nth-child(2n) .title,
.main-timeline .timeline:nth-child(2n) .timeline-year{ color: #fa7902; }
.main-timeline .timeline:nth-child(3n) .timeline-icon{ background: #e34856; }
.main-timeline .timeline:nth-child(3n) .timeline-icon:before{ background: linear-gradient(45deg,transparent 49%,#f06e7a 50%); }
.main-timeline .timeline:nth-child(3n) .timeline-icon:after{ background: linear-gradient(-135deg,transparent 49%,#cb2332 50%); }
.main-timeline .timeline:nth-child(3n) .title,
.main-timeline .timeline:nth-child(3n) .timeline-year{ color: #cb2332; }
.main-timeline .timeline:nth-child(4n) .timeline-icon{ background: #8b103e; }
.main-timeline .timeline:nth-child(4n) .timeline-icon:before{ background: linear-gradient(45deg,transparent 49%,#a7325c 50%); }
.main-timeline .timeline:nth-child(4n) .timeline-icon:after{ background: linear-gradient(-135deg,transparent 49%,#79022c 50%); }
.main-timeline .timeline:nth-child(4n) .title,
.main-timeline .timeline:nth-child(4n) .timeline-year{ color: #79022c; }
@media only screen and (max-width: 990px){
.main-timeline .timeline-icon{
width: 80px;
height: 80px;
line-height: 80px;
}
}
@media only screen and (max-width: 767px){
.main-timeline .timeline{
padding-top: 120px;
margin-bottom: 30px;
}
.main-timeline .timeline:last-child{ margin-bottom: 0; }
.main-timeline .timeline-content,
.main-timeline .timeline:nth-child(even) .timeline-content{
width: 100%;
float: none;
text-align: center;
padding: 0;
}
.main-timeline .timeline-icon{
top: 35px;
transform: translate(-50%, 0);
}
.main-timeline .timeline-year{
top: -4px;
left: 50%;
transform: translate(-50%, 0) rotate(0);
}
.main-timeline .timeline:nth-child(even) .timeline-year{
right: auto;
left: 50%;
}
}
