@charset "utf-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
img{
  max-width: 100%;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


* 						{
  box-sizing: border-box;
	margin: auto; 
	padding: 0px; 
	border: 0px;
  	text-decoration:none; color:#58585A;
	}

a:link { 
	text-decoration:none; color:#58585A
	}
	
a:visited{ 
	text-decoration:none; color:#58585A
	}	
	
html					{
    	font-size: normal;
	background-color:#FFFFFF;
  	max-width:1920px;
}


#header					{
	height:120px;
	}

#logo					{  
	float:left;
	max-width:250px;
	margin: 0 auto;
	}


form {
  
}  

td, input, select, textarea {
  font-size:13px; 
  font-family:Verdana,sans-serif; 
  font-weight:bold; 
  width:300px;
}

input, select, textarea, option  { 
  color:black; 
}

#halexhaertha_switch{  
  	display: inline-block;
	font-size:large;
  	float:left;
  	margin-bottom: 15px;
  	max-width: 1500px; 
  	margin-top: 15px;
	background-color:grey;
	padding-right: 12px;
	padding-left: 12px;
	margin-right: 2px;
	line-height: 14px;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-top: 2px;
	margin-bottom: 2px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	}

#top_body				{
	}

#body_comp 					{
	height:auto;  
  	float:left;
  	width: 100%;
  
/*    border-width:1px;
  border-style:solid;
  border-color:red;*/
	}
@media screen and (max-height: 702px) {
  #body_comp {
 	 overflow-y: auto;
  }
}
#body_navigation{
  	max-width:500px;
	float:left;
  	display:inline-block;
  min-height: 10px;
	}
	
#left_navigation		{
	font-family:arial;
    position:absolute;
  	left:30px;
	}
	
#right_navigation		{	
    display:inline-block;
  	float:left;
  position:absolute;
left:230px;
  font-family:arial;

	}

#body_content{
   	float:left;
  min-height:400px;
 /*      border-width:5px;
  border-style:solid;
  border-color:black;
  display:inline-block;*/
}	

#content				{
  	height:auto; 
    /*  border-width:1px;
  border-style:solid;
  border-color:blue;*/
  display:inline-block;
	}
	
#footer					{
    font-size: small;
  	margin-left:30px; 
	height:auto;
	position: relative;
	}
		
#bottom_menu_HG			{
    clear:both;
    	margin-top:45px;
    float:left;
	}

#bottom_menu_Hlx			{
    float:left;
    	margin-top:45px;
  	margin-left:30px; 
	}

#bottom_menu_Hhi			{
  	float:left;
    	margin-top:45px;
  	margin-left:30px; 
	}

#halex_css				{
	color:white;
	}

ul
	{
	list-style: none;
	}


.nav-pills > li > a {
	padding-right: 12px;
	padding-left: 12px;
	margin-right: 2px;
	line-height: 14px;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-top: 2px;
	margin-bottom: 2px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	}
	
.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.nav-pills > .active > a:focus {
	}
	
.nav-pills.nav-stacked > li > a {
	margin-bottom: 3px;
	}
	
.nav-pills.nav-stacked > li:last-child > a {
	margin-bottom: 1px;
	}
	
.nav-pills .dropdown-menu {
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	}
	
.nav-pills .open .dropdown-toggle,

.navigation .nav-pills {
	margin-bottom: 0;
	}
	
.header .nav-pills > li > a {
	border-bottom: 0;
	margin: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	margin-right: 0;
	}
	
.header .nav-pills > li:first-child > a {
	-webkit-border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
	}
	
.header .nav-pills > li:last-child > a {
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	border-radius: 0 0 4px 4px;
	}
	
.nav-pills > li {
	display: inline-block;
  	margin-bottom: 8px;
	}
	
.nav-pills > li > a {
	margin-right: 0;
	}
	
.nav-pills > li > a {
	margin-bottom: 3px;
	}
	
.nav-pills  > li:last-child > a {
	margin-bottom: 1px;
	}

.slideframe{	
  	position: relative;
	width: 100%;
	}

