/* -------------------------------- 
Horizontal Timeline 2.0
-------------------------------- */
.horizontal-timeline {
    opacity: 0;
    width: 100%;
    margin: 2em auto;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    transition: opacity .2s
}

.horizontal-timeline ol {
    margin: 0;
    padding: 0;
    width: 100%
}

.horizontal-timeline::before {
    content: 'desktop';
    display: none
}

.horizontal-timeline.loaded {
    opacity: 1;
    margin: 0 !important
}

.horizontal-timeline .touch-enabled {
    cursor: grab
}

.horizontal-timeline .timeline {
    position: relative;
    height: auto;
    margin: 0 auto;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.horizontal-timeline .events-wrapper {
    position: relative;
    height: 80px;
    overflow: hidden;
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
    margin-bottom: 2rem;
}

.horizontal-timeline .events-wrapper .older-event,
.horizontal-timeline .events-wrapper .selected {
    color: rgba(var(--primary-color), 1);
    font-size: 1rem;
    font-weight: 600;
}

.horizontal-timeline .events-wrapper .first {
    color: rgba(var(--primary-color), 1);
    font-size: 1rem;
    font-weight: 600;
}


.horizontal-timeline .events {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 13%;
    height: 2px;
    background: rgba(211, 208, 243, 1);
}

.horizontal-timeline .filling-line {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(345deg, #2413C5 51%, #FE8200 100%);
    -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 .3s;
    -moz-transition: -moz-transform .3s;
    transition: transform .3s
}

.horizontal-timeline .events a {
    position: absolute;
    bottom: -3px;
    z-index: 2;
    text-align: center;
    text-decoration: none;
    padding-bottom: 1.75rem;
    color: rgba(211, 208, 243, 1);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    user-select: none;
    font-size: 1rem;
    font-weight: 600;
}

.horizontal-timeline  .first {
    padding-left: 0 !important;
}

.horizontal-timeline .events a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0.83rem;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: rgba(211, 208, 243, 1);
    -webkit-transition: background-color .3s, border-color .3s;
    -moz-transition: background-color .3s, border-color .3s;
    transition: background-color .3s, border-color .3s;
}

.horizontal-timeline .events-content li {
    background-color: transparent;
    list-style: none;
}


.horizontal-timeline .events a::before {
    content: '';
    position: absolute;
    background: transparent;
}

.horizontal-timeline .events a.selected {
    pointer-events: none
}

.horizontal-timeline .events a.older-event::after,
.horizontal-timeline .events a.selected::after {
    /* background-image: linear-gradient(340deg, #FE8200 10%, #2413C5 83%); */
    border: 3px solid white;
    background: linear-gradient(112.99deg, #2413C5 28.39%, #FE8200 114.35%);
}



.horizontal-timeline .events a.older-event::before,
.horizontal-timeline .events a.selected::before {
    content: '';
    position: absolute;
    content: '';
    position: absolute;
    /* background-image: linear-gradient(340deg, #2413C5 10%, #FE8200 83%); */
    background: linear-gradient(112.99deg, #FE8200 0%, #2413C5 55%);
    height: 19px;
    width: 19px;
    border-radius: 50%;
    bottom: -0.29rem;
    left: 0.74rem;
    
     
}

/* .horizontal-timeline .events a:hover {
    text-decoration: underline
} */

.timeline-navigation {
    position: relative;
    top: 3px;
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    -o-transform: translateY(50%);
    transform: translateY(50%);
    z-index: 2
}

.timeline-navigation#leftNav {
    left: 1px
}

.timeline-navigation#rightNav {
    right: 1px
}

.timeline-navigation a {
    display: inline;
    text-decoration: none;
    color: #000
}

.timeline-navigation a:hover {
    color: #002bff;
    border-color: #002bff
}

.timeline-navigation a.inactive {
    cursor: not-allowed;
    border-color: #d3d3d3;
    color: #d3d3d3;
    /* opacity: 0.4; */
}



.timeline-navigation#pausePlay {
    width: 100%;
    top: -10px;
    text-align: center
}

.horizontal-timeline .events-content {
    position: relative;
    margin: 2em 0;
    margin-left: auto;
    margin-right: auto;
    -webkit-transition: height .4s .2s;
    -moz-transition: height .4s .2s;
    transition: height .4s .2s
}

.horizontal-timeline .events-content .progressBarWrapper {
    position: absolute;
    width: 100%;
    height: 4px;
    margin-top: -4px;
    padding: 0 20px
}

.horizontal-timeline .events-content .progressBar {
    width: 0%;
    max-width: 100%;
    height: inherit;
    background: #002bff
}

.horizontal-timeline .events-content li {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    margin: auto;
    padding: 10px 0;
    border-radius: 20px;
    opacity: 0;
    font-size: 16pt;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    min-height: 400px;
    /* -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    transition: opacity 1s */
}


