/* BARRA DI PROGRESSO */
ul.checkout-bar li {
    color: #ccc;
    position: relative;
    display: inline-block;
    margin: 30px auto 10px auto;
    text-align: center;
    min-width: 100px;
    padding: 0px 10px 0px 10px;
}
ul.checkout-bar li:before {
    -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    background: #ddd;
    border: 2px solid #FFF;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
    width: 34px;
    height: 34px;
    left: 33px;
    padding-left: 1px;
    line-height: 30px;
    position: absolute;
    top: -40px;
    z-index: 90;
}
ul.checkout-bar li.active {
    color: goldenrod;
    font-weight: bold;
}
ul.checkout-bar li.active:before {
    background: goldenrod;
}
ul.checkout-bar li.visited {
    color: darkblue;
    z-index: 70;
    background: none;
}
ul.checkout-bar li.visited:before {
    background: darkblue;
    z-index: 90;
}
ul.checkout-bar li:nth-child(1):before {
    content:"1";
}
ul.checkout-bar li:nth-child(2):before {
    content:"2";
}
ul.checkout-bar li:nth-child(3):before {
    content:"3";
}
ul.checkout-bar li:nth-child(4):before {
    content:"4";
}
ul.checkout-bar li:nth-child(5):before {
    content:"5";
}
ul.checkout-bar li:nth-child(6):before {
    content:"6";
}
ul.checkout-bar li:nth-child(7):before {
    content:"7";
}
ul.checkout-bar li:nth-child(8):before {
    content:"8";
}
ul.checkout-bar li:nth-child(9):before {
    content:"9";
}
ul.checkout-bar {
    -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    background-size: 35px 35px;
    background-color: #EcEcEc;
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
    border-radius: 15px;
    height: 15px;
    margin: 0px -15px 0px 0px;
    padding: 0;
    position: absolute;
}
ul.checkout-bar:before {
    background-size: 35px 35px;
    background-color: darkblue;
    -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    content:" ";
    height: 15px;
    left: 0;
    position: absolute;
    width: 50px;
}
ul.checkout-bar li.visited:after {
    background-size: 35px 35px;
    background-color: darkblue;
    -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    content:"";
    height: 15px;
    left: 53px;
    position: absolute;
    top: -30px;
    width: 100%;
    z-index: 80;
}
.checkout-bar li.active:after {
    background-size: 35px 35px;
    background-color: goldenrod;
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    content:"";
    height: 15px;
    width: 100%;
    left: 53px;
    position: absolute;
    top: -30px;
    z-index: 80;
}
.checkout-bar li.visited:last-child:after {
    width: 50%;
}
.checkout-bar li.active:last-child:after {
    width: 50%;
}