/****************************************************************************
 * Listing Theater
 ****************************************************************************/
.theatre_section .listing {
    margin-top: 2rem;
}
.theatre_section .listing_item {
    padding: 0;
}
.theatre_section .listing_item:after {
    display: none;
}
.theatre_section .listing_item .listing_image {
    padding-bottom: 56.25%;
    margin: 0;
}
.theatre_section .listing_item .listing_content {
    text-align: left;
    padding: 0.675rem;
    position: relative;
    z-index: 10;
    color: #ffffff;
}
.theatre_section .listing_item .listing_content:after {
    content: ''; position: absolute; width: auto; height: auto;
    left: 0; right: 0; top: 0; bottom: 0;
    background: url(../img/volksbuehne-saaldorf-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.8;
    z-index: -1;
}
.theatre_section .listing_item .listing_title {
    margin: 0;
    font-size: 1rem;
}
.theatre_section .listing_item .listing_sub_title {
    font-size: 1.3rem;
    font-weight: 400;
}


@media screen and (min-width:40em){
    /****************************************************************************
     * Listing Theater
     ****************************************************************************/
    .theatre_section .listing {
        margin: 2rem -0.5rem 0;
    }
    .theatre_section .listing_item {
        position: relative;
        margin: 0;
        padding: 0.5rem;
    }
    .theatre_section .listing_item .listing_content {
        position: absolute; height: auto; width: auto;
        left: 0.5rem; top: 0.5rem; right: 0.5rem; bottom: 0.5rem;
        pointer-events: none; opacity: 0;
        -webkit-transition: all 0.25s ease;
        -moz-transition: all 0.25s ease;
        -ms-transition: all 0.25s ease;
        -o-transition: all 0.25s ease;
        transition: all 0.25s ease;
    }
    .theatre_section .listing_item:hover .listing_content {
        opacity: 1;
    }
    .theatre_section .listing_item .listing_content:after {
        opacity: 0.7;
    }
    .theatre_section .listing_item .listing_titles {
        position: absolute; margin: 0 auto;
        left: 0; right: 0; top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        text-align: center;
    }
}