*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

html{
	font-size: 12px;
	font-family: 'Robot', sans-serif;
	color: #363636;
	background: #e6e2e3 url(../img/background_calculatrice.png) top left ;
}

#container{
	position: relative;
	background: #fff;
	width: 60vw;
	height: auto;
	margin: 0 auto;
	padding: 20px;
}
header, main{
	width: 100%;
	position: relative;
}
header ul.navItems{
	display: flex;
	justify-content: space-between;
	list-style: none;
	align-items: center;
	width: 100%;
}
.navItems li{
	flex: 1;
}
/* Style a appliquer uniquement pour internet explorer */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .navItems li.title{
    padding-top: 70px;
  }
  .navItems li:nth-child(3) {
        padding-top: 45px;
   }
  #formSimulation .formItems{
    justify-content: flex-start!important;
  }
  #formSimulation .formItems p, #formSimulation .formItems input{
    text-align: center;
  }
  .formItems{
    padding: 0 80px;
  }
}
.navItems li.title{
	flex: 2;
}
.navItems li img{
	display: block;
	max-width: 140px;
	height: auto;
	margin: 0 auto;
}
.navItems li:last-child img{
	display: block;
	margin: 0 auto;
}

.title{
	font-size: 20px;
	text-align: center;
	font-weight: bold;
}
h1.red{
	font-size:16px;
	color: #e20530;
	margin: 1.5em 0;
}
h2{
	text-align: center;
	color: #e20530;
	font-size: 1.8em;
	margin: 1.5em 0;
}
p{
	padding: .5em 0;
	line-height: 1.5em;
}

#simulerUnCredit{
	display: flex;
	flex-direction: column;
}
#etapesSouscription, #formSimulation{
	width: 100%;
	position: relative;
}
#etapesSouscription{
	order: 1;
}
#formSimulation{
	order: 2;
}
#etapesSouscription ul{
	display: flex;
	justify-content: space-between;
	list-style: none;
	align-items: center;
	width: 100%;
	margin:0 auto 10px;
}
#etapesSouscription ul li{
	flex: 1;
	padding-left: 80px;
	font-weight: bold;
	height: 50px;
}
#etapesSouscription ul li.PictoEtape{
	flex: 2;
}
#etapesSouscription ul li.nextStep{
	padding: 0;
	width: 55px;height: 55px;
	background-image: url(../img/pictos/chevron_jaune.png);
	background-size: 40%;
	background-repeat: no-repeat;
	background-position: center 0px;
}
#etapesSouscription ul li.PictoEtape#choixProduit{
	background: url(../img/pictos/doigt.png);
	background-size: auto 60%;
	background-repeat: no-repeat;
	background-position: 20px 5px;
}
#etapesSouscription ul li.PictoEtape#renseigneCb{
	background: url(../img/pictos/cb.png);
	background-size: auto 60%;
	background-repeat: no-repeat;
	background-position: 20px 5px;
}
#etapesSouscription ul li.PictoEtape#reponseImmediate{
	background: url(../img/pictos/dialogue.png);
	background-size: auto 60%;
	background-repeat: no-repeat;
	background-position: 20px 5px;
}
@media screen and (min-width: 1400px){
	#etapesSouscription ul{
		max-width: 80%;
	}
	#etapesSouscription ul li.PictoEtape#choixProduit, #etapesSouscription ul li.PictoEtape#renseigneCb, #etapesSouscription ul li.PictoEtape#reponseImmediate{
		background-position: 20px 0;
	}
}

@media screen and (max-width: 1200px){
	#etapesSouscription{
		order: 2;
	}
	#formSimulation{
		order: 1;
	}
	#etapesSouscription ul{
		flex-direction: column;
	}
	#etapesSouscription ul li{
		padding: 60px 0 0;
	}
	#etapesSouscription ul li.PictoEtape{
		/*flex: initial;*/
		margin-bottom: 20px;
	}
	#etapesSouscription ul li.PictoEtape#choixProduit{
		background: url(../img/pictos/doigt.png);
		background-size: auto 55%;
		background-repeat: no-repeat;
		background-position: top center;
	}
	#etapesSouscription ul li.PictoEtape#renseigneCb{
		background: url(../img/pictos/cb.png);
		background-size: auto 55%;
		background-repeat: no-repeat;
		background-position: top center;
	}
	#etapesSouscription ul li.PictoEtape#reponseImmediate{
		background: url(../img/pictos/dialogue.png);
		background-size: auto 55%;
		background-repeat: no-repeat;
		background-position: top center;
	}
	#etapesSouscription ul li.nextStep{
		flex: initial;
		background-image: url(../img/pictos/chevron_jaune.png);
		background-size: 60%;
		background-repeat: no-repeat;
		background-position: top center;
		transform: rotate(90deg);
	}

}
#formSimulation .formItems{
	display: flex;
	justify-content: center;
	list-style: none;
	width: 100%;
	margin-bottom: 30px;
	padding-top:30px;
  font-size: 2em;
  align-items: center;
}
#formSimulation .formItems p{
  display: flex;
  align-items: center;
}
#formSimulation .formItems p, #formSimulation .formItems input{
	flex: 1;
	max-width: 190px;
	padding: 0;
}
#formSimulation .formItems input{
	width: 130px;
	height: 30px;
	border-radius: 3px;
}
#formSimulation .formItems input#montantInput{
	border:1px solid #d3d1d2;
	text-align: center;
}
#btCalcul{
	background: #e20530;
	border: none;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	transition: background-color .2s ease-in-out;
	display: block;
	flex: 1;
	max-width: 190px;
	padding: 0px;
	width: 130px;
	height: 30px;
	border-radius: 3px;
	text-align: center;
}
#formSimulation .formItems input[name="valider"]:hover{
	background-color: #cf0028;
}
#montantInput{
	font-size: 20px;
	font-family: 'Robot', sans-serif;
	color: #363636;
}
#simulerUnCredit form{
	font-size: 2em;
}

#montantInput{
	margin: 0 5px;
	height: 35px;
}

.form-item{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
#details{
	margin: 13px auto;
	width: 70%;
}

#details p{
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #e20530;
	margin-bottom: 10px;
  font-size: 15px;
}
#details p:last-child{
	border: none;
}

#details p span:nth-child(2n){
	flex: auto;
	display: block;
	margin: 0 8px;
}
#details > p > span:nth-child(1){
  max-width: 70%;
}



footer{
	position: relative;
}
.mentions{
	font-size: 11px;
	font-weight: bold;
	padding: 20px 0;
	width: 80%;
	margin: 20px auto;
}

/* Responsive < 860px */ 
@media screen and (max-width: 860px){
  #container{
    width: 80%;
  }
  header ul.navItems{
    flex-direction: column;
  }
  .formItems p{
    display: flex;
    align-items: center;
    max-width: 50%!important;
    font-size: 0.8em;
  }
  .formItems p:last-child{
    width: 40%;
  }
  #formSimulation .formItems input{
    width: 100%;
  }
  #details{
    width: 100%;
  }
  #details > p > span:nth-child(1){
    max-width: 70%;
  }
}