/****************************************************************************
* Timeline Listing
****************************************************************************/
.listing_column.timeline_listing > .row {
    position: relative;
    padding: 2rem 0 2rem;
}

.listing_column.timeline_listing .item_inner {margin: 0;}

.listing_column.timeline_listing > .row:after {
    content: ''; position: absolute;
    top: 3rem; bottom: 0; left: 1rem;
    width: 2px; height: auto;
    background-color: #E8CCA8;
}

.listing_column.timeline_listing .item {
    flex: 0 0 100%; width: 100%;
    position: relative; padding: 0.5rem 0 0 2rem;
    
}

.listing_column.timeline_listing .item:before {
    content: ''; position: absolute; left: 1rem; top: 1rem;
    height: 0.75rem; width: 0.75rem; border-radius: 50%;
    background-color: #E8CCA8;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.listing_column.timeline_listing .item .item_content {
    display: block; margin: 0;
    padding: 0;
}

.listing_column.timeline_listing .item .item_content .content_title >* {margin: 0 0 0.5rem; font-size: 1.5rem;}

@media screen and (min-width:40em){
    .listing_column.timeline_listing > .row {
        padding: 2rem 0 0 0;
    }
    .listing_column.timeline_listing > .row:after {
        left: 0; right: 0;
        margin: 0 auto;
    }
    .listing_column.timeline_listing .item { padding: 0; }
    .listing_column.timeline_listing .item:before { left: 50%; width: 1rem; height: 1rem; }
    .listing_column.timeline_listing .item .item_content {
        flex: 0 0 50%; width: 50%;
        padding: 0 1rem;
        text-align: right;
    }
    .listing_column.timeline_listing .item:nth-child(even) .item_content { 
        margin: 0 0 0 auto; 
        text-align: left;
    }
    .listing_column.timeline_listing .item .item_content > *:first-child { font-size: 2.4em; margin-bottom: -0.25em;}
}


@media screen and (min-width:64em){
    /****************************************************************************
     * Standard-Headings
     ****************************************************************************/
    .listing_column.timeline_listing .item .item_content {
        padding: 0 1rem;

    }
    .listing_column.timeline_listing .item:nth-child(even) .item_content { 
        margin: 0 0 0 auto; 
        padding-left: 2rem;
    }
}