.horizontal-timeline .events-content li .card {
    background-color: transparent;
    border: none;
    margin-bottom: 3rem;
}

.horizontal-timeline .events-content li .card:last-child{
    margin-bottom: 0;
}

.horizontal-timeline .events-content li .card .card-body {
    padding: 0;
}

.horizontal-timeline .events-content li .card img {
    border-radius: var(--common-radius);
}

.horizontal-timeline .events-content li .card .card-title {
    font-size: 1.25rem;
    font-weight: 500;
    color: rgba(var(--primary-color), 1);
    margin-bottom: 1.5rem;
}

.horizontal-timeline .events-content li .card .card-text p {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
    font-weight: 400;
}


.group-history .our-timeline {
    position: relative;
}

.group-history .our-timeline .timeline-heading {
    font-size: 2.5rem;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 2rem;

}

.group-history .our-timeline .timeline-navigation .fa-chevron-circle-left,
.group-history .our-timeline .timeline-navigation .fa-chevron-circle-right {
    display: none;
}

.group-history .our-timeline .timeline-navigation {
    position: absolute;
    right: 44px;
}

.group-history .our-timeline .timeline-navigation .fa-arrow-circle-left {
    position: absolute;
    right: 0 !important;
    top: -60px;
    width: 32px;
    height: 32px;
    background:rgba(7, 200, 242, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.group-history .our-timeline .timeline-navigation .fa-arrow-circle-right {
    position: absolute;
    right: 1px;
    top: -60px;
    width: 32px;
    height: 32px;
    background: rgba(7, 200, 242, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.group-history .our-timeline .timeline-navigation .fa-arrow-circle-left::before {
    font-family: 'Line Awesome Free';
    font-weight: 900;
    content: "\f104";
    font-size: 1rem;
    color: #ffffff;
}

.group-history .our-timeline .timeline-navigation .fa-arrow-circle-right::before {
    font-family: 'Line Awesome Free';
    font-weight: 900;
    content: "\f105";
    font-size: 1rem;
    color: #ffffff;
}



.home .our-partners .partner-carousel .owl-next::before {
    font-family: 'Line Awesome Free';
    font-weight: 900;
    content: "\f105";
    font-size: 1rem;
    color: #ffffff;
}

.home .our-partners .partner-carousel .owl-prev::before {
    font-family: 'Line Awesome Free';
    font-weight: 900;
    content: "\f104";
    font-size: 1rem;
    color: #ffffff;
}

.horizontal-timeline .events-content li.selected {
    position: relative;
    z-index: 2;
    opacity: 1
}

.horizontal-timeline .events-content li.enter-right,
.horizontal-timeline .events-content li.exit-right {
    -webkit-animation-name: timeline-enter-right;
    -moz-animation-name: timeline-enter-right;
    animation-name: timeline-enter-right
}



.horizontal-timeline .events-content li.exit-left,
.horizontal-timeline .events-content li.exit-right {
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
    animation-direction: reverse
}

.horizontal-timeline .events-content li.animationSpeed {
    -webkit-animation-duration: .4s;
    -moz-animation-duration: .4s;
    animation-duration: .4s
}

/* @-webkit-keyframes timeline-enter-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
} */

/* @-moz-keyframes timeline-enter-right {
    0% {
        opacity: 0;
        -moz-transform: translateX(100%)
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0)
    }
}

@keyframes timeline-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 timeline-enter-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes timeline-enter-left {
    0% {
        opacity: 0;
        -moz-transform: translateX(-100%)
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0)
    }
}

@keyframes timeline-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)
    }
} */

@media only screen and (min-width:1100px) {
    .horizontal-timeline {
        margin: 6em auto
    }
}

@media only screen and (min-width:701px) and (max-width:1100px) {
    .horizontal-timeline::before {
        content: 'tablet'
    }
}

@media only screen and (min-width:501px) and (max-width:700px) {
    .horizontal-timeline::before {
        content: 'smallTablet'
    }
}

@media only screen and (min-width:361px) and (max-width:500px) {
    .horizontal-timeline::before {
        content: 'mobile'
    }
}

@media only screen and (max-width:360px) {
    .horizontal-timeline::before {
        content: 'tinyMobile'
    }
}

@media only screen and (max-width:1100px) {
    .horizontal-timeline .timeline {
        padding-bottom: 40px !important
    }

    .timeline-navigation#leftNav {
        -ms-flex-direction: column-reverse !important;
        flex-direction: column-reverse !important
    }

    .timeline-navigation#rightNav {
        -ms-flex-direction: column !important;
        flex-direction: column !important
    }

    .timeline-navigation#leftNav,
    .timeline-navigation#rightNav {
        display: -ms-flexbox !important;
        display: flex !important;
        top: -5px !important
    }

    .timeline-navigation#pausePlay {
        top: 20px !important
    }
}