:root {
    --yellow-color-logo-timeline: rgba(243, 209, 49, 0.8);
}

.cd-horizontal-timeline {
    background-color: var(--blue-color-logo);
    color: #fff;
    border-radius: 5rem;
    margin: 0 10vw 20vh 10vw;

    & .number_contact {
        font-family: Droid Sans;
    }

    & .col-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    & .row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
    }

    & .col-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 41.6666666667%;
        flex: 0 0 41.6666666667%;
        max-width: 41.6666666667%;
    }

    & .col-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 58.3333333333%;
        flex: 0 0 58.3333333333%;
        max-width: 58.3333333333%;
        position: relative;
        width: 100%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }

    & h2 {
        margin-bottom: 0.5rem;
        font-family: inherit;
        font-weight: 500;
        line-height: 1.2;
        color: inherit;
    }

    & *,
    ::before,
    ::after {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    & .col-7,
    .col-5,
    .col-12 {
        position: relative;
        width: 100%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }

    & #timeline {
        overflow: hidden;
        width: 100%;
        padding: 50px 0;
    }

    & #timeline div {
        height: 231px;
    }

    & #timeline div .date {
        border-right: 1px rgba(179, 175, 175, 0.4) solid;
        text-align: right
    }

    & #timeline div .date:before {
        content: '';
        width: 12px;
        height: 12px;
        background: var(--yellow-color-logo);
        position: absolute;
        left: 99.2%;
        top: 98px;
        border-radius: 100%;
        cursor: pointer
    }

    & #timeline div.active .date::before {
        content: '';
        width: 20px;
        height: 20px;
        background: #0078FF;
        position: absolute;
        left: 98.7%;
        top: 98px;
        border-radius: 100%
    }

    & #timeline div .date h2 {
        margin: 85px 50px 0;
        font-size: 30px;
        font-weight: 700;
        font-family: "Poppins", sans-serif;
    }

    & #timeline div.active .date h2 {
        font-size: 65px;
        color: #0078FF;
    }

    & #timeline div .text p {
        margin: 85px 50px 0;
        width: 50%;
        font-size: 1.4rem;
    }

    & #timeline div.active .text p {
        display: inherit
    }

    & .btn {
        color: var(--yellow-color-logo-timeline);
        font-size: 2.5rem;
    }

    & .social_timeline {
        display: flex;
        gap: 2rem;
    }

    & .btn i {
        line-height: 70px;
        font-size: 40px;
        transition: transform 0.325s linear;
    }

    & .btn:hover i {
        transform: scale(1.3);
        color: #f1f1f1;

    }

    & .btn::before {
        content: "";
        position: absolute;
        background-color: #3498db;
        transform: rotate(45deg);
    }

    & .btn:hover::before {
        animation: get_in_touch 0.7s 1;
    }

    & .facebook:hover::before {
        background: #3b5999;
    }

    & .location:hover::before {
        background: #e4405f;
    }

    & .whatsapp:hover::before {
        background:
            linear-gradient(#25d366, #25d366) 14% 84%/16% 16% no-repeat,
            radial-gradient(#25d366 58%, transparent 0);
    }

    & .instagram:hover::before {
        background: #d6249f;
        background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    }

    & .number_contact {
        color: orange;
    }

}

@media(max-width: 1000px) {
    .cd-horizontal-timeline {
        margin: 0 1vw 20vh 1vw;

        & #timeline div .text p {
            margin: 85px 0 0 10px;
            width: 100%;
            font-size: 1.025rem;
        }

        & #timeline div .date h2 {
            margin: 0px 0 0 5px;
            font-size: 20px;
        }

        & #timeline div .date:before {
            left: 97.2%;
            top: 98px;
        }
    }
}

@media(max-width: 600px) {
    .cd-horizontal-timeline {
        & .btn {
            display: none;
        }
    }
}

@media(max-width: 1250px) {
    .cd-horizontal-timeline {
        & #timeline div .date h2 {
            font-size: 20px;
        }
    }
}