.timeline-outer {
     padding: 60px 60px 100px 60px;
     /* overflow: hidden; */
 }

 .timeline {
     position: relative;
     max-width: 1100px;
     margin: 0px auto;
     padding: 0px;
     /* overflow: hidden; */
 }

 ul.timeline-top-list {

     position: absolute;
     top: 19%;
     left: 7%;
     width: 70%;
     display: flex;
     justify-content: space-between;
     margin: 0;
     padding: 0 0px;
     list-style: none;
 }

 ul.timeline-top-list li {
     position: relative;
     width: 20%;
     text-align: center;
 }

 ul.timeline-top-list li .timeline-year-dot {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 12px;
     height: 12px;
     background-color: #333;
     border-radius: 50%;
     transform: translateY(-50%) translateX(-50%);
     z-index: 1;
     cursor: pointer;
 }

 ul.timeline-top-list li.active .timeline-year-dot::before {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     width: 12px;
     height: 12px;
     background-color: #FFC7C7;
     border-radius: 50%;
     transform: translateY(-50%) translateX(-50%) scale(2);
 }

 ul.timeline-top-list li.active .timeline-year-dot::after {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     width: 12px;
     height: 12px;
     background-color: #e60000;
     border-radius: 50%;
     transform: translateY(-50%) translateX(-50%);
 }

 ul.timeline-top-list li.active .timeline-year {
     color: #e60000;
 }

 ul.timeline-top-list li .timeline-tooltip {
     position: absolute;
     bottom: 30px;
     left: 0%;
     width: 155px;
     transform: translateX(-50%);
     background-color: #E81010;
     color: #fff;
     font-size: 12px;
     line-height: 16px;
     padding: 10px 10px;
     border-radius: 4px;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease, visibility 0.3s ease;
     z-index: 99;

 }

 ul.timeline-top-list li .timeline-tooltip::after {
     content: '';
     position: absolute;
     bottom: -7px;
     left: 50%;
     transform: translateX(-50%);
     width: 0;
     height: 0;
     border-left: 8px solid transparent;
     border-right: 8px solid transparent;
     border-top: 8px solid #e60000;
 }

 ul.timeline-top-list li.active .timeline-tooltip {
     opacity: 1;
     visibility: visible;
 }

 ul.timeline-top-list li.active .timeline-year-dot {
     background-color: #E81010;
 }


 ul.timeline-top-list li span.timeline-year {
     position: absolute;
     bottom: -30px;
     left: 0px;
     transform: translateX(-50%);
     font-size: 12px;
     font-weight: bold;
     color: #333;
 }

 ul.timeline-top-list.second-row { 
     top: 51.3%;
 }

 .timeline-year-end {
     position: absolute;
     top: 81%;
     left: 92.5%;
     width: 70%;
     margin: 0;
     padding: 0 0px;
 }

 .timeline-year-end .timeline-year-dot {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 16px;
     height: 16px;
     background-color: #e60000;
     border-radius: 50%;
     transform: translateY(-50%) translateX(-50%);
     z-index: 1;
     cursor: pointer;
 }

 .timeline-year-end span.timeline-year {
     position: absolute;
     bottom: -30px;
     left: 0px;
     transform: translateX(-50%);
     font-size: 12px;
     font-weight: bold;
     color: #e60000;
 }

 .timeline-year-end .timeline-tooltip {
     position: absolute;
     top: 40px;
     left: 0%;
     width: 155px;
     transform: translateX(-50%);
     color: #000;
     font-size: 12px;
     line-height: 18px;
     text-align: center;
     font-weight: 600;
 }



 @media screen and (min-width: 1200px) {


     .timeline-outer {
         padding: 0px;
         overflow: hidden;
     }

     ul.timeline-top-list li span.timeline-year {
         font-size: 18px;
         bottom: -47px;
     }

     .timeline-year-end span.timeline-year {
         font-size: 18px;
         bottom: -37px;
     }

     .timeline-year-end .timeline-tooltip {
         width: 200px;
         font-size: 14px;
     }

     ul.timeline-top-list li .timeline-tooltip {
         padding: 20px 20px;
              font-size: 14px;
     line-height: 18px;
     width: 200px;

     }

 }