.calc_box{
	float: left;
	width: 475px;
	min-height: 310px;
	margin: 20px 0 0 20px;
	box-shadow: 0px 0px 3px 0px rgba( 0, 0, 0, 0.6 );
	border-radius: 10px;	
	background-image: -ms-linear-gradient(bottom, #E5E5E5 0%, #F3F3F3 100%);
	background-image: -moz-linear-gradient(bottom, #E5E5E5 0%, #F3F3F3 100%);
	background-image: -o-linear-gradient(bottom, #E5E5E5 0%, #F3F3F3 100%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #E5E5E5), color-stop(1, #F3F3F3));
	background-image: -webkit-linear-gradient(bottom, #E5E5E5 0%, #F3F3F3 100%);
	background-image: linear-gradient(to top, #E5E5E5 0%, #F3F3F3 100%);
}



/* .calc_box:nth-child(odd){ margin-left: 0 } */
/* .calc_box:nth-of-type(1), .calc_box:nth-of-type(3), .calc_box:nth-of-type(4), .calc_box:nth-of-type(5){ margin-left: 0 } */
/* hikaru */
.rntxt{
	color: #613D6B;
	padding: 0px 20px;
	}
	
.calc_box_full{ width: 100%; margin-left: 0 }

.step2, .step3{ display: none }

#box1{ /*height: 120px;*/ min-height: 120px; }
#box2, #box5{ margin-left: 0 }

.calc_box_header{
	color: white;
	height: 37px;
	line-height: 37px;
	border-radius: 10px 10px 0 0;
	text-indent: 15px;	
	font-size: 15px;
	text-transform: uppercase;
	background: #4D146B;
	background-image: -ms-linear-gradient(bottom, #4D146B 0%, #A96EB8 100%);
	background-image: -moz-linear-gradient(bottom, #4D146B 0%, #A96EB8 100%);
	background-image: -o-linear-gradient(bottom, #4D146B 0%, #A96EB8 100%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #4D146B), color-stop(1, #A96EB8));
	background-image: -webkit-linear-gradient(bottom, #4D146B 0%, #A96EB8 100%);
	background-image: linear-gradient(to top, #4D146B 0%, #A96EB8 100%);
}
.calc_box_header span{ color: #f19e0d; font-weight: bold; font-size: 18px }

.calc_box_content > div{ margin: 8px;  }

.calc_box_content label{
	display: inline-block;
	width: 125px;
	margin-right: 15px;
	text-align: right;
	color: #220c2c;
	font-size: 14px;
	font-weight: bold;
	vertical-align: middle;
}
.calc_box_content input[type=text]{
	outline: none;
	width: 230px;
	/*height: 26px;*/
	border: 1px solid #d2d2d2;
	border-radius: 5px;
	box-shadow: 1px 1px 1px 0px white;
	text-indent: 10px;
	font-size: 12px;
}
.calc_box_content input[type=text]:focus{ border-color: #f19e0d }
.calc_box_content span.requis{ font-size: 15px }
.calc_box_content select{ width: 230px }

.toggle{ display: inline-block; margin-top: 32px !important }
.toggle label:first-child{ width: 215px; text-transform: uppercase }
.toggle > div{ 
	display: inline-block;
	vertical-align: middle;
	width: 63px;
	height: 26px;
	background: url(images/slider_bg_mini.png) left top;
}
.toggle .ui-slider.ui-widget-content{
	margin: auto;
	width: 38px;
	height: 26px;
	border: none;
	background: none;
}
.toggle .ui-slider .ui-slider-handle{ margin: -2px 0 0 -18px } /* hikaru */

.toggle label.slider_value{ width: 60px; color: #f19e0d; margin-right: 7px; text-shadow: 1px 1px 0 #fff; cursor: pointer }
.toggle div + label.slider_value{ text-align: left; margin-left: 7px }

.slider{ 
	display: inline-block;
	vertical-align: top;
	margin: 8px 24px;
	width: 139px;
}
#box2 .slider:first-child{ /*margin-left: 89px*/ }
.ui-slider .ui-slider-handle{
	width: 36px;
	height: 36px;
	background: url(images/slider_handle.png);
	border: none !important;
	margin-left: -5px;
	margin-bottom: -22px;
	cursor: pointer;
	font-size: 0px; /* hikaru */
}
.slider .ui-slider.ui-widget-content{
	margin: auto;
	width: 26px;
	height: 200px;
	background: url(images/slider_bg_vertical.png) left top;
	border: none;
}
.slider .ui-slider .ui-slider-range{
	background: url(images/slider_bg_vertical.png) right bottom;	
}

.slider label{ width: 100%; margin: 0 0 10px; font-size: 12px; text-align: center; height: 20px; }
.slider span{ display: block; font-size: 15px; font-weight: bold; color: #f19e0d; text-align: center; margin-top: 10px; text-shadow: 1px 1px 0 #fff }
.slider span:after{ content: ' €'; color: black }
.slider #slider_duree + span:after{ content: ' ans'; font-size: 13px }
.slider em{ font-style: normal; font-size: 13px; color: black }

#taux_endettement{ margin: 25px 0 0 25px }
#taux_endettement label{ width: auto; vertical-align: top; margin-top: 12px }
#taux_endettement > div{
	display: inline-block;
	width: 702px;
	height: 61px;
	background: url(images/endettement.png);
}
#taux_endettement > div > div{
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 15px;
}
#taux_endettement span{
	display: block;
	position: absolute;
	left: 33.6%;
	top: -22px;
	width: 36px;
	height: 39px;
	margin-left: -18px;
	background: url(images/cursor.png);
}

#tableau{ display: inline-block; vertical-align: top; margin: 70px 0 0 70px }
.calc_box table{ border-collapse: collapse; width: 400px }
.calc_box table th, .calc_box table td{ padding: 6px }
.calc_box table th{ background: #f19e0d; color: white; text-transform: uppercase }
.calc_box table tr td:nth-child(2){ width: 30%; text-align: right }
.calc_box table tr:nth-child(odd) td:nth-child(1), .calc_box table tr:nth-child(even) td:nth-child(2){ background: #d7d7d7 }
.calc_box table tr:nth-child(odd) td:nth-child(2), .calc_box table tr:nth-child(even) td:nth-child(1){ background: white }

#maison{
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 219px;
	height: 257px;
	background: url(images/maison.png?23) left top;
	margin: 50px 0 0 150px
}
#maison:before{
	position: absolute;
	content: 'Répartition des fonds';
	width: 100%;
	top: -30px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	font-size: 14px;
}
#maison div#fonds, #maison div#hypotheque, #maison div#fonds_propres{
	display: table;
	position: absolute;
	z-index: 3;
	width: 100%;
	height: 100%;
	left: 0;
	bottom: 0;
	background: url(images/maison.png) -219px bottom
}
#maison div#hypotheque{ bottom: auto; top: 0; background: none; z-index: 3 }
#maison div#fonds_propres{ background-position: -657px bottom; z-index: 2 }
#maison div#fonds span, #maison div#hypotheque > span{
	display: table-cell;
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	font-size: 20px;
	font-weight: bold;
	padding-bottom: 16px;
	color: white;
}
#maison div#hypotheque > span{ padding: 15px 50px 0; color: #220c2c; font-size: 12px; text-transform: uppercase }
#maison div#hypotheque span span{ display: block; font-size: 28px; color: #f19e0d; margin-top: 10px }
#maison div#fonds_text{
	position: absolute;
	left: 220px;
	bottom: 20px;
	width: 130px;
	font-size: 10px;
	text-transform: uppercase;
	color: #220c2c;
	text-align: center;
}
#maison div#fonds_text span{
	display: block;
	font-size: 20px;
	font-weight: bold;
	color: #7E9D00;
}
#maison div#fonds_propres:before, #maison div#fonds_propres:after, #maison div#fonds_propres span{
	display: block;
	content: '';
	position: absolute;
	left: -15px;
	top: 0;
	width: 20px;
	border-bottom: 1px solid #777;
}
#maison div#fonds_propres:before{ 
	content: 'Fonds propres mini'; 
	text-transform: uppercase; 
	top: -5px; 
	left: -142px;
	width: 120px;
	text-align: right;
	color: #777;
	border: none;
	font-size: 10px;
}
#maison div#fonds_propres span{
	top: 7px; 
	left: -142px;
	width: 120px;
	text-align: right;
	color: #777;
	border: none;
	font-size: 20px;
	font-weight: bold;
}

#cylindre_endettement{
	position: relative;
	display: inline-block;
	width: 200px;
	height: 245px;
	margin: 50px 0 0 250px;
	background: url(images/endettement_bg/cylindre_1.png) no-repeat center center;
}
#cylindre_endettement:before{
	position: absolute;
	content: 'Calcul d\'endettement';
	width: 100%;
	top: -30px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	font-size: 14px;
}
#cylindre_endettement div{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	color: white;
	line-height: 185px;
	text-shadow: 1px 1px 0 rgba(0,0,0,.5);
}
#cylindre_endettement div:before, #cylindre_endettement div:after{
	display: block;
	content: '';
	position: absolute;
	right: 4px;
	bottom: 80px;
	width: 20px;
	border-bottom: 1px solid #777;
}
#cylindre_endettement div:before{ 
	content: 'Endettement maximal'; 
	text-transform: uppercase; 
	bottom: 75px; 
	right: -133px;
	width: 130px;
	text-align: left;
	color: #777;
	border: none;
	font-size: 10px;
	text-shadow: none;
	line-height: normal;
	font-weight: normal;
}


