@font-face {
    font-family: "twofold";
    src: url("../elements/fonts/twofold.ttf");
}

@font-face {
    font-family: "HelveticaNeue";
    src: url("../elements/fonts/helveticaNeue.ttf");
}

@font-face {
	font-family: 'FontAwesome';
	src: url(../elements/fonts/fontawesome-webfont.eot);
	src: url(../elements/fonts/fontawesome-webfont.eot)
		format('embedded-opentype'),
		url(../elements/fonts/fontawesome-webfont.woff2) format('woff2'),
		url(../elements/fonts/fontawesome-webfont.woff) format('woff'),
		url(../elements/fonts/fontawesome-webfont.ttf) format('truetype'),
		url(../elements/fonts/fontawesome-webfont.svg)
		format('svg');
	font-weight: normal;
	font-style: normal;
}


html, body{
	background:#56534e;
}

body {
    color: #15100a;
    font-family: Helvetica;
    font-size: 14px;
    line-height: 20px;
}

label{
	font:inherit;
	color:inherit;
}

p{
	font:inherit;
	color:inherit;
}

.hidden{
	display:none;
}

h2 {
    color: #15100a;
    font: 22px/22px Helvetica;
    border-bottom: 1px solid #aaa;
    font-size: 24px;
    letter-spacing: -1px;
    line-height: 34px;
    padding-top: 21px;
    padding-bottom: 21px;
}

p {
    margin: 0 0 10px;
}

#logo{
	margin-top:20px;
}

.row {
    margin: 0 auto;
    max-width: 66.5rem;
}

.column, .columns {
    padding-left: 10px;
    padding-right: 10px;
}

.clear{
	clear:both;
}

.hide{
	display:none!important;
}

.row > .columns{
	padding:0;
}

button, .button {
    background: #38549e none repeat scroll 0 0;
    font-size: 14px;
    padding-top: 14px;
    padding-bottom: 14px;
}

#calculator .button {
	height:auto;
	line-height:normaL;
}

#header {
	background: white;
	height: 111px;
	box-shadow: 0 2px 5px rgba(0, 1, 0, 0.2);
	z-index: 1000;
	position: relative;
}

.top-bar {
    background: transparent none repeat scroll 0 0;
    overflow: visible;
}

.top-bar a {
    color: #4b4b4b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: 111px;
    line-height: 114px;
    padding: 0 20px;
    text-transform: uppercase;
    position:relative;
}

.top-bar a:hover{
	color:#00a02f;
}

.top-bar a:hover::before {
    background: rgba(0, 0, 0, 0) url("../elements/nav_new.png") no-repeat scroll center bottom;
    bottom: 0px;
    content: "";
    display: block;
    height: 11px;
    left: 50%;
    margin-left: -35px;
    position: absolute;
    width: 70px;
}

#menu .columns{
	padding:0;
}

#menu .last a{
	padding-right:0;
}

#footer{
	background:#56534e;
	height:210px;
	padding-top:20px;
	color: #b2b2b2;
}


#footer #footer_left{
	padding-right: 100px;
}

#footer .logo{
	background: rgba(0, 0, 0, 0) url("../elements/logo_footer.png") no-repeat scroll right 0;
	height:60px;
}

#footer .copyright{
	color:#fff;
	text-align:right;
	font-size:12px;
}

#footer .headline {
    color: #fff;
    display: block;
    font-weight: bold;
    padding-bottom: 20px;
}

#footer #footer_left > div{
	border-right:1px solid #838377;
	padding:10px 30px;
	height:150px;
}

#footer #footer_left > div:last-child{
	border-right:0px solid #838377;
}

#footer .address {
	padding-top:10px;
    background: rgba(0, 0, 0, 0) url("../elements/house.png") no-repeat scroll left 13px;
    padding-left: 37px;
    font-size: 12px;
}

#footer .phone {
    background: rgba(0, 0, 0, 0) url("../elements/phone.png") no-repeat scroll left 3px;
    padding-left: 37px;
    font-size: 12px;
}

