/* Basis */
.hp-white { border:0px white solid;	}
.hp-red { border:0px red solid;	}
.hp-red2 { border:1px red solid;	}
.bc {color:gray;	}


@media screen and (max-width: 200em) {
	#headimg1 { display: block; }
	#headimg2 { display: none; }
	#header-mail {color:#B1DBFC;padding-right:0px;}
	#header-phone {color:#B1DBFC;padding-right:10px;}
	#header-menu-lupe {padding-right:15px;}

	span.media:before {content: 'media 1 . max-width: 200em'	}
	h1 { font-size: 2.8em; }
	div.bc { font-size: 1.0em; }
	.cs-ref {padding-left:20px; font-size:1.0em; letter-spacing: -0px; color:silver;}
	.cs-main {font-size:1.0em;}
	.cs-head-mol {padding-right:160px; font-size:0.9em; letter-spacing: -0px;}
	.cs-head-cas {padding-right:80px; font-size:0.9em; letter-spacing: -0px; }
}

@media screen and (max-width: 64em) {
	span.media:before {content: 'media 2 . max-width: 64em'	}
	h1 { font-size: 2.0em; }
	div.bc { font-size: 0.9em; }
	.cs-ref {padding-left:10px; font-size:1.0em; letter-spacing: -0px; color:silver;}
	.cs-head-mol {padding-right:60px; font-size:0.9em; letter-spacing: -0px;}
	.cs-head-cas {padding-right:30px; font-size:0.9em; letter-spacing: -0px; }
}

@media screen and (max-width: 50em) {
	span.media:before {content: 'media 3 . max-width: 50em'	}
	h1 { font-size: 1.5em; }
	div.bc { font-size: 0.8em; }
	.cs-ref {padding-left:10px; font-size:0.8em; letter-spacing: -0px; color:silver;}
	.cs-main {font-size:0.8em;}
}

@media screen and (max-width: 30em){
	#headimg1 { display: none; }
	#headimg2 { display: block; }
	#header-mail {color:#B1DBFC;padding-right:0px;}
	#header-phone {color:#B1DBFC;padding-right:0px;}
	#header-menu-lupe {padding-right:0px;}
	span.media:before {content: 'media 4 . max-width: 30em'	}
	h1 { font-size: 1.1em; }
	div.bc { font-size: 0.8em; }
	.cs-ref {padding-left:10px; font-size:0.8em; letter-spacing: 0px; color:silver;}
	.cs-main {font-size:0.8em;}
	.cs-head-mol {padding-top:10px; padding-right:40px; font-size:0.7em; letter-spacing: 0px;}
	.cs-head-cas {padding-right:20px; font-size:0.7em; letter-spacing: -0px; }
}


div.tr		{ clear:both; margin:5px;  }
div.tdl 	{ font: bold 1.0em verdana ;	color: #666666;	width:200px; float:left; padding:10px; }
div.tdr 	{ font: 1.0em verdana; color: gray; margin-left:200px;  padding:10px;}
div.theme 	{ margin-top:10px; padding: 0px; border-bottom: 1px #AAAAAA solid; padding-top:20px;}



/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

/* Style the close button */
.topright {
    float: right;
    cursor: pointer;
    font-size: 20px;
}

.topright:hover {color: red;}



@media screen and (max-width: 200em){
   a[href*="tel:"] {
       pointer-events: none;
       cursor:default;
   }
}

@media screen and (max-width: 64em){
   a[href*="tel:"] {
       pointer-events: none;
       cursor:default;
   }
}


/* Kugeln in red färben */
.com_li {
   background-color:#FFFFFF;
   color: #FAB6A5;
}
.com_li:hover{
   background-color:#FF0000;
   color: white;
}
.cas_li {
   background-color:#FFFFFF;
   color: #ccebff;
}
.cas_li:hover{
   background-color:#FF0000;
   color: white;
}





/* w3 - Header Menü */
.topnav {
  overflow: hidden;
  padding-right:20px;
  z-index:99;
}

.topnav a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 5px 5px;
  text-decoration: none;
  font-size: 14px;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: right;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 14px;    
  border: none;
  outline: none;
  color: white;
  padding: 5px 5px;
  background-color: transparent;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  border-radius: 100px;
  display: none;
  position: absolute;
  background-color: #004d99;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: white;
  padding: 5px 5px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.topnav a.li:hover, .dropdown:hover .dropbtn {
  border-bottom:0px solid #ddd;
  color: #ff6666;
}

.dropdown-content a:hover {
  /*background-color: #ddd;*/
  color: #1a75ff;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative; z-index:99; background-color: #990000; padding:30px;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
	padding-right:20px;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}





#footerblock1
{
   /*background-color: #808080;*/
   /*background-color:#183B87;*/
   background-color:#264374;
   /* overflow: hidden; */
   text-align: left;
   width: 100%;
   min-height: 200px;
   margin-bottom: 0px;
}

#footerblock1_e1
{
	width: 100%; 
	max-width: 1000px;
	min-height: 200px;	
	margin-left: auto; 
	margin-right: auto;
}

.rowJ {
  width:auto;
  color:white;
}
.rowJ a {
  color:#CCCCCC;
}

.rowJ:before, 
.rowJ:after {
  content: " ";
  display: table;
}

.rowJ:after {
    clear: both;
}

.columns {
  float:left;
  padding: 30px;
}

.bor-1{
  border-right:1px solid #CCCCCC;
}
.bor-2{
  border-right:1px solid #CCCCCC;
}


@media screen and (max-width:600px) {

/* Small */
.small-1 {width:100%;}
.bor-1 {border-right:0px;}
.bor-2 {border-right:0px;}

}

@media screen and (min-width:600px) and (max-width:1000px) {

/* Medium */
.medium-1 {width:50%;}

.medium-2 {width:100%;}
.bor-2 {border-right:0px;}
}

@media screen and (min-width:1000px) {

/* Large */
.large-1 {width:33.333%;}

.large-2 {width:66.666%;}

.large-3 {width:100%;}

}