.timeline {
    @extend .margin-0;
    @extend .padding-0;
    line-height: 1.4em;
    list-style: none;
    width: 100%;

    .timeline-item {
        @extend .p-l-40;
        position: relative;
        &:last-child {
            @extend .p-b-0;
        }
    }
    .timeline-info {
        @extend .font-12;
        letter-spacing: 3px;
        margin: 0 0 .5em 0;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .timeline-marker {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 15px;

        &:before {
            @include border-radius(100%);
            background: $color-primary;
            border: 3px solid transparent;
            content: "";
            display: block;
            height: 15px;
            position: absolute;
            top: 4px;
            left: 0;
            width: 15px;
            transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
        }
        &:after {
            content: "";
            width: 3px;
            background: rgba($dark, 0.2);
            display: block;
            position: absolute;
            top: 24px; bottom: 0; left: 6px;
        }
        .timeline-item:last-child &:after {
            content: none;
        }
    }
    .timeline-item:not(.period):hover .timeline-marker:before {
        background: transparent;
        border: 3px solid $color-primary;
    }
    .timeline-content {
        @extend .p-b-40;
        p:last-child {
            @extend .m-l-0;
        }
        .timeline-title{
            @extend .font-20;
        }
    }
    .period {
        padding: 0;
        .timeline-info {
            display: none;
        }
        .timeline-marker {
            &:before {
                @include border-radius(0);
                background: transparent;
                content: "";
                width: 15px;
                height: auto;
                border: none;
                top: 0;
                bottom: 30px;
                position: absolute;
                border-top: 3px solid $gray-600;
                border-bottom: 3px solid $gray-600;
            }
            &:after {
                content: "";
                height: 32px;
                top: auto;
            }
        }
        .timeline-content {
            padding: 40px 0 70px;
        }
        .timeline-title {
            @extend .margin-0;
        }
    }
    /*--MOD: TIMELINE SPLIT-----------------------*/
    &.timeline-split {
        @media (min-width: 768px) {
            .timeline {
                display: table;
            }
            .timeline-item {
                display: table-row;
                padding: 0;
            }
            .timeline-info,
            .timeline-marker,
            .timeline-content,
            .period .timeline-info {
                display: table-cell;
                vertical-align: top;
            }
            .timeline-marker {
                position: relative;
            }
            .timeline-content {
                padding-left: 30px;
            }
            .timeline-info {
                padding-right: 30px;
            }
            .period .timeline-title {
                position: relative;
                left: -45px;
            }
        }
    }

    /*--MOD: TIMELINE CENTERED --------------------*/
    &.timeline-centered {
        @extend .timeline-split;
        @media (min-width: 992px) {
            &,
            .timeline-item,
            .timeline-info,
            .timeline-marker,
            .timeline-content {
                display: block;
                margin: 0;
                padding: 0;
            }
            .timeline-item {
                padding-bottom: 40px;
                overflow: hidden;
            }
            .timeline-marker {
                position: absolute;
                left: 50%;
                margin-left: -7.5px;
            }
            .timeline-info,
            .timeline-content {
                width: 50%;
            }
            > .timeline-item:nth-child(odd) .timeline-info {
                float: left;
                text-align: right;
                padding-right: 30px;
            }
            > .timeline-item:nth-child(odd) .timeline-content {
                float: right;
                text-align: left;
                padding-left: 30px;
            }    
            > .timeline-item:nth-child(even) .timeline-info {
                float: right;
                text-align: left;
                padding-left: 30px;
            }
            > .timeline-item:nth-child(even) .timeline-content {
                float: left;
                text-align: right;
                padding-right: 30px;
            }
            > .timeline-item.period .timeline-content {
                float: none;
                padding: 0;
                width: 100%;
                text-align: center;
            }
            .timeline-item.period {
                padding: 50px 0 90px;
            }
            .period .timeline-marker:after {
                height: 30px;
                bottom: 0;
                top: auto;
            }
            .period .timeline-title {
                left: auto;
            }
        }
    }

    /*--MOD: MARKER OUTLINE-----------------------*/        
    &.marker-outline {
        .timeline-marker {
            &:before {
                background: transparent;
                border-color: $color-primary;
            }
        }
        .timeline-item:hover .timeline-marker:before {
            background: $color-primary;
        }
    }
}