.presidents-timeline{ padding-left: 50px; }
.presidents-timeline .timeline{ position: relative; padding-left: 40px; }
.presidents-timeline .timeline:before{ content: ""; position: absolute; left: 11px; top: 0; width: 1px; height: 100%; border-left: 1px dashed var(--grey-555); }

.presidents-timeline .timeline .item{ display: flex; margin-bottom: 15px; position: relative; }

.presidents-timeline .timeline .item .year{ position: absolute; z-index: 20; width: 80px; font-family: var(--poppins); }
.presidents-timeline .timeline .item .year:before{ content: ""; position: absolute; width: 13px; height: 13px; background: var(--grey-888); border-radius: 100%; top: 2px; right: 12px; }
.presidents-timeline .timeline .item .year.first-year{ top: 0; left: -90px; }
.presidents-timeline .timeline .item .year.last-year{ bottom: 0; left: -90px; }

.presidents-timeline .timeline .item .box{ display: flex; width: 100%; padding: 20px; background: rgba(0,0,0,.5); box-shadow: 0 4px 30px rgba(0,0,0,.1); backdrop-filter: blur(10px); border-radius: 15px; }
.presidents-timeline .timeline .item .box .photo{ width: 100px; height: 100px; min-width: 100px; margin-right: 20px; overflow: hidden; border-radius: 15px; }
.presidents-timeline .timeline .item .box .photo img{ width: 100%; height: 100%; object-fit: cover; }
.presidents-timeline .timeline .item .box .meta{ position: relative; width: auto; display: flex; flex-direction: column; justify-content: flex-start; line-height: 1.3; }
.presidents-timeline .timeline .item .box .meta .name{ font-size: 22px; font-weight: 600; color: var(--yellow); margin-bottom: 4px; text-decoration: none; font-family: var(--poppins); display: block; line-height: 1.3; transition: var(--transition); }
.presidents-timeline .timeline .item .box .meta .nickname{ color: var(--white-bbb); font-size: 14px; height: 30px; }
.presidents-timeline .timeline .item .box .meta .age{ margin-bottom: 6px; color: var(--white-ccc); font-size: 14px; }
.presidents-timeline .timeline .item .box .meta .country{ margin-bottom: 5px; color: var(--white-ccc); font-size: 14px; }
.presidents-timeline .timeline .item .box .meta .position{ margin-bottom: 5px; color: var(--white); font-size: 14px; display: inline-flex; align-items: center; margin-top: 10px; }

.presidents-timeline .timeline .item .trophies-list{ width: 100%; min-width: 100%; margin-top: 10px; position: relative; padding-left: 35px; display: flex; align-items: center; }
.presidents-timeline .timeline .item .trophies-list .trophy-icon{ position: absolute; top: 0; left: 0; font-size: 23px; color: var(--yellow); }
.presidents-timeline .timeline .item .trophies-list .trophy-icon .tooltip{ left: 1px; }
.presidents-timeline .timeline .item .trophies-list ul{ display: flex; flex-wrap: wrap; gap: 10px 25px; border-left: 2px solid var(--grey-222); padding-left: 16px; }
.presidents-timeline .timeline .item .trophies-list ul li{ display: flex; align-items: center; font-size: 13px; line-height: 1.4; }
.presidents-timeline .timeline .item .trophies-list ul li .value{ width: 28px; height: 28px; min-width: 28px; min-height: 28px; display: flex ; align-items: center; justify-content: center; background: var(--grey-222); color: var(--white); border-radius: 100%; margin-right: 10px; font-size: 14px; position: relative; font-family: var(--poppins); font-weight: 600; }
.presidents-timeline .timeline .item .trophies-list ul .highlight{ color: var(--yellow); font-weight: 600; } 
.presidents-timeline .timeline .item .trophies-list ul .highlight .value{ color: var(--yellow); }

@media screen and (max-width: 1279px) {


}

@media screen and (max-width: 1023px) {

    .presidents-timeline .timeline .item .box{ flex-direction: column; }
    .presidents-timeline .timeline .item .box .photo{ margin-bottom: 15px; }
    .presidents-timeline .timeline .item .trophies-list{ padding-left: 0; margin-top: 20px; }
    .presidents-timeline .timeline .item .trophies-list ul{ padding-left: 0; border-left: none; }

    .presidents-timeline{ padding-left: 40px; }
    .presidents-timeline .timeline{ padding-left: 30px; }
    .presidents-timeline .timeline .item .year{ font-size: 14px; }
    .presidents-timeline .timeline .item .year.first-year{ left: -80px; padding-left: 10px; }
    .presidents-timeline .timeline .item .year.last-year{ left: -80px; padding-left: 10px; }

}

@media screen and (max-width: 767px) {

}