.slideframe:before{	
  	content: "";
	display: block;
	}

.content_slide{
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	}


*{
  font-family: 'Roboto', sans-serif;
}

p strong{
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
}

#left_navigation .nav.menu, #top_menu .nav.menu{
  text-transform: uppercase;
}

/*cs ausgeblendet
.lang-inline li:after{
  content: '|';
  display: inline;
}
*/

.lang-inline li:last-child:after{
  display: none;
}

div.mod-languages ul.lang-inline .lang-active{
  display: none;
}

/*Schriftgrößen und Zeilenabstand*/

#left_navigation{  /*Navigation links*/
  font-size: 1.25em;  
  line-height: 2.0;
}

p{ 		/*Fliesstextabsatz*/
  font-size: 1em;
  line-height: 1.5;
}

div.mod-languages ul{  /*Sprachauswahl*/
  padding: 0 8px;
}

div.mod-languages li {
    margin-left: 5px;
    margin-right: 0;
}
div.mod-languages li:after {
    margin-left: 5px;
    margin-right: 0;
}
/*Layout Navigation*/
#top-header{
  min-height: 21px;
  background-color: #6F6F6E;
}

.haertha #top-header{
  background-color: #E62333;
}

.halex #top-header{
  background-color: #00A9E7;
}

#top-header a{
  color: #FFF;
}

#top_menu{
  margin: 0;
  padding-top: 5px;
}

/* Switch Halex Härtha */

#halexhaertha_switch{
  background-color: transparent;
  margin-top: 38px;
}

#halexhaertha_switch .menu li{
  background-color: #58595A;
  padding: 8px 4px 6px 4px;
  margin-right: 8px;
  font-size: .75em;
}
#halexhaertha_switch ul li a{
  color: #FFF;
}

.footer{
  text-align: center;
  float: left;
  width: 100%;
  margin-top: 60px;
}
.footer ul{
  margin-bottom: 20px;
}
.footer ul li a{
  font-size: 16px;
}

#top_right{
  overflow: hidden;
}

#body_content{
  width: 100%;
}

#content {
    display: block;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

.item-page > div > div{
  width: 98%;
  display: inline-block;
	vertical-align: top;
   text-align: center;
}

.index--menu{
  text-align: center;
  text-transform: uppercase;
  margin-top: 30px;
}

.index--menu li{
  margin-bottom: 18px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
}

.index--menu li ul{
  display: none;
}

.logo img{
  border-top: 10px solid #6F6F6E;
  margin-bottom:20px;
}

.logo__halex img{
  border-color: #00A9E7;
}

.logo__haertha img{
  border-color: #E62333;
}

html,body{
  height: 100%;
}
.centervert{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.nav.menu font {
    color: #fff;
}
div.mod-languages ul.lang-inline font{
  color: #fff;
}

div.carveout-banner {	
	color: red;
	background-color: red;
	height: 40px;
}

div.carveout-banner div.custom {
	font-family: 'Roboto', sans-serif;
	font-size: 1em;
	color: white;
	padding: 10px;
	text-align: center;
}

div.carveout-banner div.custom a {
	color: lightgrey;
	text-decoration: underline;
}

@media screen and (max-width: 767px){
  	.item-page > div > div {
      width: 100%;
      display: block;
      vertical-align: top;
      text-align: center;
      margin-bottom: 10px;
	}
  .index--menu{
    display: none;
  }
  .logo img{
    border-top: 0;
   	margin-bottom: 0; 
  }
  .logo{
    border-top: 10px solid #6F6F6E;
    margin-bottom:0px;
    max-width: 385px;
    margin-left: auto;
    margin-right: auto;
  }

  .logo__halex{
    border-color: #00A9E7;
  }

  .logo__haertha {
    border-color: #E62333;
  }
  .mobile-crop{
    height: 100px;
    overflow: hidden;
    position: relative;
  }
  .mobile-crop img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .item-page > div > div {
    max-width: 250px;
    margin: 5px auto 20px;
  }
}