/****************************************************************************
 * Timeline Listing
 ****************************************************************************/
.listing.timeline_listing {
    position: relative;
    padding: 2rem 0 2rem;
}
.listing.timeline_listing:after {
    content: ''; position: absolute;
    top: 2rem; bottom: 0; left: 1rem;
    width: 2px; height: auto;
    background-color: #f59a00;
}
.listing.timeline_listing:before {
    content: ''; position: absolute; bottom: 0.25rem; left: 0.0675rem;
    width: 2rem; height: 2rem; border: 2px solid #f59a00;
    border-left: none; border-top: none;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    
}
.listing.timeline_listing .listing_item {
    flex: 0 0 100%; width: 100%;
    position: relative; padding-left: 2rem;
    
}

.listing.timeline_listing .listing_item:before {
    content: ''; position: absolute; left: 1rem; top: 50%;
    height: 0.5rem; width: 0.5rem; border-radius: 50%;
    background-color: rgb(245,154,0);
    box-shadow: 0 0 0 1px #FFF,0 0 0 2px rgb(245,154,0), 0 0 0 3px #FFFFFF, 0 0 0 4px rgb(245,154,0);
    -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.timeline_listing .listing_item .listing_title {
    display: block; margin: 0;
    padding: 1rem 0;
}

.listing.timeline_listing .listing_item .listing_title > *:first-child {
    display: inline-block; vertical-align: bottom;
    width: 30%; text-align: right; padding-right: 1rem;
    color: rgb(245,154,0); font-size: 2em;
    margin-bottom: -0.2em;
}
.listing.timeline_listing .listing_item .listing_title > *:last-child {
    display: inline-block; vertical-align: bottom;
    width: 70%; font-size: 0.875rem; color: inherit;
    text-transform: uppercase; text-align: left;
    font-weight: 700;
}


@media screen and (min-width:40em){
    /****************************************************************************
     * Standard-Headings
     ****************************************************************************/
    .listing.timeline_listing {
        padding: 2rem 0 4rem;
    }
    .listing.timeline_listing:after {
        left: 0; right: 0;
        margin: 0 auto;
    }
    .listing.timeline_listing:before {
        left: 50%; margin-left: -1rem;
    }
    .listing.timeline_listing .listing_item { padding: 0; }
    .listing.timeline_listing .listing_item:before { left: 50%; width: 0.75rem; height: 0.75rem; }
    .listing.timeline_listing .listing_item .listing_title {
        flex: 0 0 50%; width: 50%;
        padding: 1rem 0;
    }
    .listing.timeline_listing .listing_item:nth-child(even) .listing_title { margin: 0 0 0 auto; }
    .listing.timeline_listing .listing_item.binary .listing_title { padding-left: 2rem;}
    .listing.timeline_listing .listing_item .listing_title > *:first-child { font-size: 2.4em; margin-bottom: -0.25em;}
    .listing.timeline_listing .listing_item .listing_title > *:last-child { padding-right: 3rem; }
    
}


@media screen and (min-width:64em){
    /****************************************************************************
     * Standard-Headings
     ****************************************************************************/
    .listing.timeline_listing .listing_item:before { box-shadow: 0 0 0 1px #FFF,0 0 0 3px rgb(245,154,0), 0 0 0 4px #FFFFFF, 0 0 0 6px rgb(245,154,0);}
    .listing.timeline_listing .listing_item .listing_title {
        flex: 0 0 50%; width: 50%;
        padding: 1rem 0;
    }
    .listing.timeline_listing .listing_item:nth-child(even) .listing_title { margin: 0 0 0 auto; }
    .listing.timeline_listing .listing_item.binary .listing_title { padding-left: 3rem;}
    .listing.timeline_listing .listing_item .listing_title > *:first-child { font-size: 3em;}
    .listing.timeline_listing .listing_item .listing_title > *:last-child { font-size: 1rem }
    
}