#footer a.link {
   display:block;
   color: #fff;
   font-size:12px;
   background: rgba(0, 0, 0, 0) url("../elements/footer-list.png") no-repeat scroll left 8px;
   padding-left:10px;
}

#footer a.link:hover {
   text-decoration:underline;
}

#footer .social{
	text-align:right;
	padding-top:20px;
}

#footer a.facebook {
   height:36px;
   width:36px;
   background: rgba(0, 0, 0, 0) url("../elements/facebook.png") no-repeat scroll 0 0;
   display:inline-block;
   margin-left:5px;
}

#footer a.mail {
   height:36px;
   width:36px;
   background: rgba(0, 0, 0, 0) url("../elements/mail.png") no-repeat scroll 0 0;
   display:inline-block;
   margin-left:5px;
}


.slider_bg{
	background: rgba(0, 0, 0, 0) url("../elements/slider_new.jpg") repeat scroll 0 0;
}

.img1{
	background: rgba(0, 0, 0, 0) url("../elements/img1.jpg") repeat scroll 0 0;
	height:425px;
	width:100%;
}

.img1 .headline1{
	font: bold 35px twofold;
	color:#fff;
	margin-top:50px;
	margin-left:60px;
}

.img1 .headline2{
	font: bold 44px twofold;
	color:#fff;
	margin-left:125px;
}

.img1 .headline3{
	font: 400 28px HelveticaNeue;
	color:#fff;
	margin-left:100px;
}

#content_wrapper{
	background:#fff;
	border-bottom:7px solid #000;
	background: url("../elements/bottom_image.png") no-repeat scroll center bottom, #fff none repeat scroll 0 0;
	padding-bottom: 240px;
}

#descr_steps{
	margin-top:50px;
	margin-left:-1%;
}

#descr_steps > div{
	border:1px solid #d2d2d2;
	float:left;
	width:23%;
	box-sizing:border-box;
	padding:15px 15px;
	height:250px;
	margin:0 1%;
}

#descr_steps .headline{
	display:block;
	color:#38549e;
}

#descr_steps .text{
	text-align:center;
	display: inline-block;
	padding-top:60px;
	background-repeat:no-repeat;
	background-position:center 10px;
}

#descr_steps .headline::before{
	background:#38549e;
	color:#fff;
	width:25px;
	height:25px;
	display:inline-block;
	padding-left:8px;
	line-height:25px;
	border-radius:15px;
	margin-right:10px;
}

#descr_steps .headline::before{
	content: "1";
}

#descr_steps .step2 .headline::before{
	content: "2";
}

#descr_steps .step3 .headline::before{
	content: "3";
}

#descr_steps .step4 .headline::before{
	content: "4";
}

#descr_steps .step1 .text{
	background-image:url('../elements/steps/step1.png');
}

#descr_steps .step2 .text{
	background-image:url('../elements/steps/step2.png');
}

#descr_steps .step3 .text{
	background-image:url('../elements/steps/step3.png');
}

#descr_steps .step4 .text{
	background-image:url('../elements/steps/step4.png');
}


#calculator_wrapper{
	padding-left: 25px;
}

#calculator{
	background:#00a02f;
	padding: 20px 10px;
	margin-top: 15px;
}

#calculator .button {
    font-size: 14px;
    margin-bottom: 0;
    margin-top: 24px;
    width: 100%;
}

#map_region_product_consumption {
    display: inline;
    width: 70%;
}

#map_region_product_consumption_unit {
    color: #fff;
    display: inline;
    font-size: 13.5px;
    width: 30%;
}

#calculator .labeled{
	color:#fff;
	display:block;
	padding: 3px 14px;
}

#map_region_product_street_list {
    margin-top: 37px;
    position: absolute;
    width: 62%;
    z-index: 1000;
}

#map_region_product_street_list > div {
    background: #fff none repeat scroll 0 0;
    max-height: 270px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #aaa;
}
#map_region_product_street_list_label {
    border-bottom: 1px solid #aaa;
    padding-bottom: 5px;
}
#scroll_list {
    padding-top: 5px;
}
#scroll_list div {
    background: #eeeeee none repeat scroll 0 0;
    cursor: pointer;
    margin: 7px 0;
    padding: 5px;
}

