/* Allgemeine Difinitionen - Anfang */
body, container_12, container_12 a {
	font-family: 'Roboto', sans-serif;
	
}
p.center{
	text-align: center;
}
.stromgreybody {background-color: #f0f0f0; padding-bottom: 20px;}
.txt-bold { font-weight:700; }
.innergrid { margin: 10px; }
.innergridx2 { margin: 10px 20px; }
.centered { text-align: center; }
.hidden {display: none;}
/* Formulare */
input.input-2018,
button.input-2018 {
	border:1px solid #004f55;
	color:#FFFFFF;
	padding: 10px;
	text-align: center;
	background-color: #00818c;
}
input.input-2018::-webkit-input-placeholder,
button.input-2018::-webkit-input-placeholder{ /* Chrome/Opera/Safari */
  color:#FFFFFF;
}

.img-responsive{
	width: 100%;
}
.input-100{
	width: 100%;
	box-sizing: border-box;
	margin-top: 5px;
}



input.input-2018::-moz-placeholder,
button.input-2018::-moz-placeholder { /* Firefox 19+ */
  color:#FFFFFF;
}
input.input-2018:-ms-input-placeholder,
button.input-2018:-ms-input-placeholder{ /* IE 10+ */
  color:#FFFFFF;
}
input.input-2018:-moz-placeholder,
button.input-2018:-moz-placeholder{ /* Firefox 18- */
  color:#FFFFFF;
 opacity: 1;
}

input.input-100::-moz-placeholder { color: rgba(255,255,255,1) !important; opacity: 1; }

h1.headline,
h2.headline,
h3.headline,
h4.headline,
h5.headline,
h6.headline,
.headline {font-size: 1.7em; font-family: 'Roboto', sans-serif; font-weight: 400; margin-bottom: 10px; color: #00818c;}
h1.headline span,
h2.headline span,
h3.headline span,
h4.headline span,
h5.headline span,
h6.headline span,
.headline span {font-size: 0.7em; font-family: 'Robotothin', sans-serif; font-weight: 100;}

.flowtext,
.flowtext p {color: #7c7c7b;}
.flowtext span.head{font-weight: bold;}

.btn-main,
a.btn-main,
.btn-main a{
	padding: 10px 20px;
	background-color: #FFFFFF;
	border: 1px solid #00818c;
	text-decoration: none;
	color: #00818c;
}
.pos-right {float: right;margin-bottom: 10px;}
.pos-br {position: absolute; bottom: 10px; right: 10px;}
.pos-bl {position: absolute; bottom: 10px; left: 10px;}
.flexbox {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: stretch;
	align-items: stretch;
}

.servicebutton {height: 35px; width: auto; margin-right: 7px;}
.img-fl { float: left; margin-right: 10px; margin-bottom: 10px; }
.img-fr { float: right; margin-left: 10px; margin-bottom: 10px; }
.img-h1 { height: 50px; width: auto; }
.img-h2 { height: 100px; width: auto; }
.img-h3 { height: 150px; width: auto; }
.img-h4 { height: 200px; width: auto; }
.img_max_width { width: 100%; height: auto; }
/* Allgemeine Difinitionen - Ende */

/* Header - Anfang */
.header .headerbar {height: 70px; background-color: #00818c;}
.header .headerbar .logo img {width: 100%; margin-top: 3px;}
.header .headerbar .logo h1 {background: #fff; height: 100%; width: 100%; position: relative;}
.header .headerbar .headerbutton .buttonleft {
	border-left: 1px solid #2f979f;
	border-right: 1px solid #2f979f;
	height: 70px;
	line-height: 70px;
}
.header .headerbar .headerbutton .buttonright {
	border-right: 1px solid #2f979f;
	height: 70px;
	line-height: 70px;
}

.header .headerbar .headerbutton .buttonright img,
.header .headerbar .headerbutton .buttonleft img {height: 20px; width: auto; padding-bottom: 5px;margin-right: 7px;}
.header .headerbar .headerbutton a {
	text-align: center;
	color: #FFFFFF;
	text-decoration: none;
}
.header .headerbar .headerbutton div { background-color: #218891; }
.header .headerbar .headerbutton div:hover { background-color: #23919A; }
.header .headerbar .headerbutton .aktiv {
	background: rgb(0,129,140); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(0,129,140,1) 0%, rgba(0,121,132,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,129,140,1) 0%,rgba(0,121,132,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,129,140,1) 0%,rgba(0,121,132,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00818c', endColorstr='#007984',GradientType=0 ); /* IE6-9 */
}
.header .headerbar .headerbutton .aktiv:hover {
	background: rgb(10,139,150); /* Old browsers */
	background: -moz-linear-gradient(bottom, rgba(10,139,150,1) 0%, rgba(0,121,132,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(bottom, rgba(10,139,150,1) 0%,rgba(0,121,132,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to top, rgba(10,139,150,1) 0%,rgba(0,121,132,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00818c', endColorstr='#007984',GradientType=0 ); /* IE6-9 */
}
.header .headerimage {
	width: 100%;
	height: 420px;
	background-image: url("/images/bg_image_fruehling.jpg");
	background-size: cover;
	background-position: center;
}
.header .headerimagesmall {
	width: 100%;
	height: 300px;
	background-image: url("/images/bg_image_fruehling.jpg");
	background-size: cover;
	background-position: center;
}
.header .headerimage .tarifrechner {
	color: #FFFFFF;
	height: 260px;
	background-color: rgba(0,129,140,0.9);
	/*position: absolute;
	bottom: 20px;
	right: 0;*/
	margin-top: 110px;
}
.header .headersmall { height: 360px; }

.header .headersmall .angebotsrechner { margin-top: 20px; }
.header .headerimage .angebotsrechner .title {font-size: 1.6em; font-family: "Roboto",sans-serif;}
.header .headerimage .angebotsrechner .title img{height: 40px; width: auto; margin-right: 15px;}

.header .headersmall .tarifrechner { margin-top: 20px; }
.header .headerimage .tarifrechner .title {font-size: 1.6em; font-family: "Roboto",sans-serif;}
.header .headerimage .tarifrechner .title img {height: 40px; width: auto; margin-right: 15px;}

.header .headerimage .angebotsrechner{
	color: #FFFFFF;
	background-color: rgba(0,129,140,0.9);
	min-height: 300px;
}


.header .headerimage .tarifrechner .tarifplz {
	/*border-right:1px solid #004f55;*/
}
.header #kwhpersons img {cursor: pointer; height: 30px;}
.header .erdgaskwh img {height: 18px !important; }
.rechnerbutton {margin-top: 10px; margin-left: 20px; margin-right:20px;}
.rechnerbutton button {width: 100%;}
.strom_content, .erdgas_content {
    margin-top: 0px;
    margin-bottom: 10px;
}
.status { color:#666666; }
/* Header - Ende */

/******************* Hoyer Navigation **********************/

.header_content_small {
    margin-top: -51px;
    height: 300px;
    width: 100%;
    background: url(/images/slides/hoyer_holz_haeuser.jpg) no-repeat;
	background-position-x: 0%;
	background-position-y: 0%;
	background-size: auto auto;
    background-size: cover;
    background-position: center;
}

/*#headNav {
	position: relative;
	z-index: 10000;
}

#headNav .home-btn.mobile {
	position: relative;
	margin-top: 20px;
	border-radius: 6px;
	z-index: 10000;
}
*/
.nav-line {
	border-radius: 6px;
}

li.home-btn:hover {
	background-color: #00BBCB !important;
}
.home-btn img {
	color: #FFFFFF;
	background-color:#00A3B1;
	padding: 9px;
	border-bottom-left-radius: 6px;
	border-top-left-radius: 6px;
}

.nav-line
, .home-btn.mobile {
	list-style-type: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
	background-color:rgba(255,255,255,0.98);
	color: #555555;
	margin-bottom: 2px;
	width: 100% !important;
	border-radius: 6px;
}

.nav-line li {
/*    display: inline-block;*/
    float: left;
	line-height: 45px;
	margin-left: 20px;
}
.nav-line li:first-child {
	margin-left:  0;
	background-color: #00BBCB;
}
.nav-line a {
	color: #555555;
	text-decoration: none;
	margin: 0 6px 0 16px;
}
.nav-line .mobile a {
	margin: 0 6px 0 6px;
}
.nav-line li:first-child a {
	margin: 0;
}
.nav-line li:hover {
	background-color: rgba(240,240,240,1);
}
.nav-line li.aktiv {
	background-color: rgba(240,240,240,1);
}
.nav-line .nav-sub {
	
}

#menu i {
	color:rgba(0,0,0,0.1);	
}

/* Untermenüs */
#nMenu {
	position: absolute;
	width: 100%;
	background-color:rgba(255,255,255,0.98);
	border-bottom: 2px solid #00818c;
}

.submenu {
	font-size: 1.3em;
}
.submenu .grid_3, .submenu .grid_6 {
	margin-bottom: 10px;
}
.submenu a {
/*    background: #f9f9f9; */
	background-color: rgba(240,240,240,1);
    display: block;
    /*margin: 2px;*/
	text-decoration: none;
	color: #555555;
	padding-left: 22px;
}
.submenu a:hover {
	background-color:rgba(255,255,255,0.98);
/*    background-color: #fff; */
	color:#00818c;
}

.sub-hover {
    cursor: pointer;
    display: inline-block;
    text-align: left;
	/*font-size: 1.3em;*/
}

.submenu .sub-hover {
	padding: 2px 5px;
}

.submenu .subnav {
	margin-top: 7px;
	padding: 12px 5px;
}

.submenu .subsubmenu {
/*	margin-top: 7px;*/
}
.submenu .subsubmenu a {
	margin-top: 7px;
	padding: 12px 5px;
}
.mobile .sub-first {
	text-align: left !important;
	padding-bottom: 7px;
}
.mobile .sub-first a {
	margin: 7px 10px 0;
}
.mobile .submenu .subnav,
.mobile .submenu .subsubmenu a {
	padding: 12px 20px;
}
.mobile .submenu .subsubmenu {
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 2px solid #00818c;
}


/* Teaser */
.teaser {
	margin-top: 15px;
	font-size: 0.8em;
	color: #555555;
}
.teaser h4
, .teaser p {
	margin: 5px;
}
.teaserimg {
	margin: 10px 0;
	border: 5px solid #f1f1f1;
	max-width: calc(100% - 10px);
}
.teaserimg.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.teaserimg.w50 {
	width: 50%;
}
.teaserimg.w65 {
	width: 65%;
}
.half {
	width: 50%;
	float: left;
	text-align: left;
}
.half i {
	line-height: 45px;
	font-size: 1.5em;
	color: #FFFFFF;
	background-color: #00818c;
	padding: 0 15px;
	float: right;
	border-bottom-right-radius: 6px;
	border-top-right-radius: 6px;
}
.home-btn.mobile img {
	border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
}


.mobile {
    display: none;
}

nav {
	width: 100%;
	position: relative;
	z-index: 599;
}


/******************* Hoyer Navigation **********************/


/* Content - Anfang */
.faq .icon {
    float: left;
    margin-left: 30px;
}
.faq .content {
    margin-bottom: 20px;
    margin-left: 60px;
}

.stromcontent .inhalt {
	margin-top: 20px;
	background-color: #FFFFFF;
	position: relative;
}
.stromcontent .maintitle .maintitleimage {
	width: 100%;
	height: 300px;
	background-position: center center;
	background-size: cover;
}

/* Service Container */
.stromcontent .serviceicons .headline {
	text-align: center;
	border-bottom: 1px solid #f0f0f0;
	margin-top: 10px !important;
}
/* Service Container */
.stromcontent .serviceicons {min-height: 300px;}
.stromcontent .serviceicons .service {
	width: 49%;
	float: left;
	text-align: center;
	margin-top: 0px;
	padding-top: 10px;
}
.stromcontent .serviceicons .service img {height: 35px; width: auto; margin-bottom: 8px; }
.stromcontent .serviceicons .service a {text-decoration: none; color:#00818C; }
.stromcontent .serviceicons .service:nth-child(even) {margin-right: 0px; border-right: 1px solid #f0f0f0;}
.stromcontent .serviceicons .service:last-child {margin-bottom: 10px;}

/* E-Mobilitätsbox */
.emobilitaet .mainimg,
.lastnews .mainimg,
.headereddiv .mainimg {
	height: 200px;
	background-size: cover;
	background-position: center center;
	border-bottom: 4px solid #00818C;
}
.bgimg_bottom {background-position: bottom center;}
/*
.headereddiv:after,
.headereddiv .innergrid:after,
.headereddiv .innergrid:last-child {
	content: "";
	display: table;
	clear: both;
}
*/
.grid_1.headereddiv .sideimg,
.grid_2.headereddiv .sideimg, 
.grid_3.headereddiv .sideimg {width: 20%;}

.grid_4.headereddiv .sideimg,
.grid_5.headereddiv .sideimg, 
.grid_6.headereddiv .sideimg,
.grid_7.headereddiv .sideimg,
.grid_8.headereddiv .sideimg, 
.grid_9.headereddiv .sideimg {width: 40%;}

.grid_10.headereddiv .sideimg,
.grid_11.headereddiv .sideimg, 
.grid_12.headereddiv .sideimg {width: 40%;}
.headereddiv .sideimg {
	height: 100%;
	background-size: cover;
	background-position: center center;
	float: left;
	margin-right: 15px;
}
.emobilitaet,
.lastnews {
	height: 380px;
	position: relative;
}
.emobilitaet .innergrid {
	margin-left: 100px;
	margin-right: 170px;
}
.headereddiv .innergrid {
	margin-top: 10px;
}

#content { min-height:0%; }

.icon-gewerbe {
	margin-left: 39%;
	margin-top: 2%;
	margin-bottom: 2%;
	height:50px;
}

.klimabutton {
    width: 110px;
    height: 110px;
    background-color: #86a241;
    border: 3px solid #FFFFFF;
        border-top-color: rgb(255, 255, 255);
        border-top-style: solid;
        border-top-width: 3px;
    border-top: none;
    margin-left: 25px;
    text-align: center;
}
.klimabutton img {
    width: 70%;
	margin-top: 15px;
}

/* News - Anfang */
.newsbox {
    position: relative;
    float: left;
    margin-bottom: 30px;
    min-height: 520px;
	border: 1px solid #dbdbdb;
	background-color: #FFFFFF;
}
.newsbox .title {
    margin-top: -12px;
    margin-left: 8px;
    padding-left: 10px;
    padding-top: 4px;
    height: 24px;
    width: 70%;
    font-weight: bold;
}
.newsbox .title {
    background-color: #00818C;
    color: #FFFFFF;
}
.newsbox > .boxcontent {
    padding: 10px;
}
.newsListbox { background-color: #FFFFFF; }
.newsListbox a { color: #00818C; }

/* Anpassungen Strecke - Anfang */

.erklaerung { font-size: 1.2em !important; }

/* Anpassungen Strecke - Ende */
/* News - Ende */
/* Content - Ende */


/* Footer - Anfang */
#footer { margin-top: 0px; color: #979797; }
#footer a { color: #979797; font-weight:100; text-decoration:none; }
.footer_main { min-height:170px }
.footer_main h2 { color: #979797; font-size:1.2em; font-weight:700; margin-bottom:0 ;margin-top:16px !important; }
.footer_main h3 { color: #979797; font-size:1.2em; font-weight:700; margin-bottom:0 ;margin-top:16px; }
.footer_logo { border-right: 1px solid #555555; padding-right:3px; }
.footer_icon { background-color: #f5f6f5; padding:15px 0; }
.footer_icon img { height:50px; margin:auto; } 
.footer_main { background-color: #464444; border-bottom: 1px solid #00818c; border-top: 8px solid #555555; }
.footer_bottom { background-color: #3b3b3b; color: #979797; max-height:80px; padding:10px 0; }
#footer li { list-style-type:none; margin-left:3px }
.back-to-top { background:#00818c; color: #fff; position: fixed; bottom: 20px; right: 20px; padding: 1em; }
/* Footer - Ende */

/* Kontaktformular */
/* Form Elemente */

.kontaktLable {
    float: left;
    margin-bottom: 10px;
    margin-right: 10px;
    width: 15%;
}

#kontaktFormular .innergrid{
	margin-bottom: 4px !important;
}
#kontaktFormular .control {
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    padding: 6px 12px;
	width: 100%;
	margin-bottom: 0px !important;
}
#kontaktFormular textarea {
    margin-bottom: 10px;
    min-height: 180px;
    width: 80.5%;
}


@media (min-width: 769px) and (max-width: 1280px) {
	#kwhverbrauch.input-100{
		width: 100% !important;
		margin-left: 0px !important;
	}
}
@media (min-width: 0px) and (max-width: 768px) {
	.header .headersmall .angebotsrechner {  margin-top: 0px; min-height: 340px; }
	#kwhverbrauch{margin-top: 5px !important;}
	#kwhverbrauch.input-100{
		width: 100% !important;
		margin-left: 0px !important;}
	#kwhpersons img, #kwhpersons p { display: none;}
	.mt-email{ margin-bottom: 0px !important}
	button.input-100{font-size: 1.4em;}
}