.style-new {
font-family: 'Roboto', sans-serif;
max-width: 100%;
width: 100%;
position: relative;
}
.style-new:after {
content: '';
display: block;
clear: both;
}
.style-new:before {
content: '';
height: 100%;
width: 2px;
border: 2px solid #017296;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
position: absolute;
left: 50%;
top: 30px;
}
.style-new .timeline {
width: 50%;
padding: 100px 70px 0 25px;
margin: 0 50px 0 0;
float: left;
position: relative; }
.style-new .timeline-content {
background-color: #ECF3FB;
padding: 25px 25px 45px 25px;
display: block;
position: relative; }
.style-new .timeline-content:hover {
text-decoration: none;
}
.style-new .timeline-content:after {
content: '';
height: 18px;
width: 15px;
position: absolute;
right: -15px;
top: -2px;
-webkit-clip-path: polygon(100% 0, 0 0, 0 100%);
clip-path: polygon(100% 0, 0 0, 0 100%);
}
.style-new .timeline-year {
color: #004A81;
background-color: #FFFFFF;
font-size: 32px;
font-weight: 900;
text-align: center;
line-height: 98px;
height: 100px;
width: 100px;
border: 3px solid #004A81;
position: absolute;
right: -120px;
top: -85px;
}
.style-new .timeline-icon {
text-align:center;
display:block; }
.style-new .timeline-icon img {  height: auto;
object-fit: contain;
margin-left:auto;
margin-right:auto;
padding-bottom:10px;
}  .style-new .title {
color: #017296;
font-size: 20px;
font-weight: 900;
letter-spacing: 1px;
margin: 0 0 7px 0;
}
.style-new .description {
color: #017296;
font-size: 15px;
margin: 0 0 5px;
display:block;
}
.style-new .description * {
color: inherit;
font-family: inherit;
}
.style-new .timeline:nth-child(even) {
padding: 100px 25px 0 70px;
margin: 0 0 0 50px;
float: right;
}
.style-new .timeline:nth-child(even) .timeline-content {
padding: 15px 40px 15px 15px;
}
.style-new .timeline:nth-child(even) .timeline-content:after {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
right: auto;
left: -15px; }
.style-new .timeline:nth-child(even) .timeline-year {
right: auto;
left: -120px;
}
.style-new .timeline:nth-child(even) .timeline-year:after {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(200deg);
transform: translateX(-50%) translateY(-50%) rotate(200deg);
}
.style-new .timeline:nth-child(even) .timeline-icon {
left: auto;
right: -25px;
}
.timeline:nth-child(4n+2) .timeline-year:after {
border-left-color: transparent;
}
.timeline:nth-child(4n+3) .timeline-year:after {
border-left-color: transparent;
}
.timeline:nth-child(4n+4) .timeline-year:after {
border-left-color: transparent;
}
@media screen and (max-width: 767px) {
#twp-2971.style-new .timeline,#twp-2971.style-new .timeline:nth-child(even),#twp-2971.style-new .timeline:nth-child(odd) {
width: 100%;
padding: 20px 20px 20px 20px;
margin: 75px 0 0 0;
right: 0;
left: 0;
}#twp-2971.style-new .timeline-content:after {display: none;}
#twp-2971.style-new .timeline-year, #twp-2971.style-new .timeline:nth-child(even) .timeline-year {
position: absolute;
margin: auto; z-index: 5;
right: 0;
left: 0;
color: #004A81;
background-color: #FFFFFF;
font-size: 28px;
font-weight: 700;
text-align: center;
line-height: 70px;
height: 80px;
width: 80px;
border: 3px solid #004A81;
}
#twp-2971.style-new .timeline-year, #twp-2971.style-new .timeline:nth-child(even) .timeline-year {
position: absolute;
margin: auto;
z-index: 5;
}
#twp-2971.style-new .timeline:nth-child(even) .timeline-year:after {
display: none;
}
#twp-2971.style-new .timeline:nth-child(even) .timeline-icon {
display: block;
}
#twp-2971.timeline:nth-child(4n+2) .timeline-year:after {
display: none;
}
#twp-2971.timeline:nth-child(4n+3) .timeline-year:after {
display: none;
}
#twp-2971.timeline:nth-child(4n+4) .timeline-year:after {
display: none;
} }
@media screen and (max-width: 567px) {
.style-new .title {
font-size: 18px;
}
}