.awf-timeline {
    border-left: 2px solid #ccc;
    list-style: none;
    margin-top: 3em;
    margin-bottom: 3em;
}

.awf-timeline .awf-timeline__item {
    margin: 0;
    padding-bottom: 1em;
    padding-left: 20px;
    position: relative;
}

.awf-timeline__item :first-child {
    margin-top: 0;
}

.awf-timeline__item :last-child {
    margin-bottom: 0;
}

.awf-timeline__item:before {
    background: #fff;
    border: 4px solid #ccc;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    content: "";
    display: block;
    height: 25px;
    left: -14px;
    position: absolute;
    top: 10px;
    width: 25px;
    z-index: 2;
}

.awf-timeline .a-heading {
    margin: 0;
    font-size: 2em;
}

.awf-timeline .awf-timeline__item--major:before {
    border: 4px solid #ccc;
    left: -14px;
    height: 25px;
    top: 8px;
    width: 25px;
}

.awf-timeline__item:last-child {
    border-left-color: transparent;
}

.awf-timeline__date {
    font-size: 14px;
    margin: 0;
}

.awf-timeline__update-container {
    background: #FFF;
    border-radius: 5px;
    display: inline-block;
    padding: 10px 20px;
}

.awf-timeline__update-container:before {
    border-color: transparent #FFF transparent transparent;
    border-style: solid;
    border-width: 7.5px 10px 7.5px 0;
    content: "";
    display: block;
    height: 0;
    left: 10px;
    position: absolute;
    top: 15px;
    width: 0;
}

.awf-timeline .awf-timeline__item--major {
    padding-left: 25px;
}

.awf-timeline .awf-timeline__item--major .awf-timeline__update-container:before {
    left: 15px;
}

.awf-timeline .awf-timeline__item--past .awf-timeline__update-container {
    background: #eee;
    /*opacity: .5;*/
}

.awf-timeline .awf-timeline__item--past .awf-timeline__update-container:before {
    border-color: transparent #eee transparent transparent;
}

.awf-timeline .awf-timeline__item--current .awf-timeline__update-container {
    background: #4f9f31;
    color: #000;
}

.awf-timeline .awf-timeline__item--current .awf-timeline__update-container:before {
    border-color: transparent #4f9f31 transparent transparent;
}

.awf-timeline > li.awf-timeline__item--current:before {
    border-color: #4f9f31;
    border-width: 4px;
}

.awf-timeline .awf-timeline__item--aviva .awf-timeline__update-container {
    background: #ffd900;
    color: #000;
    background-image: url(https://www.norfolk-norwich.com/css/aviva-logo.png);
    background-position: 50% 6%;
    background-repeat: no-repeat;
    padding-top: 4em;
}

.awf-timeline .awf-timeline__item--aviva .awf-timeline__update-container:before {
    border-color: transparent #ffd900 transparent transparent;
}

.awf-timeline > li.awf-timeline__item--aviva:before {
    border-color: #ffd900;
    border-width: 4px;
}

.awf-timeline .awf-timeline__item--sei .awf-timeline__update-container {
    background: #cc0000;
    color: #fff;
    background-image: url(https://www.norfolk-norwich.com/css/sei-logo.png);
    background-position: 50% 6%;
    background-repeat: no-repeat;
    padding-top: 4em;
}

.awf-timeline .awf-timeline__item--sei .awf-timeline__update-container:before {
    border-color: transparent #cc0000 transparent transparent;
}

.awf-timeline > li.awf-timeline__item--sei:before {
    border-color: #cc0000;
    border-width: 4px;
}



.awf-timeline .awf-timeline__item--virgin .awf-timeline__update-container {
    background: #cc0000;
    color: #fff;
    background-image: url(https://www.norfolk-norwich.com/css/virgin-logo.png);
    background-position: 50% 6%;
    background-repeat: no-repeat;
    padding-top: 4em;
}

.awf-timeline .awf-timeline__item--virgin .awf-timeline__update-container:before {
    border-color: transparent #cc0000 transparent transparent;
}

.awf-timeline > li.awf-timeline__item--virgin:before {
    border-color: #cc0000;
    border-width: 4px;
}

.awf-timeline__item:first-child:after {
    content: "";
    display: block;
    height: 20px;
    left: -5px;
    position: absolute;
    top: 0;
    width: 10px;
    z-index: 1;
}

.awf-timeline__item:last-child:after {
    bottom: 0;
    content: "";
    display: block;
    left: -5px;
    position: absolute;
    top: 20px;
    width: 10px;
    z-index: 1;
}

@media (min-width:35em) {
    .awf-timeline {
        border: 0;
        overflow: auto;
        position: relative;
    }

    .awf-timeline:before {
        border-left: 2px solid #f2cc28;
        bottom: 0;
        content: "";
        height: 100%;
        left: 50%;
        margin-left: 20px;
        position: absolute;
        top: 0;
    }

    .awf-timeline .awf-timeline__item {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        clear: both;
        float: left;
        padding-left: 0;
        padding-right: 25px;
        text-align: right;
        width: calc(50% + 1px);
    }

    .awf-timeline__item--minor:before {
        left: auto;
        right: -12px;
    }

    .awf-timeline__item--minor .awf-timeline__update-container:before {
        border-color: transparent transparent transparent #FFF;
        border-width: 7.5px 0 7.5px 10px;
        left: auto;
        right: 15px;
    }

    .awf-timeline .awf-timeline__item--major {
        float: right;
        padding-right: 0;
        padding-left: 25px;
        text-align: left;
    }

    .awf-timeline .awf-timeline__item--major:before {
        left: -12px;
        right: auto;
    }

.awf-timeline__item--aviva .awf-timeline__update-container:before {
        border-color: transparent #ffd900  transparent transparent;
        border-width: 7.5px 10px 7.5px 0;
        left: 15px;
        right: auto;
    }


    .awf-timeline .awf-timeline__item--minor.awf-timeline__item--past .awf-timeline__update-container:before {
        border-color: transparent transparent transparent #eee;
    }

    .awf-timeline .awf-timeline__item--major.awf-timeline__item--past .awf-timeline__update-container:before {
        border-color: transparent #eee transparent transparent;
    }

    .awf-timeline .awf-timeline__item--minor.awf-timeline__item--current .awf-timeline__update-container:before {
        border-color: transparent transparent transparent #4f9f31;
    }

    .awf-timeline .awf-timeline__item--major.awf-timeline__item--current .awf-timeline__update-container:before {
        border-color: transparent #4f9f31 transparent transparent;
    }

    .awf-timeline .awf-timeline__item--minor.awf-timeline__item--sei .awf-timeline__update-container:before {
        border-color: transparent transparent transparent #CC0000;
    }

    .awf-timeline .awf-timeline__item--major.awf-timeline__item--sei .awf-timeline__update-container:before {
        border-color: transparent #ffd900 transparent transparent;
    }
}