div.product {
    background: transparent none repeat scroll 0 0;
    padding: 13.5px 0;
    margin-top:30px;
    margin-left: -10px;
}

div.product_name{
	font: 24px/34px Helvetica;
}

div.product_details{
	padding-top:5px;	
}

div.prices > div{
	float:left;
	padding:5px;
}

div.prices > div:first-child{
	padding-left:0px;
}

div.prices > div > label{
	padding-bottom:10px;
}

div.prices > div > div{
	border:2px solid #4d66a8;
	padding:10px 15px;
}

div.prices > div.price > div{
	border:2px solid #4d66a8;
	background:#4d66a8;
	color:#fff;
	padding:10px 15px;
}

.accept_btn.button {
    background: #00a02f url("../elements/arrow_right.png") no-repeat scroll 95% center;
    bottom: 0;
    margin-bottom: 5px;
    position: absolute;
    right: 0;
    padding-right: 45px;
    padding-left: 20px;
}

.forward.button {
    background: #00a02f url("../elements/arrow_right.png") no-repeat scroll 131px center;
    padding-right: 45px;
    padding-left: 20px;
}

.forward.complete.button {
    background: #00a02f url("../elements/arrow_right.png") no-repeat scroll 95% center;
}

.margintop20{
	margin-top:20px;
}

.margin-bottom20{
	margin-bottom:20px;
}

div.details{
	display:none;
	margin-bottom:40px;
	margin-top:-20px;
}

div.details_button::before{
	content:"+";
	color: #38549e;
	font-size: 24px;
    font-weight: bold;
    margin-left: -19px;
    margin-right: 5px;
    margin-top: -1px;
    position: absolute;
    text-decoration: none !important;
}

div.details_button{
	cursor:pointer;
	margin-bottom:40px;
	padding-left:30px;
}

div.details_button.show::before{
	content:"-";
	color: #38549e;
	font-size: 24px;
    font-weight: bold;
    margin-left: -19px;
    margin-right: 5px;
    margin-top: -1px;
    position: absolute;
    text-decoration: none !important;
}

div.details_button:hover{
	text-decoration:underline;
}

div.prices{
	margin-top:20px;
	margin-bottom:40px;
}

#back_wrapper {
    margin-top: 60px;
}

#back_wrapper .button {
    background: #56534e url("../elements/arrow_left.png") no-repeat scroll 15px center;
    float: none;
    padding-left: 45px;
    padding-right: 20px;
}

.backward.button {
    background: #56534e url("../elements/arrow_left.png") no-repeat scroll 15px center;
    float: none;
    padding-left: 45px;
    padding-right: 20px;
}

#back_wrapper .button:hover{
	float:none;
	background-color:#4D66A8;
}

div.bubbles{
	border-bottom: 1px solid #aaa;
	padding-bottom:30px;
	padding-top:20px;
}

div.bubbles > div{
	float:left;
	width:120px;
	margin-right:40px;
}

div.bubbles > div.clear{
	float:none;
}

div.bubbles div.bubble {
    background: #c1c1c1 none repeat scroll 0 0;
    border-radius: 40px;
    color: #fff;
    font-size: 45px;
    height: 77px;
    line-height: 74px;
    text-align: center;
    width: 77px;
    margin: 0 auto;
}

div.bubbles .active div.bubble {
	background: #38549e none repeat scroll 0 0;
}

div.bubbles div.label_bubble {
    text-align: center;
    color:#38549e;
    padding-top:10px;
}

#calc_changedata table{
	border:none;
	background:none;
	width:100%;
	margin:0;
}

#calc_changedata table tr{
	background:none;
}

#calc_changedata table td{
	padding:6px 0;
	color:#fff;
	background:none;
	font-size: 13.5px;
}

#calc_changedata table td.first{
	font-weight:bold;
}

#calc_changedata td{
	padding:10px 0;
}

#calc_changedata td.first{
	padding-right:20px;
}

.left_button{
	width:50%;
	float:left;
	text-align:left;
	margin-top:20px;
}