.box_rappel label{ display: block; width: auto; text-align: left }
.box_rappel textarea{ 
	outline: none;
	width: 97%;
	height: 100px;
	border: 1px solid #d2d2d2;
	border-radius: 5px;
	box-shadow: 1px 1px 1px 0px white;
	padding: 5px;
	font-size: 12px;
	margin-top: 5px;
}

.box_confirmation{ min-height: 200px }
.box_confirmation .calc_box_content > div{ text-align: center; margin-top: 50px }

.results_boxes{ font-size: 0 }  
.results_boxes li{ display: inline-block; width: 25%; height: 65px; margin: 0 !important; padding-top: 10px; font-size: 11px; color: white; text-align: center; vertical-align: top }
.results_boxes li:nth-of-type(1){ background: #4ca6cc }
.results_boxes li:nth-of-type(2){ background: #b2d710 }
.results_boxes li:nth-of-type(3){ background: #a66cb6 }
.results_boxes li:nth-of-type(4){ background: #f19e0d }
.results_boxes li span{ display: block; font-weight: bold; font-size: 18px; /*margin-top: 15px;*/ white-space: nowrap }

.box_rappel .submit{ text-align: center }
.box_rappel input[type="submit"], .next button, .prev button, button.calcul, #renegociation input[type="submit"]{
	outline: none;
	display: inline-block;
	cursor: pointer;
	padding: 10px 35px;
	box-shadow: 1px 1px 0 #8eab8e;
	border-radius: 3px;
	color: white;
	background: #b2d711;
	text-shadow: 1px 1px 0 #8eab8e;
	border: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: larger;
	margin-top: 20px;
}

.pop{
	outline: none;
	display: inline-block;
	cursor: pointer;
	box-shadow: 1px 1px 0 #8eab8e;
	border-radius: 3px;
	color: white;
	background: #b2d711;
	text-shadow: 1px 1px 0 #8eab8e;
	border: none;
	letter-spacing: 1px;
	font-size: 9px;
}

.box_rappel input[type="submit"]:hover, .next button:hover, .prev button:hover, button.calcul:hover, #renegociation input[type="submit"]:hover{
	background: #DC7F00;
	-webkit-transition: all 150ms cubic-bezier(0.42, 0, 0.58, 1);
	-moz-transition: all 150ms cubic-bezier(0.42, 0, 0.58, 1);
	-o-transition: all 150ms cubic-bezier(0.42, 0, 0.58, 1);
	transition: all 150ms cubic-bezier(0.42, 0, 0.58, 1);
}

#situation_pret{ 
	float: left;
	width: 100%;
	margin-top: 20px;
	list-style: none; 
	font-size: 0; 
	font-weight: bold; 
	color: #666; 
	text-transform: uppercase;
	text-align: center;
}
#situation_pret li{ display: inline-block; width: 50%; font-size: 20px; margin: 0 }
#montant_financement2{ margin-left: 20px }
#ok, #not_ok, #need_contact{ display: none; color: #b2d710 }
#not_ok{ color: #cc0033 }
#need_contact{ color: #f19e0d; font-size: 18px }

.next{ text-align: center; margin: 40px 20px 20px !important }

/* = Renégociation
----------------------------------------- */
#renegociation .calc_box_content{ height: 340px }

#renegociation #box1{ min-height: 450px; margin-left: 0 }
#renegociation #box1 .calc_box_content{ margin-top: 20px;
margin-bottom: 43px }

