.float-left{
    position: relative;
    float: left;
}
.float-right{
    position: relative;
    float: right;
}
.container, .box{
    position: relative;
    top: 80px;
}

/* Progress Bar*/
.step-progress {
    position: relative;
    display: flex;
    cursor: pointer;
}
/* Background Track*/
.progress-track {
    position: absolute;
    top: 10px;
    width: 100%;
    height: 3px;
    background: rgba(100,100,100,0);
    background: -moz-linear-gradient(left, rgba(100,100,100,0) 0%, rgba(100,100,100,0.4) 10%, rgba(100,100,100,0.4) 11%, rgba(100,100,100,0.4) 90%, rgba(100,100,100,0) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(100,100,100,0)), color-stop(10%, rgba(100,100,100,0.4)), color-stop(11%, rgba(100,100,100,0.4)), color-stop(90%, rgba(100,100,100,0.4)), color-stop(100%, rgba(100,100,100,0)));
    background: -webkit-linear-gradient(left, rgba(100,100,100,0) 0%, rgba(100,100,100,0.4) 10%, rgba(100,100,100,0.4) 11%, rgba(100,100,100,0.4) 90%, rgba(100,100,100,0) 100%);
    background: -o-linear-gradient(left, rgba(100,100,100,0) 0%, rgba(100,100,100,0.4) 10%, rgba(100,100,100,0.4) 11%, rgba(100,100,100,0.4) 90%, rgba(100,100,100,0) 100%);
    background: -ms-linear-gradient(left, rgba(100,100,100,0) 0%, rgba(100,100,100,0.4) 10%, rgba(100,100,100,0.4) 11%, rgba(100,100,100,0.4) 90%, rgba(100,100,100,0) 100%);
    background: linear-gradient(to right, rgba(100,100,100,0) 0%, rgba(100,100,100,0.4) 10%, rgba(100,100,100,0.4) 11%, rgba(100,100,100,0.4) 90%, rgba(100,100,100,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
    opacity: 0.7;
    z-index: -1;
}

/*Each Step on the Progress Bar */
.progress-step {
    position: relative;
    width: 100%;
    font-size: 12px;
    text-align: center;
    bottom: 15px;
    color: #fff;
    cursor: pointer;
}

/* Hide the final step's progress bar*/
.progress-step:last-child:after {
    display: none;
}


/* Step's circle in default state */
.progress-step:before {
    content: "";
    border-radius: 100%;
    width: 50px;
    height: 50px;
    display: flex;
    margin: 0 auto;
    margin-bottom: 10px;
    animation: pulse 2s infinite;
    background-color: #33374B;
    color: #fff;
    cursor: pointer;
}

/* Step's progress bar in default state the highlighted bar*/
.progress-step:after {
    content: "";
    position: absolute;
    top: 25px;
    left: 50%;
    width: 0%;
    transition: width 1s ease-in;
    height: 3px;
    background: #dfe3e4;
    z-index: -1;
}

.number {
    font-size: 15pt;
    position: relative;
    bottom: 50px;
    left: 0;
    color: #fff;
}

.title {
    font-size: 12pt;
    position: relative;
    bottom: 45px;
    left: 0;
}

/* Step's active state*/
.progress-step.is-active:before{
    border: 4px solid #FF5F16;
}

.is-active span{
    color: #FF5F16;
}

.progress-step.is-active {
    color: #FF5F16;
}

.progress-step:before {
    border: 4px solid #6c6f7d;
    animation: pulse 2s infinite;
}


/* Step's complete state */
.progress-step .is-complete {
    color: #FF5F16;
}


/* Step's circle in complete state*/
.is-complete:before {
    font-size: 10px;
    color: #FF5F16;
    background: #FF5F16;
    border: 4px solid transparent;
}

/* Step's progress bar in complete state */
.is-complete:after {
    background: #FF5F16;
    animation: nextStep 1s;
    animation-fill-mode: forwards;
    color: #FF5F16;
}

.is-complete span{
    color: #fff;
}

/* Animations --------------------------------------
// Pulse animation for Step's circle in active state */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 95, 22, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 95, 22, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 95, 22, 0);
    }
}

/* Progressing to next step animation for Step's progress bar */
@keyframes nextStep {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}
.step5 .number{
    background:url(../img/finish_blanc.svg) no-repeat center / contain;
}
.step5.is-active .number{
    background:url(../img/finish_orange.svg) no-repeat center / contain;
}

