@media screen and (min-width:1300px) {
    .horizontal-timeline {
        margin-bottom: 250px;
    }
}

@media screen and (min-width:1051px) and (max-width: 1299px) {
    .horizontal-timeline {
        margin-bottom: 300px;
    }
}

@media screen and (min-width:991px) and (max-width: 1050px) {
    .horizontal-timeline {
        margin-bottom: 370px;
    }
}

@media screen and (min-width:993px) {
    .vertical-timeline {
        display: none;
    }

    .horizontal-timeline {
        position: relative;
        padding-top: 270px;
        border-bottom: 4px solid #1c1c1c;
        /* background-image: linear-gradient(to right, #fff, #FFEB00);
        box-shadow: 8px -3px 7px 0px #FFEB00; */
    }

    .horizontal-timeline::before {
        content: "";
        position: absolute;
        top: 5px;
        right: 0;
        bottom: 5px;
        left: 0;
        background-image: url(/images/templates/freccia.png);
        background-repeat: no-repeat;
        background-position: center right;
        background-size: contain;
    }

    .horizontal-timeline::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 235, 0, 1));
        filter: blur(5px);
        z-index: -1;
    }

    .timeline-dot {
        position: absolute;
        bottom: -8px;
        width: 12px;
        height: 12px;
        background-color: #1c1c1c;
    }

    .timeline-dot:nth-child(4) {
        left: calc(100%/7);
    }

    .timeline-dot:nth-child(6) {
        left: calc(100%/7*2);
    }

    .timeline-dot:nth-child(8) {
        left: calc(100%/7*3);
    }

    .timeline-dot:nth-child(10) {
        left: calc(100%/7*4);
    }

    .timeline-dot:nth-child(12) {
        left: calc(100%/7*5);
    }

    .timeline-dot:nth-child(14) {
        left: calc(100%/7*6);
    }

    .timeline-dot:nth-child(16) {
        left: 100%;
    }

    .dot-year {
        position: absolute;
        font-weight: bold;
        font-size: 20px;
        bottom: 15px;
        left: 50%;
        transition: transform .2s cubic-bezier(0.16, 1, 0.29, 0.99);
    }

    .dot-year::before {
        content: "";
        position: absolute;
        bottom: -15px;
        width: 12px;
        height: 12px;
        background-color: #1c1c1c;
        left: 50%;
        transform: translateX(-50%);
    }

    .timeline-dot:nth-child(2) .dot-year {
        transform: translate(-50%, 0rem);
    }

    .timeline-dot:nth-child(4) .dot-year {
        transform: translate(-50%);
    }

    .timeline-dot:nth-child(6) .dot-year {
        transform: translate(-50%);
    }

    .timeline-dot:nth-child(8) .dot-year {
        transform: translate(-50%);
    }

    .timeline-dot:nth-child(10) .dot-year {
        transform: translate(-50%);
    }

    .timeline-dot:nth-child(12) .dot-year {
        transform: translate(-50%);
    }

    .timeline-dot:nth-child(14) .dot-year {
        transform: translate(-50%);
    }

    .timeline-dot:nth-child(16) .dot-year {
        left: 100%;
    }

    .timeline-line {
        display: block;
        background-color: #1c1c1c;
        position: absolute;
        width: 4px;
        left: 50%;
        transform: translate(-50%, -3rem);
    }

    .timeline-dot:nth-child(4) .timeline-line {
        /* height: 3rem; */
        transform: translate(-50%, -3rem);
    }

    .timeline-dot:nth-child(6) .timeline-line {
        /* height: 4rem; */
        transform: translate(-50%, -4rem);
    }

    .timeline-dot:nth-child(8) .timeline-line {
        /* height: 5.5rem; */
        transform: translate(-50%, -5.5rem);
    }

    .timeline-dot:nth-child(10) .timeline-line {
        /* height: 7.5rem; */
        transform: translate(-50%, -7.5rem);
    }

    .timeline-dot:nth-child(12) .timeline-line {
        /* height: 10rem; */
        transform: translate(-50%, -10rem);
    }

    .timeline-dot:nth-child(14) .timeline-line {
        /* height: 14rem; */
        transform: translate(-50%, -14rem);
    }

    .timeline-dot:nth-child(16) .timeline-line {
        left: 100%;
    }


    .dot-text {
        position: absolute;
        top: 103%;
        font-size: 13px;
        max-width: calc(100%/7.2);
    }

    .dot-text:nth-child(3) {
        left: calc(100%/7);
    }

    .dot-text:nth-child(5) {
        left: calc(100%/7*2);
    }

    .dot-text:nth-child(7) {
        left: calc(100%/7*3);
    }

    .dot-text:nth-child(9) {
        left: calc(100%/7*4);
    }

    .dot-text:nth-child(11) {
        left: calc(100%/7*5);
    }

    .dot-text:nth-child(13) {
        left: calc(100%/7*6);
    }

    .dot-text:nth-child(15) {
        left: 100%;
    }
}

@media screen and (max-width:992px) {
    .horizontal-timeline {
        display: none;
    }

    .vertical-timeline {
        margin-top: 30px;
    }

    .dot-v {
        position: relative;
        border-left: 4px solid #1c1c1c;
    }

    .dot-v::before {
        content: "";
        background-color: #1c1c1c;
        position: absolute;
        width: 12px;
        height: 12px;
        left: -8px;
        top: 0;
    }

    .dot-content {
        padding: 0px 0px 35px 15px;
    }

    .dot-year {
        background: transparent;
        color: transparent;
        -webkit-text-stroke: 3px #000;
        font-size: 40px;
        /* text-transform: uppercase; */
        font-weight: bolder;
        /* padding: 12px; */
        font-family: 'Montserrat', sans-serif;
    }

    .dot-text {
        margin-top: 10px;
    }

    .dot-v:last-child::after {
        content: "";
        position: absolute;
        content: "";
        background-color: #1c1c1c;
        position: absolute;
        width: 12px;
        height: 12px;
        left: -8px;
        bottom: 0;
    }
}