:root {
	--background_1: #1f3649;
	--foreground_1: #A1D319;
	--selected_item: #219FBC;
}



body {
	min-width:320px; /* 100vw */
	background: #fff; /* linear-gradient(to right, var(--foreground_1), #A40356); */
	font-family: 'Gotham', sans-serif !important; 
	font-size: 16px;
	overflow-x: hidden;
}
body:before { content:" "; position:fixed; left:0px; top:0px; right:0px; height:25%; background:#5a002e; }

#error-message { position:fixed; top:auto; bottom:50px; left:20px; right:20px; transform:translateY(100%); width:auto; border-radius:15px; max-width:1000px; }
#error-message.active { }

.tip { background:var(--foreground_1) !important; color:#fff !important; font-size:12px !important; display:inline-block !important; }
.tip:after { color:#fff !important; }

main { /* width:1552px; */ width:100%; max-width:100%; box-shadow:none !important; /* background:transparent url('../img/bg-simulateur-lnc.jpg') no-repeat; */ background-size:cover !important; height:100%; margin:0px !important; background:#fff; max-width:1300px; margin-left:auto !important; margin-right:auto !important; max-height:600px; }
main .steps { background:transparent; }

main { max-height:500px; box-shadow:0px 2px 10px rgba(0,0,0,0.2) !important; border-radius:15px; margin-top:15px !important; width:auto; }
main[data-currentstep="pinel-4"] { max-height:600px; }

#menu-simulateur { display:none !important; }

#nav-simulateur { background:#fff; border-radius:0px 0px 15px 15px; }
#progress p { color:#fff !important; font-family:'Klavika-Light'; text-transform:uppercase; }
#progress ul.etapes { /* display:none; */ }
#progress ul.etapes { width:30%; }
#progress ul.etapes > li { flex:1; margin-right:10px; }
#progress ul.etapes > li:last-child { margin-right:0px; }
#nav-simulateur .btn-back { display:inline-block; position:relative; left:auto; bottom:auto; margin-right:10px; background:#ddd; color:#fff; }
main[data-step="0"] #nav-simulateur { display:block; /* padding-top:50px; */ height:70px; }
main[data-step="0"] #nav-simulateur .btn-continue { display:none; }
main[data-step="0"] #nav-simulateur .btn-back { display:none; }
main[data-typeSimulation="capaciteEpargne"] #progress ul.etapes > li:nth-child(5) { display:inline-block; }
main[data-step="0"] #progress ul.etapes > li:first-child { background:var(--foreground_1) !important; }

main[data-step="1"] #progress ul.etapes > li:nth-child(1),
main[data-step="1"] #progress ul.etapes > li:nth-child(2) { background:var(--foreground_1) !important; }

main[data-step="2"] #progress ul.etapes > li:nth-child(1),
main[data-step="2"] #progress ul.etapes > li:nth-child(2),
main[data-step="2"] #progress ul.etapes > li:nth-child(3) { background:var(--foreground_1) !important; }

main[data-step="3"] #progress ul.etapes > li:nth-child(1),
main[data-step="3"] #progress ul.etapes > li:nth-child(2),
main[data-step="3"] #progress ul.etapes > li:nth-child(3),
main[data-step="3"] #progress ul.etapes > li:nth-child(4) { background:var(--foreground_1) !important; }

main[data-step="4"] #progress ul.etapes > li:nth-child(1),
main[data-step="4"] #progress ul.etapes > li:nth-child(2),
main[data-step="4"] #progress ul.etapes > li:nth-child(3),
main[data-step="4"] #progress ul.etapes > li:nth-child(4),
main[data-step="4"] #progress ul.etapes > li:nth-child(5) { background:var(--foreground_1) !important; }

main[data-currentStep="coordonnees"] #progress ul.etapes > li:nth-child(1),
main[data-currentStep="coordonnees"] #progress ul.etapes > li:nth-child(2),
main[data-currentStep="coordonnees"] #progress ul.etapes > li:nth-child(3),
main[data-currentStep="coordonnees"] #progress ul.etapes > li:nth-child(4),
main[data-currentStep="coordonnees"] #progress ul.etapes > li:nth-child(5),
main[data-currentStep="coordonnees"] #progress ul.etapes > li:nth-child(6) { background:var(--foreground_1) !important; }


section h1 { font-family:'Klavika-Bold'; font-size:1.8vw; text-transform:normal; text-align:center; color:var(--foreground_1); margin-bottom:0px; }
section h1 sup { font-weight:normal; font-size:60%; }
section h2 { font-family:'Klavika-Light'; font-size:1.4vw; text-transform:normal; text-align:center; color:var(--foreground_1); }
section h4 { font-family:'Klavika-Bold'; font-size:2vw; text-transform:normal; text-align:center; color:var(--foreground_1); }

h1.top { position:absolute; top:15px; left:0px; right:0px; text-align:center; font-size:1vw; font-weight:bold; color:#777; transition:all 0.4s ease; transform:translateY(0); opacity:1; }
main[data-step="0"] h1.top { transform:translateY(-100%); opacity:0; }

.btn-ignorer { display:inline-block; height:40px; line-height:40px; padding:0px 20px; border-radius:20px; background:#ddd; color:var(--foreground_1) !important; text-decoration:none !important; }
.btn-continue, .btn-restart { background:var(--foreground_1) !important; color:#fff !important; font-family:'Klavika-Bold'; font-size:15px; }
.form-group .control-label { color:var(--foreground_1) !important; width:100%; text-align:center; }
.form-group .control { background:#fff !important; border:solid 1px #A40356 !important; border-radius:6px; max-width:300px; margin:auto; }
.form-group.error .control { border:solid 1px #ff0000 !important; }
.form-group .form-control { background:#fff !important; color:var(--foreground_1); text-align:left !important; }
.form-group .form-control::placeholder { color:#ddd !important; }
.form-group .input-group-addon { background:#fff !important; color:#A40356 !important; }
.form-group select.form-control option { color:#fff !important; }
.form-group select.form-control > option { color:var(--foreground_1) !important; }
.form-group#zoneDuflot .control { max-width:80%; height:auto; line-height:1em; border:none !important; }
.checkbox-container { display:inline-block; width:48%; margin-right:1%; height:60px; line-height:60px; } 
.form-group#zoneDuflot .control .checkbox-container:nth-child(even) { margin-right:0; margin-left:1%; }
.checkbox-container input { display:none; }
.checkbox-container input + label { display:inline-block; width:100px; height:50px; line-height:50px; text-align:center; border:solid 1px #A40356; color:var(--foreground_1) !important; border-radius:5px; margin-right:10px; }
.checkbox-container input:checked + label { background:var(--foreground_1); color:#fff !important; }
.checkbox-container p { display:inline-block; font-size:12px; color:#A40356; max-width:70%; vertical-align:middle; line-height:1.2em; }
.form-group.error .checkbox-container input + label { border:solid 1px #ff0000; }

#pinel-1 { padding-top:3vw; }
#pinel-1 h2 { margin-bottom:3vw; }
#pinel-1 .columns { height:auto; }
#pinel-1 .columns > .column { padding-top:1%; }
#pinel-1 .columns > .column:first-child { border-right: dashed 2px #fff; }
#pinel-1 .form-group { max-width:300px; }
#pinel-1 .control-label { margin-bottom:1vw; }
#coordonnees #optout { max-width:800px; overflow:hidden; }
#coordonnees #optout label { text-align:right; float:right; color:#888; font-size:14px; }
#coordonnees .form-group .control-label { display:none; }
#coordonnees .form-group .control { max-width:none; }
#coordonnees .columns.coordonnees-2 > .column:first-child { max-width:31.333333333%; }
#pinel-2 h1,
#pinel-3 h1,
#pinel-5 h1,
#pinel-6 h1 { margin-bottom:3vw; margin-top:2vw; }
#coordonnees h1 { margin-bottom:30px; margin-top:0; }
#coordonnees .mentions { text-align:center; color:#888; }
#pinel-4 h1 { margin-bottom:0; }
section#pinel-4 { padding:3% 0; }
section#pinel-4 h2 { margin-bottom:3vw; }
section#pinel-4 > .columns
section#pinel-4 > .form-group { margin-left:10%; margin-right:10%; }

#pinel-1 .columns > .column.separator { max-width:40px; }
#pinel-1 h4 { position:relative; margin:auto; height:150px; line-height:150px; }
#pinel-1 h4:before { content:" "; position:absolute; left:50%; top:0; width:1px; height:100%; border-left:dashed 2px var(--foreground_1); z-index:-1; }
#pinel-1 h4:after { /* content:" "; position:absolute; left:50%; top:0; width:1px; height:3vw; border-left:dashed 2px var(--foreground_1); */ }
#pinel-1 h4 span { background:var(--foreground_1); color:#fff; display:inline-block; width:40px; height:40px; line-height:40px; border-radius:20px; font-size:1vw; z-index:2; vertical-align:middle; }

#resultat #general .columns > .column { background:#f8f8f8; border-radius:10px; }
#resultat #general .columns > .column span { color:#A40356; }
#resultat .content .content-tabs > li a { color:#A40356 !important; }
#resultat .content .content-tabs > li.active a { background:#A40356 !important; color:#fff !important; }
#resultat #financement { background:transparent !important; color:#000 !important; }
#resultat #rendement .result { background:#f8f8f8 !important; border-radius:10px; margin-bottom:30px;  }
#resultat #rendement .result .result-value { color:#A40356 !important; }
#resultat #rendement .mentions { color:#000 !important; max-width:800px; margin-left:auto; margin-right:auto; text-align:justify; }
ul.chart-legend { }
ul.chart-legend > li { color:#000; }
ul.chart-legend > li > strong { display:inline-block; width:30px; text-align:right; margin-right:5px; }
ul.synthese { width:700px; max-width:100%; margin:auto; }
ul.synthese > li { background:#fff !important; border-bottom:solid 1px #A40356; }
ul.synthese > li span { color:#A40356 !important; }
#resultat ul.buttons { position:absolute; bottom:0px; left:30px; right:30px; text-align:center; }
#resultat ul.buttons > li:first-child { float:none; }
main.simulateur-pinel[data-currentStep="pinel-5"] #nav-simulateur a.btn-continue { display:none; }
main.simulateur-pinel[data-currentStep="pinel-5"] #nav-simulateur [type="submit"] { display:inline-block; }

/****** Simulateurs / Message de confirmation - calcul off ******/
#resultat .content.confirmation { padding:10% 15%; height:100%; border-radius:10px; background:#f8f8f8; }
#resultat .content.confirmation h2 { font-size:2.5vw; margin-bottom:30px; text-align:left; }
#resultat .content.confirmation p { font-size:16px; }
main[data-step="resultats"] section#resultat { height:auto; padding:15px 30px; }
main[data-step="resultats"] #nav-simulateur { display:none; }
main[data-step="resultats"] #progress ul.etapes > li { background:var(--foreground_1) !important; }
main[data-step="resultats"] h1.top { display:none; }


@media (min-width: 641px) { 
	
		.mobile { display:none !important; }
		
		section .columns { max-width:900px; margin-left:auto; margin-right:auto; }
		#pinel-4 h1 { margin-top:30px; }
		
		.btn-ignorer { position:absolute; top:20px; right:20px; }
	
}

@media (max-width: 640px) { 
		
		.desktop { display:none !important; }
		body:before { content:" "; position:fixed; left:0px; top:0px; right:0px; height:20%; background:#5a002e; }
		
		#error-message { border-radius:15px; }
		
		main { /* background:transparent url('../img/bg-simulateur-lnc.mobile.jpg') no-repeat; */ max-height:600px; box-shadow:0px 2px 10px rgba(0,0,0,0.2) !important; border-radius:15px; margin:15px !important; width:auto; }
		main[data-currentstep="pinel-4"] { max-height:700px; }
		main section { height:100%; }
		
		h1.top { position:absolute; top:15px; left:0px; right:0px; text-align:center; font-size:3vw; font-weight:bold; color:#777; transition:all 0.4s ease; transform:translateY(0); opacity:1; }
		main[data-step="0"] h1.top { transform:translateY(-100%); opacity:0; }
		
		#progress ul.etapes { width:70%; }
		
		section h1 { font-size:7vw !important; }
		section h2 { font-size:5vw !important; }
		section h4 { font-size:6vw !important; }
		
		#pinel-1 { padding-top:10vw !important; }
		#pinel-1 h2 { margin-bottom:10vw !important; }
		#pinel-1 .columns { flex-direction:column; }
		#pinel-1 .columns > .column { display:block !important; margin-bottom:5vw; border:none; border:none !important; }
		#pinel-1 .columns > .column:last-child { /* padding-top:5vw; */ }
		#pinel-1 .form-group { margin-bottom:2vw; }
		
		#pinel-1 .columns > .column.separator { max-width:none; }
		#pinel-1 h4 { position:relative; max-width:300px; margin:auto; height:auto; line-height:1; }
		#pinel-1 h4:before { content:" "; position:absolute; left:0px; top:50%; width:40%; border-top:dashed 2px var(--foreground_1); border-left:none; height:1px; }
		#pinel-1 h4:after { content:" "; position:absolute; right:0px; top:50%; width:40%; border-top:dashed 2px var(--foreground_1); }
		#pinel-1 h4 span { background:var(--foreground_1); color:#fff; display:inline-block; width:50px; height:50px; line-height:50px; border-radius:25px; font-size:5vw; }
		
		.form-group .control-label { font-size:3.8vw; margin-bottom:10px; }
		
		#pinel-2 h1,
		#pinel-3 h1,
		#pinel-4 h1,
		#pinel-5 h1 { margin-top:12vw; font-size:6vw !important; margin-bottom:10vw; }
		#pinel-5 h1 { margin-bottom:5vw; }
		#pinel-5 .btn-ignorer {margin-bottom:3vw; }
		#pinel-4 h1 { margin-bottom:2vw; }
		#pinel-4 h2 { font-size:4.5vw !important; max-width:70%; margin:0 auto 10vw auto; }
		#pinel-2 .form-group,
		#pinel-3 .form-group { margin-bottom:10vw; }
		
		.form-group#zoneDuflot .control { max-width:90%; }
		.checkbox-container { display:flex; width:100%; height:45px; line-height:45px; margin:0 !important; }
		.checkbox-container input + label { flex:1; width:60px; height:40px; line-height:40px; max-width:60px; }
		.checkbox-container p { flex:1; font-size:10px; max-width:none; }
		.checkbox-container p > span { display:inline-block; vertical-align:middle; }
		
		.form-control { background:#fff !important; }
		#coordonnees #optout { margin-top:10px; }
		#coordonnees #optout [type="checkbox"] { top:auto; bottom:7px; }
		#coordonnees #optout label { font-size:10.5px; text-align:left; }
		#coordonnees .columns.coordonnees-2 > .column:first-child { max-width:none; }
		
		#resultat .content { height:100%; }
		#resultat .content .content-viewer { height:calc(100% - 80px); padding-bottom:0; }
		#resultat ul.buttons { bottom:20px; }
		ul.synthese > li { display:block; width:100%; margin-left:0px !important; margin-right:0px !important; }
		#resultat #general .columns { flex-direction:column; }
		#resultat #general .columns > .column { margin:0px 0px 10px 0px !important; }
		
		/****** Simulateurs / Message de confirmation - calcul off ******/
		main[data-step="resultats"] { max-height:500px; }
		main[data-step="resultats"] section#resultat { padding:4vw; }
		#resultat .content.confirmation { padding:15vw 5vw 5vw 5vw; }
		#resultat .content.confirmation h2 { font-size:6.5vw !important; }
		#resultat .content.confirmation p { font-size:3.5vw; }
		
}


/****** Version Sully Immobilier - ToDo: clean css + simulateurs-sully.css ******/

html { overflow:hidden; }
body:before { display:none; }
body.from-site main { box-shadow:none !important; }
section h1 { color:#A1D319 !important; }
section h2 { color:#aaa !important; }
.tip  { background:#A1D319 !important; }
.form-group .control-label { color:#232323 !important; }
.form-group .control { border:solid 1px #ccc !important; }
.form-group .input-group-addon { color:#A1D319 !important; }
.btn-continue, .btn-restart { background:#A1D319 !important; }
#error-message { /* bottom:15px; */ bottom:0px; max-width:none; border-radius:10px 10px 0 0; }
#pinel-2, #pinel-3, #pinel-4, #pinel-5 { padding:4% 5%; }
h1.top { top:40px; }
.form-group#zoneDuflot .control-label { margin-bottom:5px; }
.form-group#zoneDuflot .control { text-align:center; }
.form-group#zoneDuflot .control .checkbox-container { width:100px; vertical-align:top; margin:0 10px 0 0 !important; }
.form-group#zoneDuflot .control .checkbox-container p { display:none; }
.form-group#zoneDuflot .control .checkbox-container input + label { height:40px; line-height:40px; border:solid 1px #ccc; /* var(--foreground_1); */ }
.form-group.error .control-label { color:#ff0000 !important; }
.btn-ignorer { color:#fff !important; background:#aaa !important; }
#coordonnees #optout { margin:10px auto 0 auto; }
.form-group .form-control { color:#121212 !important; }
#resultat .content .content-tabs { margin-bottom:30px; }
#resultat .content .content-viewer { padding-bottom:26%; }
#resultat ul.buttons { bottom:30px; }
#resultat .content .content-tabs > li a { color:var(--foreground_1) !important; }
#resultat .content .content-tabs > li.active a { background:var(--foreground_1) !important; }
#resultat #rendement .result .result-value { color:var(--foreground_1) !important; } 
#resultat #general .columns > .column span { color:var(--foreground_1) !important; } 
ul.synthese > li { border-bottom:solid 1px var(--foreground_1) !important; }
ul.synthese > li span { color:var(--foreground_1) !important; }

main.simulateur-ptz h1.top { top:15px; }
main.simulateur-ptz[data-currentStep="ptz-2"] h1.top { top:40px; }
main.simulateur-ptz[data-currentStep="coordonnees"] h1.top { top:40px; }
#nav-simulateur .btn-back { height:40px; line-height:40px; width:40px; }
main.simulateur-ptz[data-step="0"] #nav-simulateur { display:block; height:100px; }
main.simulateur-ptz[data-step="0"] #nav-simulateur .btn-continue { display:inline-block; }
main.simulateur-ptz[data-step="0"] #nav-simulateur [type="submit"] { display:none; }
main.simulateur-ptz[data-currentStep="ptz-1"] #nav-simulateur { display:block; height:100px; }
main.simulateur-ptz[data-currentStep="ptz-2"] #nav-simulateur { display:block; height:100px; }
main.simulateur-ptz[data-currentStep="ptz-2"] #nav-simulateur a.btn-continue { display:none; }
main.simulateur-ptz[data-currentStep="ptz-2"] #nav-simulateur [type="submit"] { display:inline-block; }
main.simulateur-ptz[data-currentStep="coordonnees"] #nav-simulateur { display:block; }
main.simulateur-ptz[data-currentStep="coordonnees"] #nav-simulateur a.btn-continue { display:none; }
main.simulateur-ptz[data-currentStep="coordonnees"] #nav-simulateur [type="submit"] { display:inline-block; }
#ptz-1, #ptz-2 { padding:4% 5%; }
main.simulateur-ptz #resultat { padding:3% 5% !important; }
.form-group#primoAccedant .control { border:none !important; text-align:center; }
.form-group#primoAccedant .control > span { height: 24px;
    line-height: 24px;
    padding: 0px 10px;
    cursor: pointer;
    vertical-align: top;
    display: inline-block; }
[name="primoAccedant"] { position:relative; width:56px; height:24px; transition: all 0.3s ease; margin: 0px !important; }
[name="primoAccedant"]:before {
    content: " ";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 56px;
    height: 24px;
    border-radius: 12px;
  background: #eee; }
[name="primoAccedant"]:after {
    content: " ";
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--foreground_1);
    right: 2px;
    top: 2px;
    border-radius: 10px;
  transition: all 0.3s ease; }
[name="primoAccedant"]:checked:after {
    left: 2px;
  right: auto; }
  
#ptz-1 .columns { margin-top:40px; margin-bottom:20px; }
#ptz-2 .columns { margin-top:40px; }
.form-group#zoneDuflot .control .checkbox-container input + label:hover { background:#eee; }
.form-group#zoneDuflot .control .checkbox-container input:checked + label:hover { background:var(--foreground_1); }
main.simulateur-ptz[data-step="resultats"] #resultat p.confirmation.error { margin-top:40px; }

@media (max-width: 767px) {
	
		#ptz-1 { padding-top:10vw !important; }
		#ptz-1, #ptz-2, #ptz-3 { /* padding-top:10vw !important; */ }
		#ptz-1 .columns, #ptz-2 .columns, #ptz-3 .columns { flex-direction:column; }
		#ptz-2 h1, #ptz-3 h1 { margin-top:12vw; font-size:6vw !important; margin-bottom:10vw; }
		#ptz-1 .form-group, #ptz-2 .form-group, #ptz-3 .form-group { margin-bottom:10vw; }
		
		main.simulateur-ptz[data-step="resultats"] #resultat { padding:4% 5% !important; }
		main.simulateur-ptz[data-step="resultats"] #resultat h1 { margin-top:12vw; font-size:6vw !important; margin-bottom:10vw; }
		main.simulateur-ptz[data-step="resultats"] h1.top { top:40px; }
		main.simulateur-ptz #resultat h1 { }
		

		
}


.btn-continue, .btn-restart { background:#ddd !important; color:#888 !important; height:42px; line-height:42px; border-radius:21px; border:solid 1px #ddd; text-transform:none; transition:all 0.3s ease; }
.btn-continue:hover, .btn-restart:hover { background:#fff !important; color:#A1D319 !important; border:solid 1px #A1D319; }
.btn-arrow { position:relative; background:#A1D319 !important; color:#fff !important; padding:0 15px 0 20px; border:solid 1px #A1D319; text-transform:uppercase; letter-spacing:1px; transition:all 0.3s ease; }
.btn-arrow:after { 
		content: "\f054";
    font-family: "Font Awesome 5 Pro";
    width: 35px;
    height: 18px;
    top: 50%;
    right: 0;
    text-align: left;
  	/* position: absolute;
		-webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); */
    padding-left: 10px;
    border-left: 2px solid #fff;
    margin-top:12px;
    margin-left:10px;
}
.btn-arrow:hover { background:#fff !important; color:#A1D319 !important; border:solid 1px #A1D319; }
.btn-arrow:hover:after { color:#A1D319; }