.timeline{
    padding: 0 8%;
    position: relative;

}

.timeline h2{
    display:inline !important;
    color: #003366 !important;
} 

.timeline-tabs{
    max-width: 58px;
    float: right;
    position: relative;
    margin-right: 25%;
}

.timeline-tabs li::before{
    content: "";
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-right: 5px;
    background-color: #ffcc00;
    margin: 17px 0 0 -35px;
    float: left;
}

.timeline .enlace-pagination{
    float: left;
    margin-left: 70px;
    margin-top: 120px;
}
.timeline .ellipse{
    color:#337ab7 !important;
    font-size: 30px;
    padding: 0;
    width: 80px;
    display: inline-block;
    min-width: initial;
    border: none;
    margin-top: -9px;
}
.timeline li.disabled::before{
    border-color: #337ab7;
    margin: 5px 0 0 -35px;
}
.timeline .timeline-prev{
    background-repeat: no-repeat;
    background-image: url(/themes/custom/gerdautema/images/timeline_arrow/arrow_top.png);
    width: 45px;
    height: 43px;
    color: transparent !important;
}

.timeline .timeline-next{
    background-repeat: no-repeat;
    background-image: url(/themes/custom/gerdautema/images/timeline_arrow/arrow_bottom.png);
    width: 45px;
    height: 43px;
    color: transparent !important;
}


.timeline .pagination > li:first-child::before, .pagination > li:first-child::before{
    content: initial;
}
.timeline .pagination > li:last-child::before, .pagination > li:last-child::before{
    content: initial;
}
.timeline .pagination > .active > span{
    font-family: Barlow;
    color: #0578be !important;
    font-weight: bold;
    font-size: 30px;
    border: none !important;
    background-color: transparent !important;
    margin-left: -39px;
    
}

.pagination > li:first-child > a, .pagination > li:first-child > span{
    border: none;
}
.pagination > li:last-child > a, .pagination > li:last-child > span{
    border: none;
}
.timeline-pagination .prev{
    border: none;
}
.timeline .timeline-prev{
    color: #00b0db;
    font-size: 58px;
    border: none;
    float: left;
    margin: 0 0 0 -54px;
}

.timeline .timeline-next{
    color: #00b0db;
    font-size: 58px;
    margin: 0px 0 0 -52px;
    float: left;
}

.timeline .pagination > li:first-child a::before{
    content: none;
}
.timeline .pagination > li > a, .pagination > li > span{
    color: #495961;
    min-width: 160px;
}

.timeline .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus{
    background-color: transparent;
    outline: none;
}

.timeline-tabs li a{
    font-family: Barlow;
    color: #495961;
    font-weight: normal;
    font-size: 30px;
    border: none !important;
}

.timeline-tabs .active a{
    color: #0578be !important;
    font-weight: bold;
    position: relative;
}

.timeline .border-ver-1{
    border: solid 3.5px #495961;
    height: 219px;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 45px;
    top: 192px;
}
.timeline-tabs .disabled .timeline-prev{
    background-image: none;
}
.timeline-tabs .disabled .timeline-next{
    background-image: none;
 }

.timeline .col-md-12{
    padding: 0;
}
.timeline .col-md-6{
    padding: 0;
    margin: 3% 0 0 0;
}
.timeline-tabs-content{
    position: absolute;
    top: 0;
}
.timeline-tabs-content .col-md-12 h5{
    padding: 0;
    margin: 0;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .timeline .enlace-pagination{
        margin-top: 28px;

    }
    #timeline-pagination{
        width: 38px;
    }
    .timeline .pagination li{
        width: 60px;
    }
    .timeline .pagination li a, .pagination li span{
        font-size: 16px;
        margin-left: 3px;
    }
    .timeline .pagination > .active > span{
        font-size: 16px !important;
        margin-left: -48px !important;
    }
    .timeline .border-ver-1{
        right: 168px;
        left: initial;
        border: solid 1px #495961;
        height: 134px;
        top: 104px;
        display: none;
    }
    .timeline-tabs li:before{
        width: 12px;
        height: 12px;
        margin: 9px 0 0 -35px;
    }
    .timeline .timeline-next{
        margin: 21px 0 0 -64px;
    }
    .timeline .timeline-prev{
        margin: 0 0 0 -60px;
    }
    .timeline li.disabled::before {
        border-color: #337ab7;
        margin: 21px 0 0 -35px;
    }
    .timeline .ellipse {
        width: 65px;
        margin-top: -3px;
    }
}  
@media screen and (max-width: 767px) {
    .timeline{
        padding: 0 8%;
        position: relative;
        min-height: 620px;
    }
    .timeline-content{
        position: absolute !important;
        top: 198px;
    }
    
    .timeline .enlace-pagination{
        margin-top: -110px !important;
        position: absolute;
        top: 0;
        transform: rotate(-90deg);
        margin-left: 105px;
    }
    #timeline-pagination{
        width: 33px;   
    }
    .timeline .pagination li{
        width: 60px;
    }
    .timeline .pagination li a, .pagination li span{
        font-size: 16px;
        margin-left: 3px;
        padding: 4px 7px;
        min-width: 58px;
        background-color: transparent;
    }
    .timeline .pagination span.current{
        transform: rotate(90deg);
        background-color: transparent !important;
    } 
    .timeline .pagination .page-link{
        transform: rotate(90deg);
        min-width: 58px;
        padding: 9px 12px;
    }
    .timeline .prev{
       transform: initial !important;
    }
    .timeline .timeline-prev{
        width: 43px;
        height: 28px;
    }
    .timeline .pagination > .active > span{
        font-size: 16px !important;
        margin-left: 3px !important;
    }
    .timeline .border-ver-1 {
        border: solid 1px #495961;
        height: 143px;
        padding: 0;
        margin: 0;
        position: absolute;
        left: -30px;
        top: 105px;
    }
    .timeline-tabs li:before{
        width: 12px;
        height: 12px;
    }
    .timeline .timeline-next{
        margin: 9px 0 0 -64px;
        transform: none !important;
    }
    .timeline .next{
        transform: none !important;
    }
    .timeline .timeline-prev{
        margin: 30px 0 0 -61px;
    }
    .timeline li.disabled::before {
        border-color: #337ab7;
        margin: 19px 0 0 -35px;
    }
    .timeline .ellipse {
        width: 60px;
        margin-top: -4px;
    }
    
}