/*@import "compass/css3";*/

/*$complete: #2ECC71;
$active: #3498DB;
$mute: #DFE3E4;*/

:root {
    --complete: #2ECC71;
    --active: #3498DB;
    --mute: #DFE3E4;
    --muteDark: 849397;
}

.progress2 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: table;
    table-layout: fixed;
    width: 100%;
    /*color: darken(var(--mute), 33%);*/
    color: var(--muteDark);
}

    .progress2 > li {
        position: relative;
        display: table-cell;
        text-align: center;
        font-size: 0.8em;
    }

    .progress2 > li:before {
        content: attr(data-step);
        display: block;
        margin: 0 auto;
        background: var(--mute);
        width: 3em;
        height: 3em;
        text-align: center;
        /*IE8 doesn't inherit this style margin-bottom: 0.25em;*/
        line-height: 3em;
        border-radius: 100%;
        position: relative;
        z-index: 1000;
    }

    .progress2 > li:after {
        content: '';
        position: absolute;
        display: block;
        background: var(--mute);
        width: 100%;
        height: 0.5em;
        top: 1.25em;
        left: 50%;
        margin-left: 1.5em\9;
        z-index: -1;
    }

    .progress2 > li:last-child:after {
        display: none;
    }

    .progress2 > li.is-complete {
        color: var(--complete);
    }

    .progress2 > li.is-complete:before, .progress2 > li.is-complete:after {
        color: #FFF;
        background: var(--complete);
    }

    .progress2 > li.is-active {
        color: var(--active);
    }

    .progress2 > li.is-active:before {
        color: #FFF;
        background: var(--active);
    }


/**
   * Needed for IE8
   */
.progress2__last:after {
    display: none !important;
}

/**
   * Size Extensions
   */
.progress2--medium {
    font-size: 1.5em;
}

.progress2--large {
    font-size: 2em;
}

/**
 * Some Generic Stylings
 */
*, *:after, *:before {
    box-sizing: border-box;
}

/*h1 {
    margin-bottom: 1.5em;
}*/

.progress2 {
    /*margin-bottom: 3em;*/
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

/*a {
    color: var(--active);
    text-decoration: none;
}
    .a:hover
{
    text-decoration: underline;
}*/


/*body {
    text-align: center;
    color: #444;
}*/