.upcoming_on_demand
{
    display: inline-block;
    position: relative;
    width: 49%;
    box-sizing: border-box;
    padding: var(--sz_button_margin);
    min-width: var(--sz_width_min);
}
    /*.upcoming_on_demand:before
    {
        content: attr(title);
        display: block;
        position: absolute;
        top: var(--sz_button_margin);
        left: var(--sz_button_margin);
        color: var(--color_primary);
        font-weight: bold;
        text-transform: uppercase;
    }*/
    .upcoming_on_demand > h1,
    .upcoming_on_demand > p
    {
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    .upcoming_on_demand > p
    {
        margin-top: 0;
        margin-bottom: var(--sz_button_margin);
    }

    .upcoming_on_demand > .upcoming_list
    {
        display: block;
    }
        .upcoming_on_demand > .upcoming_list > a,
        .our_work_initiatives > .upcoming_list > div
        {
            display: block;
            position: relative;
            border: var(--border);
            text-decoration: none;
            color: black;
            border: var(--border);
            padding: var(--sz_button_margin);
            padding-left: calc(1.5 * var(--sz_button) );
            padding-right: var(--sz_button);
        }
            .upcoming_on_demand > .upcoming_list > a:before,
            .our_work_initiatives > .upcoming_list > div:before
            {
                content: "";
                display: block;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: var(--sz_button_margin);
                height: var(--sz_button);
                width: var(--sz_button);
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center center;
                background-image: url(icons/webinar.svg);
            }

            .upcoming_on_demand > .upcoming_list > a:hover,
            .our_work_initiatives > .upcoming_list > div:hover
            {
                background-color: var(--color_primary);
                color: white;
                cursor: pointer;
            }
                .upcoming_on_demand > .upcoming_list > a:hover::before
                {
                    background-color: white;
                    border-radius: calc(0.5 * var(--sz_button_margin) );
                    border: 2px solid white;
                }
            .upcoming_on_demand a:after,
            .our_work_initiatives > .upcoming_list div:after
            {
                content: "→";
                display: block;
                position: absolute;
                top: 50%;
                right: calc(1 * var(--sz_button_margin));
                font-weight: bold;
            }
            .upcoming_on_demand > .upcoming_list > a > h4,
            .upcoming_on_demand > .upcoming_list > a > p,
            .our_work_initiatives > .upcoming_list > div > h4,
            .our_work_initiatives > .upcoming_list > div > p
            {
                margin: 0;
                padding: 0;
            }
            .upcoming_on_demand > .upcoming_list > a > p,
            .our_work_initiatives > .upcoming_list > div > p
            {
                font-weight: bold;
                color: var(--color_tertiary);
                margin-top: var(--sz_button_margin);
            }

/*******************  Setup border roundness to meet design  */
.upcoming_on_demand > .upcoming_list > :first-child
{
    border-top-left-radius: var(--sz_button_margin);
    border-top-right-radius: var(--sz_button_margin);
}
.upcoming_on_demand > .upcoming_list > :last-child
{
    border-bottom-left-radius: var(--sz_button_margin);
    border-bottom-right-radius: var(--sz_button_margin);
}

/********************* Start Media queries for different layouts */

@media screen and (max-width: 1200px)
{
}

@media screen and (max-width: 1024px)
{
    .upcoming_on_demand
    {
        display: block;
        width: 100%;
    }
}

@media screen and (max-width: 768px)
{
}