#renegociation #box2{ height: auto; margin-left: 20px }
#renegociation #box2 .calc_box_content label{ width: 150px; text-align: left; margin-left: 15px; margin-right: 0 }
#renegociation #box2 .calc_box_content div i{ display: block; margin-left: 15px; font-style: normal; font-size: 11px; }
#renegociation_infos{ color: #a66cb6; margin: 30px 0 0 23px; font-weight: bold }
#nm, #gt{ display: inline-block; width: 285px; height: 17px; text-align: right; color: #a66cb6; font-weight: bold; font-size: 16px; margin-top: 20px } 
#gt{ height: 40px; margin-top: 0; color: #57A027; font-size: 35px; }
#gt.error{ color: #ff0000 }

#renegociation span.devise{ color: #a66cb6; font-weight: bold; font-size: 15px }
#renegociation .toggle{ margin-top: 8px !important }
#renegociation .toggle label:first-child{ width: 125px; text-transform: none }
#renegociation .toggle label.slider_value{ width: 60px }
#renegociation .calc_box_content label{ vertical-align: middle }
#renegociation .slider{ width: auto }
#renegociation .slider label{
	margin: 0 15px 0 0;
	font-size: 14px;
	text-align: right;
}
#renegociation .slider #slider_duree_restante.ui-slider.ui-widget-content{
	display: inline-block;
	vertical-align: middle;
	background: url(images/small_slider_bg.png) left top;
	width: 320px;
	height: 26px;
	margin-left: 15px;
}
#renegociation .slider #slider_duree_restante.ui-slider .ui-slider-range{ background: url(images/slider_bg.png) left bottom }
#renegociation #slider_duree_restante.ui-slider .ui-slider-handle{ margin-bottom: 0; margin-left: -18px }
#renegociation .slider span{ display: inline-block; vertical-align: middle; margin: 0 0 0 10px }
#renegociation .slider #slider_duree_restante + span:after{ display: none; /* content: ' ans'; font-size: 13px */ }
#renegociation .slider #slider_duree_restante + span i{ display: inline; font-size: 13px; color: black; margin: 0 }
button.calcul, #renegociation input[type="submit"]{ margin: 10px auto 20px; display: block !important }
button.calcul{ margin-top: 25px }

