.steps {
	width: 100%;
    text-align: center;
}

.steps div.step {
	display:inline-block;
    position: relative;
    margin-left: -40px;
    width: 220px;
    height: 50px;
    font-size: 16px;
    padding-left: 0px;
    padding-top: 0px;
    background-repeat: no-repeat;
    outline: none;
    color: #fff;
    font-weight: bold;
    background-size: 220px 50px;
}

.steps div.step1 {
    background-image: url("./etape1.png");
    margin-left: 0px;
    width: 190px;
    background-size: 190px 50px;
}

.steps div.step2 {
    background-image: url("./etape2_gray.png");
}

.steps div.step3 {
    background-image: url("./etape3_gray.png");
}

.steps div.step4 {
    background-image: url("./etape4_gray.png");
    margin-left: -35px;
}

.steps div.step5 {
    background-image: url("./etape5_gray.png");
    margin-left: -30px;
}

.steps div.step2.stepActivated {
    background-image: url("./etape2.png");
}

.steps div.step3.stepActivated {
    background-image: url("./etape3.png");
}

.steps div.step4.stepActivated {
    background-image: url("./etape4.png");
    margin-left: -35px;
}

.steps div.step5.stepActivated {
    background-image: url("./etape5.png");
    margin-left: -30px;
}

.steps div div {
    margin-left: 100px;
    margin-top: 10px;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
}

.steps div.step1 div {
    margin-left: 70px;
}

.steps div.step4 div {
    margin-left: 65px;
}

.steps div.step5 div {
    margin-left: 60px;
}


.steps div.step p{
    position: absolute;
    margin: 0.8em 0 .2em 0;
}

.steps div.step1 p, .steps div.step2 p{
    left: 45%;
    
}

.steps div.step3 p, .steps div.step4 p{
    left: 55%;
    
}

.steps div.step2 p{
    margin: 0.2em 0 .2em 0;
    word-wrap: break-word;
    left: 48%;
    width: 105px;
}