/********************************************************************************
*                             BEM Methodology                                   *
*  [$] Block = block                                                            *
*  [$] Element = block__element                                                 *
*  [$] Modifier = block__element--modifier                                      *
*                                                                               *
*                             Timeline Component                                *
*                                                                               *
*                                                                               *
*                                                                               *
*                                                                               *
*                                                                               *
********************************************************************************/


/* [#] xs screen */
@media (max-width: 767px) { 
    .timeline a.prev .glyphicon-chevron-right {
        position: absolute;
        top: 7px;
        left: -23px;
        color: #FF4000;
        cursor: pointer;
    }
    .timeline a.prev .fa-solid .fa-chevron-right {
        position: absolute;
        top: 7px;
        left: -23px;
        color: #FF4000;
        cursor: pointer;
    }

    .timeline a.prev.inactive .glyphicon-chevron-right {
        position: absolute;
        top: 7px;
        left: -23px;
        color: #dfdfdf;
        cursor: not-allowed;
    }
    .timeline a.prev.inactive .fa-solid .fa-chevron-right {
        position: absolute;
        top: 7px;
        left: -23px;
        color: #dfdfdf;
        cursor: not-allowed;
    }

    .timeline a.next .glyphicon-chevron-right {
        position: absolute;
        top: 7px;
        left: -22px;
        color: #FF4000;
        cursor: pointer;
    }
    .timeline a.next .fa-solid .fa-chevron-right {
        position: absolute;
        top: 7px;
        left: -22px;
        color: #FF4000;
        cursor: pointer;
    }

    .timeline a.next.inactive .glyphicon-chevron-right {
        position: absolute;
        top: 7px;
        left: -23px;
        color: #dfdfdf;
        cursor: not-allowed;
    }
    .timeline a.next.inactive .fa-solid .fa-chevron-right {
        position: absolute;
        top: 7px;
        left: -23px;
        color: #dfdfdf;
        cursor: not-allowed;
    }
}

/* [#] sm screen */
@media (min-width: 768px) {
    .timeline a.prev .glyphicon-chevron-right {
        position: absolute;
        top: 7px;
        left: -25px;
        color: #FF4000;
        cursor: pointer;
    }
    .timeline a.prev .fa-solid .fa-chevron-right {
        position: absolute;
        top: 7px;
        left: -25px;
        color: #FF4000;
        cursor: pointer;
    }

    .timeline a.prev.inactive .glyphicon-chevron-right {
        position: absolute;
        top: 7px;
        left: -25px;
        color: #dfdfdf;
        cursor: not-allowed;
    }
    .timeline a.prev.inactive .fa-solid .fa-chevron-right {
        position: absolute;
        top: 7px;
        left: -25px;
        color: #dfdfdf;
        cursor: not-allowed;
    }

    .timeline a.next .glyphicon-chevron-right {
        position: absolute;
        top: 6px;
        left: -23px;
        color: #FF4000;
        cursor: pointer;
    }
    .timeline a.next .fa-solid .fa-chevron-right {
        position: absolute;
        top: 6px;
        left: -23px;
        color: #FF4000;
        cursor: pointer;
    }

    .timeline a.next.inactive .glyphicon-chevron-right {
        position: absolute;
        top: 7px;
        left: -23px;
        color: #dfdfdf;
        cursor: not-allowed;
    }
    .timeline a.next.inactive .fa-solid .fa-chevron-right {
        position: absolute;
        top: 7px;
        left: -23px;
        color: #dfdfdf;
        cursor: not-allowed;
    }
}

/* [#] md screen */
@media (min-width:992px){
    .timeline a.prev .glyphicon-chevron-right {
        position: absolute;
        top: 6px;
        left: -25px;
        color: #FF4000;
        cursor: pointer;
    } 
    .timeline a.prev.inactive .glyphicon-chevron-right {
        position: absolute;
        top: 5px;
        left: -24px;
        color: #dfdfdf;
        cursor: not-allowed;
    }
    .timeline a.next .glyphicon-chevron-right {
        position: absolute;
        top: 5px;
        left: -24px;
        color: #FF4000;
        cursor: pointer;
    }
    .timeline a.next.inactive .glyphicon-chevron-right {
        position: absolute;
        top: 5px;
        left: -24px;
        color: #dfdfdf;
        cursor: not-allowed;
    }
}