.contenu{
    display:none;
}
.contenu.is-active{
    display:flex
}
p.mb-4.mde {
    text-align: justify;
    font-size: 1.5rem;
}
button.next {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}
button.back {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
}
.row.g-3.contenu.is-active.buttons {
    height: 7vh;
}
#smart_cadre
{
    position:relative;
    width:320px;
    height:600px;
    overflow:hidden;
    margin:auto;
    overflow:hidden;

}
#smart_content_wrapper
{
    overflow-x:hidden;
    overflow-y:scroll;
    position:absolute;
    top:0;
    width:320px;
    height:600px;


}
#smart_cadre .cadre_tel
{
    position:absolute;
    top:0;
    left:0;
}
#smart_content
{
    position:relative;
    width:320px;
    height:839px;

    background:url(../img/back_contact.jpg) no-repeat center / contain;
}
#smart_cadre
{
    position:relative;
    width:320px;
    height:600px;
    overflow:hidden;
    margin:auto;
    overflow:hidden;

}
#smart_cadre
{
    position:relative;
    width:320px;
    height:600px;
    overflow:hidden;
    margin:auto;
    overflow:hidden;

}
#smart_cadre .cadre_tel
{
    position:absolute;
    top:0;
    left:0;
}
#smart_content {
    width: 298px;
    height: 961px;
    background: url(../img/back_contact.jpg) no-repeat -5px -13px #2c2c2e;
    background-size: 102%;
    position: relative;
}
#tranche1
{
    width:320px;
    height:50px;
    position:absolute;
    top:0;
    left:0;
    background:url(../img/tranches_01.png) no-repeat center / contain;
    position:relative;
    z-index:9;
}
#tranche2
{
    width:27px;
    height:510px;
    position:absolute;
    top: 50px;
    left:0;
    background: url(../img/tranches_02.png) no-repeat center;
    z-index:9;
}
#smart_content_wrapper {
    overflow-x: hidden;
    overflow-y: scroll;
    position: absolute;
    top: 22px;
    left: 21px;
    width: 291px;
    height: 554px;
    display: inline-block;
    background: #2c2c2e;
}

#tranche3
{
    width:27px;
    height:510px;
    display:inline-block;
    background: url(../img/tranches_03.png) no-repeat center;
    position:absolute;
    top:50px;
    right:0;
    z-index:9;
}

#tranche4
{
    width:320px;
    height: 154px;
    display:block;
    background: url(../img/tranches_04.png) no-repeat center;
    position:absolute;
    bottom: -57px;
    left:0;
    z-index:9;
}
#contact_initiales
{
    position:absolute;
    left: -8px;
    top: 96px;
    width:100%;
    text-align:center;
    font-size: 60px;
    font-family:arial;
    color:#fff;
}
#contact_email_MAJ  {
    position:absolute;
    left: -8px;
    top: 252px;
    width:100%;
    text-align:center;
    font-size: 9px;
    font-family:arial;
    color:#fff;
}
#contact_nom_prenom {
    position:absolute;
    left: -8px;
    top: 261px;
    width:100%;
    text-align:center;
    font-size:23px;
    font-family:arial;
    color:#fff;
}
#contact_tel_pro      {
    position:absolute;
    left: 22px;
    top: 392px;
    font-size: 13px;
    font-family:arial;
    color: #2684fe;
}
#contact_tel_perso      {
    position:absolute;
    left: 22px;
    top: 440px;
    font-size: 13px;
    font-family:arial;
    color: #2684fe;
}
#contact_email      {
    position:absolute;
    left: 22px;
    top: 499px;
    font-size: 13px;
    font-family:arial;
    color: #2684fe;
}
#contact_site       {
    position:absolute;
    left: 22px;
    top: 561px;
    font-size: 13px;
    font-family:arial;
    color: #2684fe;
}
#contact_adr_pro    {
    position:absolute;
    left: 22px;
    top: 633px;
    font-size: 12px;
    font-family:arial;
    color:#fff;
    line-height: 0px;
}
#contact_adr_perso  {
    position:absolute;
    left: 22px;
    top: 703px;
    font-size: 12px;
    font-family:arial;
    color:#fff;
    line-height: 0;
}
#contact_anniv      {
    position:absolute;
    left: 22px;
    top: 793px;
    font-size: 13px;
    font-family:arial;
    color: #2684fe;
}

.pictos_cb
{
	margin-top:-3rem;
	width: 100%;
    text-align: center;
}
.pictos_cb img
{
	height: 48px;
}

.pictos_cb span
{
	width: 100%;
    text-align: center;
	display:block;
}
#payed:hover #amoutBtn {
    color: #ffe500 !important;
}