/* Brand Banner Portlet styles */
.dzm-brand-banner-img {
    z-index:3;
}

.left-side.brand-banner-img1:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
}


/* Timeline Portlet */

.dzm-timeline-item-left {
    border-right:3px solid #cccccc;
    text-align: right;

    p.h4 {
        position: relative;
        font-size: 2.5rem;
        line-height:0.85;
        margin-bottom:0;
    }

    & .dzm-timeline-item-marker {
        position: absolute;
        top:0.6rem;
        border-radius: 51%;
        background-color: #e81135;
        border:3px solid white;
        display: block;
        height:15px;
        width:15px;

        &.marker-size-xl {
            height:26px;
            width:26px;
            right:-31px;
            top:.4rem;
        }

        &.marker-size-md {
            height:22px;
            width:22px;
            right:-28px;
            top:.5rem;
        }

        &.marker-size-xs {
            height:15px;
            width:15px;
            right:-25px;
            top:.6rem;
        }
    }

    & img {
        max-height:50px;
        object-fit: cover;
        border-radius:4px;

    }

}

.dzm-timeline-item-right {
    border-left:3px solid #cccccc;
    transform: translateX(-3px);

    & p.h4 {
        position: relative;
        font-size: 2.5rem;
        line-height:0.85;
        margin-bottom:0;
    }

    & .dzm-timeline-item-marker {
        position: absolute;
        top:0.6rem;
        border-radius: 51%;
        background-color: #e81135;
        border:3px solid white;
        display: block;
        height:15px;
        width:15px;

        &.marker-size-xl {
            height:26px;
            width:26px;
            left:-30px;
            top:.4rem;
        }

        &.marker-size-md {
            height:22px;
            width:22px;
            left:-29px;
            top:.5rem;
        }

        &.marker-size-xs {
            height:15px;
            width:15px;
            left:-25px;
            top:.6rem;
        }

    }

    & img {
        max-height:50px;
        object-fit: cover;
        border-radius:4px;
    }
}

@media (max-width: 767.98px) {
    .dzm-timeline-item-left {
        border-right:0;
        border-left:3px solid #cccccc;
        transform: translateX(-3px);
        text-align:left;

        & .dzm-timeline-item-marker {

            &.marker-size-xl {
                left:-30px !important;
                top:.4rem;
            }

            &.marker-size-md {
                left:-28px;
                top:.5rem;
            }

            &.marker-size-xs {
                left:-25px;
                top:.6rem;
            }

        }

    }
}