.right_button{
	float:left;
	width:50%;
	text-align:right;
	margin-top:20px;
}

.info {
	background-image: url(../elements/info.png);
	background-position: left top;
	background-repeat: no-repeat;
	width: 21px;
	height: 16px;
	display: inline-block;
	cursor: help;
	margin-left: 3px;
}

.bicOptionDisplay {
    display: none;
}

p.legend{
	color:#787878;
	font-size:13.5px;
	margin-bottom:5px;
}

.headline1, .headline2, .headline3{
	display:none;
}

div.slider_bg{
	margin-bottom: -200px;
}

div.customer_data .white_wrapper > .columns{
	padding:0;
}

div.customer_data .white_wrapper h2{
	border:0;
}

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea {
	border:1px solid #38549E;
	box-shadow:none;
	font-size:inherit;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="color"]:focus, textarea:focus {
    background: #fff none repeat scroll 0 0;
    border-color: #00A02F;
    outline: medium none;
}

select{
	border:1px solid #38549E;
	box-shadow:none;
	background-color: #fff;
}

select:hover{
	background-color: #fff;
	border:1px solid #00A02F;
}

.inputSpacer{
	float:left;
	width:25%;
}

.columns .l{
	padding-left:0px;
}

.columns .r{
	padding-right:0px;
}

.columns .lr{
	padding-left:0px;
}

.white_wrapper > .columns.data_input .checkb1 {
    float: left;
    margin-top: 4px;
}

.white_wrapper > .columns.data_input label.checkbText1 {
    cursor: pointer;
    display: table;
    margin-left: 25px;
    margin-top: 2px;
}

.sepa_info{
	display:none;
}

div.agbetc{
	margin-top:40px;
}

div.white_wrapper h4{
	padding:20px 0;
}

div.controlInfo{
	background-color: #ddd;
	padding: 0.5rem;
	height: 2.3125rem;
	margin-bottom:15px;
}

a {
    color: #00a02f;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #00a02f;
}

.provider strong{
	color:#000;
}

.provider {
    color: #00a02f;
    padding: 5px 0;
}

.prop_descr{
	margin-top:20px;
}

.logo img {
    float: right;
    max-width: 85%;
    margin-top: 10px;
}

.distance_headline {
    display: block;
    font-weight: bold;
    margin-top: 20px;
    text-align: right;
}

div.distance{
	float:right;
}

.distance_icon {
    font-size: 35px;
    padding-right: 10px;
    vertical-align: top;
    color:#E74C3C;
}

span.distance {
    display: block;
    line-height: 40px;
    text-align: right;
    vertical-align: middle;
	font-size:18px;
}

div.error {
    font: 24px/34px Helvetica;
    margin-top: 22px;
}

select{
	background-image: url("../elements/select_arrow.png");
    background-position: calc(100% - 7px) center;
}

#map_region_product_consumption_unit {
    color: #b4b4b4;
    display: block;
    font-size: 13.5px;
    left: 87px;
    position: absolute;
    top: 9px;
}

#map_region_product_consumption {
    display: inline;
    width: 100%;
}

.consumption_list_button {
    background-image: url("../elements/select_arrow.png");
    background-repeat: no-repeat;
    cursor: pointer;
    height: 20px;
    left: calc(89% - 10px);
    position: absolute;
    top: 9px;
    width: 20px;
    z-index: 101;
    cursor:pointer;
}

.consumption_list_button span{
	display:block;
	width:72px;
	height:20px;
	margin-left: -82px;
	background-repeat: no-repeat;
	background-position: calc(100% - 0px) center;
}

.consumption_list {
    background-color: #fff;
    background-repeat: no-repeat;
    border: 1px solid #38549e;
    box-sizing: border-box;
    display: block;
    padding: 0rem;
    position: absolute;
    transition: border-color 0.15s linear 0s, background 0.15s linear 0s;
    width: 95%;
    z-index: 100;
    border-top:1px solid #E4E2DF;
    top: 36px;
}