/* [#] lg screen */
@media (min-width: 1200px) {
    .timeline a.prev .glyphicon-chevron-right {
        position: absolute;
        top: 4px;
        left: -26px;
        color: #FF4000;
        cursor: pointer;
    }
    .timeline a.prev.inactive .glyphicon-chevron-right {
        position: absolute;
        top: 4px;
        left: -25px;
        color: #dfdfdf;
        cursor: not-allowed;
    }
    .timeline a.next .glyphicon-chevron-right {
        position: absolute;
        top: 4px;
        left: -25px;
        color: #FF4000;
        cursor: pointer;
    }
    .timeline a.next.inactive .glyphicon-chevron-right {
        position: absolute;
        top: 4px;
        left: -25px;
        color: #dfdfdf;
        cursor: not-allowed;
    }
}


/* -------------------------------- 

Primary style

-------------------------------- */

.timeline a {
color: #FF4000;
text-decoration: none;
}

/* -------------------------------- 

Main Components 

-------------------------------- */

/* [$] block *****************************************/


.timeline {
opacity: 0;
/* margin: 2em auto;*/
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.timeline::before {
/* never visible - this is used in jQuery to check the current MQ */
content: 'mobile';
display: none;
}
.timeline.loaded {
/* show the timeline after events position has been set (using JavaScript) */
opacity: 1;
}
.timeline .timeline-wrapper {
position: relative;
height: 100px;
width: 90%;
max-width: 800px;
margin: 0 auto;
}

.timeline .filling-line {
/* this is used to create the #f26522 line filling the timeline */
position: absolute;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #FF4000;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-ms-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}

/*.timeline a.prev.inactive .glyphicon-chevron-right {
position: absolute;
top: 6px;
left: -24px;
color: #dfdfdf;
cursor: not-allowed;
}

.timeline a.next.inactive .glyphicon-chevron-right {
position: absolute;
top: 6px;
left: -24px;
color: #dfdfdf;
cursor: not-allowed;
}

.timeline a.prev .glyphicon-chevron-right {
position: absolute;
top: 6px;
left: -24px;
color: #f26522;
cursor: pointer;
}

.timeline a.next .glyphicon-chevron-right {
position: absolute;
top: 6px;
left: -24px;
color: #f26522;
cursor: pointer;
}*/

.timeline a.next {
cursor: pointer;
}

.timeline a.prev {
cursor: pointer;
}

/* [$] Element *****************************************/

.timeline .timeline__events-wrapper {
position: relative;
height: 100%;
margin: 0 40px;
overflow: hidden;
}
.timeline .timeline__events-wrapper::after, .timeline .timeline__events-wrapper::before {
/* these are used to create a shadow effect at the sides of the timeline */
content: '';
position: absolute;
z-index: 2;
top: 0;
height: 100%;
width: 20px;
}
/*.timeline .timeline__events-wrapper::before {
left: 0;
background-image: -webkit-linear-gradient( left , #f8f8f8, rgba(248, 248, 248, 0));
background-image: linear-gradient(to right, #f8f8f8, rgba(248, 248, 248, 0));
}
.timeline .timeline__events-wrapper::after {
right: 0;
background-image: -webkit-linear-gradient( right , #f8f8f8, rgba(248, 248, 248, 0));
background-image: linear-gradient(to left, #f8f8f8, rgba(248, 248, 248, 0));
}*/
.timeline .timeline__events {
/* this is the grey line/timeline */
position: absolute;
z-index: 1;
left: 0;
top: 49px;
height: 2px;
/* width will be set using JavaScript */
/*background: #dfdfdf;*/
background: #fd784b;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}

.timeline .timeline__events a {
position: absolute;
bottom: 0;
z-index: 2;
text-align: center;
font-size: 1.4rem;
padding-bottom: 15px;
color: #383838;
/* fix bug on Safari - text flickering while timeline translates */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
text-decoration:none;
}
.timeline .timeline__events a::after {
/* this is used to create the event spot */
content: '';
position: absolute;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
bottom: -5px;
height: 12px;
width: 12px;
border-radius: 50%;
border: 2px solid #dfdfdf;
background-color: #f8f8f8;
-webkit-transition: background-color 0.3s, border-color 0.3s;
-moz-transition: background-color 0.3s, border-color 0.3s;
transition: background-color 0.3s, border-color 0.3s;
cursor:pointer;
}
.no-touch .timeline .timeline__events a:hover::after {
background-color: #FF4000;
border-color: #FF4000;
}
.timeline .timeline__events a.selected {
pointer-events: none;
}
.timeline .timeline__events a.selected::after {
background-color: #FF4000;
border-color: #FF4000;
}
.timeline .timeline__events a.older-event::after {
border-color: #FF4000;
}
@media only screen and (min-width: 1100px) {
/* .timeline {
margin: 6em auto;
}*/
.timeline::before {
/* never visible - this is used in jQuery to check the current MQ */
content: 'desktop';
}
}

.timeline__navigation a {
/* these are the left/right arrows to navigate the timeline */
position: absolute;
z-index: 1;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
height: 34px;
width: 34px;
border-radius: 50%;
border: 2px solid #f7f7f7;
/* replace text with an icon */
overflow: hidden;
color: transparent;
text-indent: 100%;
white-space: nowrap;
-webkit-transition: border-color 0.3s;
-moz-transition: border-color 0.3s;
transition: border-color 0.3s;
}
.timeline__navigation a::after {
/* arrow icon */
content: '';
position: absolute;
height: 16px;
width: 16px;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);

}
.timeline__navigation a.prev {
left: 0;
-webkit-transform: translateY(-50%) rotate(180deg);
-moz-transform: translateY(-50%) rotate(180deg);
-ms-transform: translateY(-50%) rotate(180deg);
-o-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg);
}
.timeline__navigation a.next {
right: 0;
}
.no-touch .timeline__navigation a:hover {
border-color: #FF4000;
}
.timeline__navigation a.inactive {
cursor: not-allowed;
}
.timeline__navigation a.inactive::after {
background-position: 0 -16px;
}
.no-touch .timeline__navigation a.inactive:hover {
border-color: #dfdfdf;
}

.timeline .timeline__events-content {
position: relative;
width: 100%;
margin: 1em 0;
overflow: hidden;
-webkit-transition: height 0.4s;
-moz-transition: height 0.4s;
transition: height 0.4s;
}
.timeline .timeline__events-content li {
position: absolute;
z-index: 1;
width: 100%;
left: 0;
top: 0;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
padding: 0 5%;
opacity: 0;
-webkit-animation-duration: 0.4s;
-moz-animation-duration: 0.4s;
animation-duration: 0.4s;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.timeline .timeline__events-content li.selected {
/* visible event content */
position: relative;
z-index: 2;
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.timeline .timeline__events-content li.enter-right, .timeline .timeline__events-content li.leave-right {
-webkit-animation-name: cd-enter-right;
-moz-animation-name: cd-enter-right;
animation-name: cd-enter-right;
}
.timeline .timeline__events-content li.enter-left, .timeline .timeline__events-content li.leave-left {
-webkit-animation-name: cd-enter-left;
-moz-animation-name: cd-enter-left;
animation-name: cd-enter-left;
}
.timeline .timeline__events-content li.leave-right, .timeline .timeline__events-content li.leave-left {
-webkit-animation-direction: reverse;
-moz-animation-direction: reverse;
animation-direction: reverse;
}
.timeline .timeline__events-content li > * {
max-width: 800px;
margin: 0 auto;
}

.timeline .timeline__events-content em {
display: block;
font-style: italic;
margin: 10px auto;
}
.timeline .timeline__events-content em::after {
content: '- ';
}
/*.timeline .timeline__events-content p {
font-size: 1.4rem;
}*/
.timeline .timeline__events-content em, .timeline .timeline__events-content p {
line-height: 1.5;
}

.timeline__title {
text-align: center;
margin-top: 50px;
}


/* [$] Modifier *****************************************/

.timeline__title--section-h2 {
font-size: 1.5em;
margin:0;
}

/* [#] xs screen */
@media (max-width: 767px){
   
.timeline__title--section-h2 {
    font-size: 2em;
}

.timeline .timeline__events-content p {
    font-size: 1em !important;
}

}
/* [#] sm screen */
@media (min-width: 768px) and (max-width: 991px) {
   
   .timeline .timeline__events-content p {
    font-size: 0.9em !important;
} 
 
}

/* [#] md screen */
@media (min-width: 992px) and (max-width: 1199px) {

    .timeline .timeline__events-content p {
        font-size: 0.9em !important;
    }     

}

.timeline .timeline__events-content em {
font-size: 1em;
}
.timeline .timeline__events-content p {
font-size: 0.8em;
}



@-webkit-keyframes cd-enter-right {
0% {
opacity: 0;
-webkit-transform: translateX(100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
@-moz-keyframes cd-enter-right {
0% {
opacity: 0;
-moz-transform: translateX(100%);
}
100% {
opacity: 1;
-moz-transform: translateX(0%);
}
}
@keyframes cd-enter-right {
0% {
opacity: 0;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
}
@-webkit-keyframes cd-enter-left {
0% {
opacity: 0;
-webkit-transform: translateX(-100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
@-moz-keyframes cd-enter-left {
0% {
opacity: 0;
-moz-transform: translateX(-100%);
}
100% {
opacity: 1;
-moz-transform: translateX(0%);
}
}
@keyframes cd-enter-left {
0% {
opacity: 0;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
}

.backToList > a:hover{
    /*color:#FF4000;*/
    color:#000000;
}


/* Timeline 2024 */




.eib-timeline-horizontal.swiper {
    overflow: unset;
  }
  .eib-timeline-horizontal .timeline-bundle {
    position: relative;
    max-width: 440px;
    margin-right: auto;
    margin-left: auto;
  }
  .eib-timeline-horizontal .pagination-timeline {
    max-width: 440px;
    overflow: hidden;
    position: relative;
    height: 90px;
    background-color: transparent;
    transition: all .3s ease-in;
  
  }
  .eib-timeline-horizontal .swiper-slide:not(.swiper-slide-active) {
    visibility: hidden;
    height: 0;
  }
  .eib-timeline-horizontal .swiper-slide.swiper-slide-active {
    visibility: visible;
    height: auto;
  }
  .eib-timeline-horizontal-pagination {
    display: flex;
    width: auto !important;
    transition: all .3s ease-in;
    top: 70% !important;
    bottom: auto !important;
    position: absolute;
    z-index: 3;
    transform: translateY(-50%);
    align-items: center;
  }
  .eib-timeline-horizontal .swiper-pagination::before {
    content: "";
  }
  #timeline-line {
    background-color: #F7F7F7;
    height: 3px;
    width: 100%;
    position: absolute;
    z-index: 1;
    top: calc(70%);
    transform: translateY(-50%);
    transition: all .3s ease-in;
  }
  #timeline-indicator {
    background-color: #FF4000;
    height: 3px;
    width: 60px;
    position: absolute;
    z-index: 2;
    top: 70% !important;
    bottom: auto !important;
    position: absolute;
    transform: translateY(-50%);
    transition: all .3s ease-in;;
  }
  .eib-timeline-horizontal .swiper-pagination-bullet {
    width: 28px;
    height: 28px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #000;
    opacity: 1;
    z-index: 12;
    background: rgb(171, 171, 171);
    border: 5px solid #fff;
    position: relative;
    transition: all .2s ease-in;
  }
  .eib-timeline-horizontal .swiper-pagination-bullet::before {
    transition: all .2s ease-in;
  }
  
  .eib-timeline-horizontal .swiper-pagination-bullet:not(:first-child) {
    margin-left: 112px !important;
  }
  .eib-timeline-horizontal .swiper-pagination-bullet:first-child {
    margin-left: 60px !important;
  }
  .eib-timeline-horizontal .swiper-pagination-bullet:last-child {
    margin-right: 40px !important;
  }
  .eib-timeline-horizontal .swiper-pagination-bullet-date {
    position: absolute;
    margin-top: -40px;
    width: 100px;
    transform: translateX(-50%);
  }
  
  .eib-timeline-horizontal .swiper-pagination-bullet-active {
    color: #FF4000;
    background: #fff;
    position: relative;
    border: 5px solid #ff400042;
  }
  .eib-timeline-horizontal .swiper-pagination-bullet-active::before {
    content: "";
    background-color: #FF4000;
    border-radius: 50%;
    position: absolute;
    width: 14px;
    height: 14px;
    top: 2px;
    left: 2px;
    transition: height .2s ease-in, width .2s ease-in, all .2s ease-in;
  }
  .eib-timeline-horizontal .swiper-pagination-bullet:hover::before{
    transform: scale(.8);
  }
  .eib-timeline-horizontal .previous-date {
    background-color: #FF4000;
  }
  .eib-timeline-horizontal .previous-date::after {
    content: "";
    width: 18px;
    height: 10px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    position: absolute;
    left: 0;
    top: 4px;
  }
  .eib-timeline-horizontal .swiper-pagination-bullet-active.previous-date {
    background-color: #fff;
  }
  .eib-timeline-horizontal .swiper-pagination-bullet-active.previous-date::after {
    content: none;
  
  }
  .eib-timeline-horizontal .swiper-pagination-bullet-active ~ .previous-date {
    background-color: rgb(171, 171, 171);
    background-image: none;
  }
  .eib-timeline-horizontal #pagination-next, .eib-timeline-horizontal #pagination-prev {
    position: absolute;
    top: 70%;
    transform: translateY(-50%);
    z-index: 4;
  }
  .eib-timeline-horizontal #pagination-next:hover, .eib-timeline-horizontal #pagination-prev:hover {
    cursor: pointer;
  }
  
  .eib-timeline-horizontal #pagination-prev {
    left: -50px;
  }
  .eib-timeline-horizontal #pagination-next {
    right: -50px;
  }
  .eib-timeline-horizontal #pagination-next::before {
    content: "";
    position: relative;
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' style='fill: %23FF4000;'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cdefs%3E%3Cstyle%3E.fa-secondary%7Bopacity:.4%7D%3C/style%3E%3C/defs%3E%3Cpath class='fa-primary' d='M438.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L370.7 256 233.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3Cpath class='fa-secondary' d='M338.7 224L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0 32-32-32-32z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    height: 24px;
    width: 24px;
  }
  .eib-timeline-horizontal #pagination-prev::before {
    content: "";
    position: relative;
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' style='fill: %23FF4000;'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cdefs%3E%3Cstyle%3E.fa-secondary%7Bopacity:.4%7D%3C/style%3E%3C/defs%3E%3Cpath class='fa-primary' d='M9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l160-160c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L77.3 256 214.6 393.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-160-160z'/%3E%3Cpath class='fa-secondary' d='M109.3 288L416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0-32 32 32 32z'/%3E%3Cstyle xmlns='http://www.w3.org/1999/xhtml' type='text/css'%3E%3C/style%3E%3C/svg%3E");      background-repeat: no-repeat;
    height: 24px;
    width: 24px;
  }