#loan-container{
	text-align: left;
	max-width: 100%;
	margin:20px auto;
	box-sizing: border-box;
	display: inline-block;
}
.sample-text {
	font-weight: 400;
}
#loan-container .ul-buttons {
	display: inline-block;
	padding: 0;
}
#loan-sample-header {
	cursor: pointer;
	padding-bottom: 20px;
}
#loan-sample-content {
    display: none;
    font-weight: 300;
    font-size: 0.8em;
    line-height: 1.6em;
}
#loan-sample-content.visible {
	display: block;
}
.box-pane{
	border: 1px solid #ddd;
	padding:25px;
	box-sizing: border-box;
	min-height:776px;
}
.hidden {
	display: none;
}
#info-pane{
	float:left;
	width:35%;
}

#graph-pane{
	float:right;
	width:63%;
}

.heading-title{
	font-size:1.35em;
	margin-bottom:15px;
}

#repayment-total{
	float:right;
	width:48%;
	text-align:right;
}

#repayment-cycle{
	width:48%;
	float:left;
	
}

.row-input{
	margin-bottom:20px;
}

.row-input label{
	padding:5px 0;
	display:block;
}

.row-input input, .row-input select{
	background-color: #fff;
	border: 1px solid #ddd;
	padding: 9px 15px 10px;
	outline: none;
	font-size:1em;
}			

input#txtLoan {
	padding: 10px 35px 10px;
	width: 100%
}

input#txtInterest, input#txtYear {
	padding: 10px;
	width: 100%
}

input#txtLoan:focus, input#txtInterest:focus, input#txtYear:focus {
	border-color: #b41615;
}

.input-wrap{
	position:relative;
}

.currency-code{
	position:absolute;
	left:3px;
	top:9px;
}

.percentage-code{
	position:absolute;
	left:75px;
	top:9px;
}

.ul-buttons, .ul-buttons li{
	margin:0;
	padding:0;
	list-style:none;
}

.ul-buttons li{
	background-color: #dadada;
	color: #3c3c3c;
	padding: 8px 25px;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1.5;
	width:49%;
	float:left;
	box-sizing: border-box;
	text-align:center;
	margin-right: 1%;
	margin-bottom: 1%;
}

.ul-buttons li:hover, .ul-buttons li.selected{
	background-color: #b41615;
	color: #fff;
}

.note-text{
	font-size:0.8em;
	font-style:italic;
	padding-top:5px;
}

.range-slider{
	margin:15px 0 65px 0;
}
.loan-range-slider{
	margin:15px 0;
}
.ir-range-slider{
	margin:15px 0;
}

.noUi-value{
	margin-top:4px;
	font-size:1em;
}

.short-input{
	width:60px;
}

.bold{
	font-weight:normal;
}

.loan-value{
	color: #b41615;
    font-weight: 700;
    font-size: 1.5em;
}

span.side-text {
    color: #666;
    font-size: initial;
    font-weight: initial;
}
#et_pb_contact_vorhaben_0, #et_pb_contact_kreditbetrag_0, #et_pb_contact_laufzeit_0, #et_pb_contact_kreditrate_0, #et_pb_contact_zinssatz_0, #et_pb_contact_honeypot_0 {
	visibility: hidden;
}
.et_pb_contact_field_0, .et_pb_contact_field_1, .et_pb_contact_field_2, .et_pb_contact_field_3, .et_pb_contact_field_4 , .et_pb_contact_field_5 {
	max-height: 0;
	display: inline-block;
}
#et_pb_contact_form_0 p.et_pb_contact_field.et_pb_contact_field_15 {
	padding-top: 1em;
	padding-bottom: 1em;
}
button.et_pb_contact_submit.et_pb_button {
    color: #ffffff!important;
    background: #b41615;
    border-color: #b41615;
    border-radius: 0px;
    background-color: #b41615;
	transition: color 300ms ease 0ms,background-color 300ms ease 0ms;
}
button.et_pb_contact_submit.et_pb_button:hover {
	color: #3c3c3c!important;
    background: #fff!important;
	border-color: #b41615;    
}
#graph-chart{
	width:100%;
	height:450px;
}

.clear{
	clear:both;
}
.input-euro {
		position: relative;
}
.input-euro.left input {
	padding-left:18px;
}
.input-euro:before {
	position: absolute;
	top: -4px;
	content:"€";
}
.input-euro.left:before {
	left: 15px;
}
#et_pb_contact_form_0 p.et_pb_contact_field {
    margin-bottom: 1%;
    padding: 0 0 0 1%;
}

#et_pb_contact_form_0 .et_contact_bottom_container {
	margin-top: 10px;
}
.et_pb_contact p input[type=checkbox]:checked+label i:before, .et_pb_subscribe .et_pb_contact_field input[type=checkbox]:checked+label i:before {
	color: #b41615;
}
.noUi-handle:hover {
	cursor: ew-resize!important;
}
.noUi-connects:hover {
	cursor: pointer!important;	
}
@media screen and (max-width: 668px) {
	#info-pane, #graph-pane{
		float:none;
		width:100%;
		margin-bottom:20px;
	}
	
	.box-pane{
		min-height:500px;
		border: none;
		padding: 0;
	}
}
@media screen and (max-width: 580px) {
	#graph-chart {
		display: none;
	}
	#graph-pane h2 {
		font-size: 20px;
		color: #fff;	
	}
	#graph-pane {
		background-color: #b41615;
    	padding: 10px;

	}
	#repayment-cycle, #repayment-total {
    	width: 100%;
    	float: none;
    	text-align: left;
    	margin-bottom: 10px;
	}
	#repayment-cycle span, #repayment-total span {
    	color: #fff;
	}	
	.box-pane{
		min-height:auto;
		border: none;
		padding: 0;
	}
	.loan-value {
	    font-size: 1.2em;
	}
	h1.et_pb_contact_main_title {
		font-size: 26px;
    	line-height: 1.2em;
	}
	h1.intercare {
    	text-align: left;
	}	
}