.consumption_list .value {
    cursor: pointer;
    padding: 5px 10px;
    background-repeat: no-repeat;
    background-position: calc(100% - 7px) center;
}

.consumption_list .value:hover {
	background-color:#E4E2DF;
}

.value1{
	background-image: url("../elements/steps_con/1.png");
}

.value2{
	background-image: url("../elements/steps_con/2.png");
}

.value3{
	background-image: url("../elements/steps_con/3.png");
}

.value4{
	background-image: url("../elements/steps_con/4.png");
}

*::-moz-placeholder {
    color: #888;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    background: #fff url("images/ui-bg_glass_65_ffffff_1x400.png") repeat-x scroll 50% 50%;
    border: 1px solid #00A02F!important;
    color: #00A02F!important;
    font-weight: bold;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    background: #00A02F;
    border: 1px solid #00A02F;
    color: #fff;
    font-weight: bold;
}

.ui-autocomplete.ui-widget-content .ui-state-focus {
    background: #aaa;
    background-image: none;
    border: 1px solid #aaa;
    color: #fff;
    font-weight: bold;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background: #c1c1c1 none repeat scroll 0 0;
    border: 1px solid #00a02f;
    color: #363636;
}

.ui-widget-header {
    border: 1px solid #00A02F;
    color: inherit;
    font-weight: bold;
}

div.ui-datepicker{
	min-width: 381px;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    height: 2.8em;
    position: absolute;
    top: 2px;
    width: 4.8em;
}

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
    background-image: url("images/ui-icons_ffffff_256x240.png");
}

.button.print{
	padding-right: 20px;
	margin-right:0px;
}

div.prop span.prop{
	font-weight:bold;
	width:170px;
	display:inline-block;
	padding:5px 0;
}

span.info_tip {
    font-size: 17px;
    padding-left: 5px;
}

.ui-widget-content.ui-tooltip {
    background: #00a02f none repeat scroll 0 0;
    border: 1px solid #ddd;
    color: #fff;
}

#calc_error {
    background: #38549e none repeat scroll 0 0;
    color: #fff;
    display: none;
    padding: 10px;
    text-align: center;
}

div.logo a{
	display: block;
	margin-left: 252px;
	width: 144px;
	height: 48px;
}

#calc_error a, #calc_error a:hover, #calc_error a:focus {
    color: #01d840;
    font-weight: bold;
}

#header,#content_wrapper {
    background: #e4e4e4 none repeat scroll 0 0;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    background: #fff url("images/ui-bg_glass_65_ffffff_1x400.png") repeat-x scroll 50% 50%;
    border: 1px solid #00A02F!important;
    color: #00A02F!important;
    font-weight: bold;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    background: #219F7A;
    border: 1px solid #219F7A;
    color: #fff;
    font-weight: bold;
}

.ui-autocomplete .ui-state-focus {
    background: #aaa;
    border: 1px solid #aaa;
    color: #fff;
    font-weight: bold;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background: #c1c1c1 none repeat scroll 0 0;
    border: 1px solid #00a02f;
    color: #363636;
}

.ui-widget-header {
    border: 1px solid #00A02F;
    color: inherit;
    font-weight: bold;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    height: 2.8em;
    position: absolute;
    top: 2px;
    width: 4.8em;
}

.ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover {
	background-color: transparent;
	border: none;
}

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
    background-image: url("images/ui-icons_ffffff_256x240.png");
}

#ui-datepicker-div{
	min-width: 17%;
	max-width: 27%;
}

ul.errors,
.error{
    border: 2px solid #fd4a49;
    color: 000;
    margin-left: 0;
    margin-top: 10px;
    padding: 10px;
    background: #fce6e2;
}

.warning{
	border-color: red!important;
	outline: 2px solid red;
}

/* Preloader */
/* historisierte Preise */
.new_price{
	display: none;
	text-decoration: underline;
}

.preloader{
	background-color: #c1c1c1;
    background-image: url("../elements/ajax-loader.svg");
    background-position: center center;
    background-repeat: no-repeat;
    display: none;
    height: 100%;
    opacity: 0.7;
    position: absolute;
    width: 93%;
}