/**
 * Download Block Styles
 */


.timeline-block .headerblock{width:75%;display:block;margin:0 auto 35px;text-align:center;}
.timeline-block .headerblock .subline{text-transform:none;}

.timeline-block .itemwrapper.vertikal{position:relative;}
.timeline-block .itemwrapper.vertikal::before{content:'';width:75%;height:3px;background:var(--brand-secondary-color);position:absolute;top:36px;left:50%;transform:translateX(-50%);z-index:1;}
.timeline-block .itemwrapper.vertikal .item{text-align:center;}
.timeline-block .itemwrapper.vertikal .item .zahl{display:block;width:75px;height:75px;margin:0 auto 35px;background:var(--brand-secondary-color);align-content:center;text-align:center;font-size:150%;font-weight:800;color:var(--brand-secondary-color-text);border-radius:50%;position:relative;z-index:5;}
.timeline-block .itemwrapper.vertikal .item .headline{font-size:125%;font-weight:600;text-transform:none;line-height:1.2;display:block;width:95%;margin:0 auto;}

.timeline-block .itemwrapper.horizontal{position:relative;}
.timeline-block .itemwrapper.horizontal::before{content:'';width:3px;height:100%;background:var(--brand-secondary-color);position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:1;}
.timeline-block .itemwrapper.horizontal .row .item{width:50%;padding-right:75px;}
.timeline-block .itemwrapper.horizontal .item{position:relative;text-align:right;}
.timeline-block .itemwrapper.horizontal .item::before{content:'';width:75px;height:75px;border-radius:50%;background-image:url('/wp-content/themes/altex-nonwoven/assets/media/calendar.svg');background-color:var(--brand-secondary-color);background-position:center;background-size:60%;background-repeat:no-repeat;position:absolute;top:0;right:0;transform:translateX(50%);z-index:1;}
.timeline-block .itemwrapper.horizontal .item img{margin-top:25px;height:450px;width:100%;object-fit:cover;}
.timeline-block .itemwrapper.horizontal .item .zahl{font-size:300%;font-weight:800;text-transform:none;line-height:1.2;display:block;width:100%;margin:0 auto;}
.timeline-block .itemwrapper.horizontal .item .headline{font-size:175%;font-weight:900;text-transform:none;line-height:1.2;display:block;width:100%;margin:0 auto 5px;}

.timeline-block .itemwrapper.horizontal .row:nth-child(2n){flex-direction: row-reverse;}
.timeline-block .itemwrapper.horizontal .row:nth-child(2n) .item{padding-left:75px;text-align:left;}
.timeline-block .itemwrapper.horizontal .row:nth-child(2n) .item::before{content:'';width:75px;height:75px;border-radius:50%;background-image:url('/wp-content/themes/altex-nonwoven/assets/media/calendar.svg');background-color:var(--brand-secondary-color);background-position:center;background-size:60%;background-repeat:no-repeat;position:absolute;top:0;left:0;right:unset;transform:translateX(-50%);z-index:1;}



/* Abweichungen */






/* Responsive Adjustments */

@media (max-width: 991px) {
    .timeline-block .headerblock {
        width: 100%;
        margin-bottom: 30px;
    }

    .timeline-block .itemwrapper.vertikal .item .headline {
        width: 100%;
        font-size: 115%;
    }

    .timeline-block .itemwrapper.horizontal {
        padding-left: 55px;
    }

    .timeline-block .itemwrapper.horizontal:before {
        left: 37px;
        transform: none;
    }

    .timeline-block .itemwrapper.horizontal .row,
    .timeline-block .itemwrapper.horizontal .row:nth-child(2n) {
        flex-direction: row;
        margin-bottom: 50px;
    }

    .timeline-block .itemwrapper.horizontal .row .item,
    .timeline-block .itemwrapper.horizontal .row:nth-child(2n) .item {
        width: 100%;
        padding-left: 45px;
        padding-right: 30px;
        text-align: left;
    }

    .timeline-block .itemwrapper.horizontal .item:before,
    .timeline-block .itemwrapper.horizontal .row:nth-child(2n) .item:before {
        left: 0;
        right: auto;
        width: 60px;
        height: 60px;
        transform: translateX(-50%);
    }

    .timeline-block .itemwrapper.horizontal .item .headline {
        font-size: 220%;
    }

    .timeline-block .itemwrapper.horizontal .item img {
        height: 350px;
    }
}


@media (max-width: 767px) {
    .timeline-block .headerblock {
        text-align: left;
    }


    .timeline-block .itemwrapper.vertikal .row {
        row-gap: 35px;
    }

    .timeline-block .itemwrapper.vertikal .item .zahl {
        margin-bottom: 18px;
        width: 65px;
        height: 65px;
        font-size: 130%;
        position:absolute;
        left: 0;
    }

    .timeline-block .itemwrapper.horizontal {
        padding-left: 35px;
    }

    .timeline-block .itemwrapper.horizontal:before {
        left: 20px;
    }

    .timeline-block .itemwrapper.horizontal .row,
    .timeline-block .itemwrapper.horizontal .row:nth-child(2n) {
        margin-bottom: 40px;
    }

    .timeline-block .itemwrapper.horizontal .row .item,
    .timeline-block .itemwrapper.horizontal .row:nth-child(2n) .item {
        padding-left: 30px;
    }

    .timeline-block .itemwrapper.vertikal::before{
        width:3px;
        height:95%;
        left:32.5px;
    }
        
    .timeline-block .itemwrapper.vertikal .item{
        text-align:left;
        padding-left:100px;
    }

    .timeline-block .itemwrapper.horizontal .item:before,
    .timeline-block .itemwrapper.horizontal .row:nth-child(2n) .item:before {
        width: 42px;
        height: 42px;
        background-size: 55%;
    }

    .timeline-block .itemwrapper.horizontal .item .headline {
        font-size: 175%;
    }

    .timeline-block .itemwrapper.horizontal .item img {
        height: auto;
        max-height: 300px;
        margin-top: 18px;
    }
}


@media (max-width: 480px) {
    .timeline-block .itemwrapper.horizontal {
        padding-left: 25px;
    }

    .timeline-block .itemwrapper.horizontal::before {
        left: 14px;
    }

    .timeline-block .itemwrapper.horizontal .row .item,
    .timeline-block .itemwrapper.horizontal .row:nth-child(2n) .item {
        padding-left: 35px;
        padding-right: 12px;
    }

    .timeline-block .itemwrapper.horizontal .item .headline {
        font-size: 150%;
    }

    .timeline-block .itemwrapper.horizontal .item img {
        max-height: 240px;
    }
    .timeline-block .itemwrapper.horizontal .item::before,
    .timeline-block .itemwrapper.horizontal .row:nth-child(2n) .item::before{
        left:3px;
    }
}