.ui-slider-handle i {
    font-size: 0px!important 
}

@media screen and (max-width:639px) {
.calc_box{
	width: 100%;
	margin: 20px 0 0 0px;	
}
.slider {
    width: 26%;
}
.slider label {
    height: 50px;
}
.results_boxes li {
	height: 100px
}
.results_boxes li span {
    font-size: 12px;
}
#renegociation #box2 {
	margin-left: 0;
}
#renegociation .calc_box_content {
    height: 480px;
}
.calc_box_content label {
    width: 100px;
	text-align: center;
}
#renegociation .calc_box_content label {
    width: 100px;
	text-align: right;
}
.calc_box_content input[type=text] {
    width: 170px;
	
}
.toggle label:first-child {
    width: 100%;
}
#renegociation .toggle label:first-child {
    width: 60px;
}
#renegociation .toggle label.slider_value {
    width: 30px;
}
#maison {
    margin: 50px 0 0 110px;
}
#maison div#fonds_propres span {
    left: -110px;
}
#maison div#fonds_text {
    left: 120px;
	bottom: 60px;
}
#cylindre_endettement {
    margin: 50px 0 0 20px;
}
#renegociation .slider span {
    margin: 0 0 0 100px;
}
#renegociation .slider #slider_duree_restante.ui-slider.ui-widget-content {
    margin-left: 5px;
}