body {
    counter-reset: section;
}

.breadcrumb-counter-nav {
    margin: 0;
    padding: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    list-style: none;
    background: #2C3E50;
}

.breadcrumb-counter-nav .breadcrumb-counter-nav-item {
    position: relative;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    padding: 1rem 2rem;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

.breadcrumb-counter-nav .breadcrumb-counter-nav-item:hover {
    background: #1a252f;
}

.breadcrumb-counter-nav .breadcrumb-counter-nav-item::before {
    position: relative;
    background: #559be0;
    color: #fff;
    right: 0.8rem;
    border-radius: 50%;
    padding: 0.2em 0.55em;
}

.breadcrumb-counter-nav .breadcrumb-counter-nav-item.current {
    background: #1a252f;
}

.breadcrumb-counter-nav .breadcrumb-counter-nav-item.current::after {
    content: '';
    position: absolute;
    top: 0;
    right: -1rem;
    width: 0;
    height: 0;
    border-top: 1.75rem solid transparent;
    border-bottom: 1.75rem solid transparent;
    border-left: 1rem solid #1a252f;
    z-index: 300;
}

.breadcrumb-counter-nav .breadcrumb-counter-nav-item.current::before {
    background-color: #88a4bf;
}

.breadcrumb-counter-nav .breadcrumb-counter-nav-item a {
    color: #fff;
    font-size: 0.875rem;
}

@media only screen and (max-width: 52em) {
    .breadcrumb-counter-nav {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

section.main-content {
    padding: 0;
    border-top: none;
}

/* Full Width Bar */

.breadcrumb-counter-nav {
    background: #3C3D3C;
    margin-bottom: 24px;
}

.breadcrumb-counter-nav .breadcrumb-counter-nav-item::before {
    background: #6D6E70;
    border-radius: 50%;
}

/* Current Item */

.breadcrumb-counter-nav .breadcrumb-counter-nav-item.current {
    background: #13569C;
    -webkit-box-shadow: 0px 0px 29px 0px rgba(61,61,61,1);
    -moz-box-shadow: 0px 0px 29px 0px rgba(61,61,61,1);
    box-shadow: 0px 0px 29px 0px rgba(61,61,61,1);
}

.breadcrumb-counter-nav .breadcrumb-counter-nav-item.current:after{
    border-left: 1rem solid #13569C;
}

.breadcrumb-counter-nav .breadcrumb-counter-nav-item.current::before{
    background: #0E76BC;
}

/* Mobile Version */

@media (max-width: 833px) {
    .breadcrumb-counter-nav {
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        background:#6D6E70;
    }

    .breadcrumb-counter-nav .breadcrumb-counter-nav-item.current a {
        background: #13569C;
    }

    .breadcrumb-counter-nav .breadcrumb-counter-nav-item a {
        display:none;
    }

    .breadcrumb-counter-nav .breadcrumb-counter-nav-item.current::after {
        display:none;
    }

    .breadcrumb-counter-nav .breadcrumb-counter-nav-item.current::before {
        background-color: #13569C;
        right: 0;
        padding: 9px 12px;
    }

    .breadcrumb-counter-nav .breadcrumb-counter-nav-item.current a {
        display:inline-block;
        padding: 12px 25px;
        padding-bottom: 9px;
    }
    
    .breadcrumb-counter-nav .breadcrumb-counter-nav-item::before {
        counter-increment: section;
        content: counter(section);
        background: #6D6E70;
        color: #fff;
        right: 0;
        display: inline-block;
        padding: 3px 12px;
    }
    
    .breadcrumb-counter-nav .breadcrumb-counter-nav-item.current::before {
        visibility: hidden !important;
        position: absolute;
    }
    
    .breadcrumb-counter-nav .breadcrumb-counter-nav-item {
        padding:0;
        padding-top: 10px;
        border:2px solid #fff;
    }
    .breadcrumb-counter-nav .breadcrumb-counter-nav-item.current{
        padding-top: 5px;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    .breadcrumb-counter-nav .breadcrumb-counter-nav-item:hover {
        background:#6D6E70;
    }
    .breadcrumb-counter-nav .breadcrumb-counter-nav-item.current:hover {
        background:#13569C;
    }
}

.spacer-24 {
    height: 24px;
}