﻿

* {
    outline: none;
}

.timeline-carousel {
    /*padding: 86px 6.9444% 90px 6.9444%;*/
    position: relative;
    overflow: hidden;
}

    .timeline-carousel:after, .timeline-carousel:before {
        content: "";
        position: absolute;
        display: block;
        top: 0;
        height: 100%;
        /*width: 6.9444%;*/
        background-color: #1d1d1e;
        z-index: 3;
    }

    .timeline-carousel:after {
        left: 0;
    }

    .timeline-carousel:before {
        right: 0;
        opacity: 0;
    }

    .timeline-carousel .slick-list {
        overflow: visible;
    }

    .timeline-carousel .slick-dots {
        bottom: -73px;
    }

    .timeline-carousel h1 {
        color: rgba(213, 155, 45, 1) !important;
        font-size: 46px;
        line-height: 50px;
        margin-bottom: 40px;
        font-weight: 900;
    }

.timeline-carousel__image {
    padding-right: 30px;
}

.timeline-carousel__item {
    cursor: pointer;
}

    .timeline-carousel__item .media-wrapper {
        opacity: 0.4;
        padding-bottom: 71.4%;
        -webkit-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        -o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    }
    .timeline-carousel__item .media-wrapper svg{
        position: relative;
        left:-10px;
    }

    .timeline-carousel__item:last-child .timeline-carousel__item-inner:after {
        width: calc(100% - 30px);
    }

.timeline-carousel__item-inner {
    position: relative;
    padding-top: 45px;
}

    .timeline-carousel__item-inner:after {
        position: absolute;
        width: 100%;
        top: 45px;
        left: 0;
        content: "";
        border-bottom: 3px solid rgb(213 155 45);
    }

    .timeline-carousel__item-inner .year {
        font-size: 36px;
        line-height: 36px;
        color: rgba(255, 255, 255, 1);
        display: table;
        letter-spacing: -1px;
        padding: 10px 15px 10px 5px;
        background-color: #1d1d1e;
        z-index: 1;
        position: relative;
        margin: -15px 0 20px;
        font-weight: 900;
    }

        .timeline-carousel__item-inner .year:after {
            content: "";
            position: absolute;
            display: block;
            left: -10px;
            top: 0;
            height: 100%;
            width: 10px;
            background-color: #1d1d1e;
            z-index: 3;
        }

    .timeline-carousel__item-inner .month {
        font-size: 12px;
        text-transform: uppercase;
        color: #b38c52;
        display: block;
        margin-bottom: 10px;
        font-weight: 900;
    }

    .timeline-carousel__item-inner p {
        /*font-size: 12px;*/
        line-height: 18px;
        /*color: rgba(255, 255, 255, 1);*/
        width: 60%;
        font-weight: 400;
        margin-bottom: 15px;
    }

    .timeline-carousel__item-inner .read-more {
        font-size: 14px;
        color: #b38c52;
        display: table;
        margin-bottom: 10px;
        font-weight: 900;
        text-decoration: none;
        position: relative;
    }

        .timeline-carousel__item-inner .read-more:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -1px;
            width: 0;
            border-bottom: 2px solid #b38c52;
            -webkit-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
            -o-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
            transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        }

        .timeline-carousel__item-inner .read-more:hover:after {
            width: 100%;
        }

    .timeline-carousel__item-inner .pointer {
        height: 29px;
        position: relative;
        z-index: 1;
        margin: -4px 0 16px;
    }

        .timeline-carousel__item-inner .pointer:after, .timeline-carousel__item-inner .pointer:before {
            position: absolute;
            content: "";
        }

        .timeline-carousel__item-inner .pointer:after {
            width: 9px;
            height: 9px;
            border-radius: 100%;
            top: 0;
            left: 0;
            background-color: #b38c52;
        }

        .timeline-carousel__item-inner .pointer:before {
            width: 1px;
            height: 100%;
            top: 0;
            left: 4px;
            background-color: #b38c52;
        }

.timeline-carousel .slick-active .media-wrapper {
    opacity: 1 !important;
}

.slick-dots {
    bottom: 60px;
    list-style: none;
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    z-index: 2;
}

    .slick-dots li {
        cursor: pointer;
        display: inline-block;
        margin: 0 6px;
        position: relative;
        width: 10px;
        height: 10px;
    }

        .slick-dots li:last-child {
            margin-right: 0;
        }

        .slick-dots li.slick-active button {
            background: #b38c52;
            border-color: #b38c52;
        }

        .slick-dots li button {
            display: block;
            font-size: 0;
            width: 10px;
            height: 10px;
            padding: 0;
            background-color: rgba(213, 155, 45, 0.6);
            border-color: rgba(213, 155, 45, 0.6);
            cursor: pointer;
            -webkit-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
            -o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
            transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        }

            .slick-dots li button:hover {
                background: #b38c52;
                border-color: #b38c52;
            }

.link {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 20px;
    z-index: 9999;
}

    .link a {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #fff;
    }

    .link .fa {
        font-size: 28px;
        margin-right: 8px;
        color: #fff;
    }
