* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* render html5 elements as block 
   rendert html5 elemente als block  */

header, footer, section, aside, nav, article { display: block;}

body {
background-color: #ffffff;
font-size: 0,7em;
font-family: Arial, SunSans-Regular, Sans-Serif;
color:#000000;
}
.pi {
font-size:17px;
line-height:1.3em;
}
.farben {
font-size:16px;
line-height:1.3em;
height:60px;
width:98%;
}
.kursiv { font-style:italic; font-size:100%; }
.kursivbig { font-style:italic; font-size:170%; }
pre, code {
font-size: 1.3em;
}
#a {color: #999;}
#a:visited {color:#000000;}
a:hover {color: red;}
a:active { color:#000000;}

h1, h2 {
font-size:1.6em;
font-weight: normal;
margin: 0 0 0px;
}

h3 {
font-size:1.38em;
font-weight: normal;
margin: 0 0 0px;
}

img.download {vertical-align:middle;}
img{border:none;}


	
	#overall {
		width: 100%;
		height:auto;
min-width:320px;
padding-bottom: 0px;
margin:0 auto;
background-color: #FFFFFF;
box-shadow: 0px 0px 9px #888;
    font-size: 11px;
	position:fixed;
	z-index:401;
	}
/* ----------container zentriert das layout-------------- */

#container {
max-width: 1200px;
min-width:320px;
margin:0  auto;
background-color: #FFFFFF;
height:auto;
box-shadow: 0px 0px 6px #888;
 margin-top:    161px;
}
#container_content {
max-width: 1200px;
min-width:320px;
margin:0  auto;
background-color: #FFFFFF;
border:1px;
box-shadow: 0px 0px 6px #888;
}

/* ----------header for logo-------------- */
#top:after{
    height: 0;
    content: ".";
    display: block;
    clear: both;
  visibility:hidden;
  } 
#top {
  background-color: #eee;
	}


  
header p{
	text-transform:uppercase;
  font-size:0.8434em;

}
header img{ 
border:0;
padding: 0 0 10px;
}  
.mini, .menubutton{
  display:none;
  }

.menubutton a {
  cursor:pointer;
}
 
/* new nav */


.imgzentriert {
	display: block;width:100%;text-align: center;
	}

img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto; 
	}

/* ----------------- content--------------------- */
section:before {
    height: 0;
    content: ".";
    display: block;
    clear: both;
  visibility:hidden;
  }

section#content {

width: 97%;
padding:10px;
background-color: #fff;
min-height:600px;
font-size: 13px;
margin:0 auto 0 auto;
}
p, pre{
padding:  0 0 20px;
line-height:1.5em;
}

article header{
	background:#fff;
	padding:0;
	}
	
headerL {
	font-weight:bold;
	}
	


footerL{
	color:#564B47;
	padding:0 0 20px;
	margin:0 0 20px;
}

/* -------------- side infos ------------- */

aside {
padding:5px;
float:none;
font-family:sans-serif; 
font-size: 14px;
display:block;
}
.headp {
	padding:10px;
}

footer a {
	color: #000000; text-decoration:none;
	}

/* -----------footer--------------------------- 
footer.footer {
padding: 20px;
clear:both;
background-color: #ffffff;
color:#000000;
border:1px;
}



.footer-segment {
    display: inline-block;
    vertical-align: top;
    width: 32%;
}
*/

/* -------------------- Media Queries -------------------- */


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

ul#product_list li div.center_block {
	float: left;
	width: 100%;

}
ul#product_list li div.right_block {
	float: left;
	width: 100%;
	text-align: right;
	margin-left: 1em;
	margin-top: 0;
}

 #top header, nav {
    float:none;
    width:100%;
  }


		section#content {
float: none;
width: 95%;
padding: 20px;
margin:0 auto 0 auto;
}
#index_info {
	float: none;
	margin:auto;
	width:100%;
   min-height: 320px;
}


}

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

ul#product_list li div.center_block {
	float: left;
	width: 100%;

}
ul#product_list li div.right_block {
	float: left;
	width: 100%;
	text-align: right;
	margin-left: 1em;
	margin-top: 0;
}


section#content {
float: none;
width: 95%;
padding: 20px;
margin: 0 auto 0 auto;
}

aside {
padding:20px;
float: none;
width: 100%;
}


#lieferBILD {
display: none !important;
}
#index_info {
	
	margin:0 auto;
	width:100%;
   min-height: 320px;
}

#indextext {
	font-size: 18px;
font-family:Sans-Serif;
	float:right;
	margin:0 auto;
	width:100%;
margin-bottom:15px;
	
}
#indextex {
	font-size: 20px;
font-family:Sans-Serif;
	float:right;
	margin:0 auto;
	width:100%;
	padding:20px;
   min-height: 320px;
	
}
footer
        {
                padding-bottom:70px;
				display:flex;
				padding:10px;
				height:600px;
                float:none;				
        }
        footer .wrapper
        {
                width: 350px;
                margin: 0 auto;
        }
        footer .wrapper .column
        {
                margin-top:30px;
                float:none;
                font-size: 14px;
                width: auto;
				 
        }
        footer .wrapper .social
        {
                display:none;
        }

}

#index_te{
	width:70%;float:left;min-height:150px;font-size:20px;
}
#index_hl{
	width:50%;float:left;min-height:150px;font-size:20px;
}
#index_gf{
	width:20%;float:right;padding:100px 0px 0px 0px;
}
#index_hlu{
	width:50%;float:right;padding:80px 0px 0px 0px;
	line-height: 120%;
	font-size: 20px;
}
#indextext img {
	float:left;
width:99%;	
}

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

.bild {
	float:right;
    width: 95%;
    height: auto;
	padding:0px 0px 10px 0px;
}
.bildvoll {
    width: 100%;
    height: auto;
}

#index_te{
	width:95%;
	float:none;
	min-height:150px;
}
#index_gf {
	width:95%;
	float:none;
	padding:10px 0 px 0px 0px;
	
}
#index_hl{
	width:95%;
	float:none;
	min-height:150px;
}
#index_hlu {
	width:95%;
	float:none;
	padding:10px 0 px 0px 0px;
	
}

ul#product_list li div.center_block {
	float: left;
	width: 100%;

}
ul#product_list li div.right_block {
	float: left;
	width: 100%;
	text-align: right;
	margin-left: 1em;
	margin-top: 0;
}
#container {
 margin-top:    80px;
}
.indextext{
	float:none;
}


  
  .mini {
    display:block;
    /* 20% space rechts fuer .menubutton: */
    width: 80%;
  } 
  
  .menubutton {
    display:block;
    position:absolute;
    right:20px;
    top:20px;
    z-index: 400;
  }
  
  .maxi{
    display:none;
  }
  aside {
	  display: none !important;
	  
  }



#lieferBILD {
display: none !important;
}
section#content {
float: none;
width: 95%;
padding: 20px;
margin:0 auto;
}

#index_info {
	float: none;
	margin:auto;
	width:100%;
   min-height: 320px;
}
.flexinfo .produktbild {
display: none !important;
}
footer {
	
	height:830px;
	padding:10px;
}


footer .wrapper
        {
                width:auto;
        }
        footer .wrapper .column
        {
                margin: 0 auto 15px auto;
                max-width:300px;
				
        }
		
		#indextext {
	font-size: 14px;
font-family:Sans-Serif;
	float:none;
	width:100%;
	
}
		
}

ul#product_list li div.right_block {
	float: left;
	width: 100%;
	text-align: right;
	margin-left: 1em;
	margin-top: 0;
}

/* Flexbox Example */
    .flexbox { display: flex; }
    .flexbox .stretch { flex: 1; max-width:600px; }
    .flexbox .normal { width:115px; }
    .flexbox div input { padding: .5em 1em; width: 100%; max-width:500px;}
	.flexbox textarea { padding: .5em 1em; width: 100%; max-width:500px; min-height: 160px; }
    .flexbox div button { padding: .5em 1em; white-space:  nowrap; max-width:500px; }

	.flexinfo { display: flex; }
    .flexinfo .stretch {		
	float:right;
	padding: .4em .4em;
	}
	.flexinfo .produktbild {		
	float:none;
	padding: .8em .8em;
	}
	
	.ibox .stretchi { flex: 1; }
	.ibox .stretchi {		
	float:none;
	padding: .6em .6em;
	clear: left;
	margin-left: 150px;
	}
	
	
.flexinfo ul {
list-style-type:square;	
}
.flexinfo .li {		
	width:35%;
	padding: .4em .4em;
	}
	.flexinfo .re {		
	width:40%;
	}
hr {
	max-width: 95%;
}
.lexikon { display: flex; }
.lexikon .auflist {
	width: 95%;
	padding:1px;
font-size:12px; 
}
.lexikon a { 
text-decoration:none;
color:black;
}
tr.tr_color1 {
background: #DCdCdC;
}
tr.tr_color1 a:link {
color: black;
text-decoration:none;
}
tr.tr_color2 {
background: #DCdCdC;
}
tr.tr_color2 a:link {
color: black;
text-decoration:none;
}


.indexBox {
background: #f5f5f5;
border: 1px solid #DDD;
box-shadow: 3px 3px 0px rgba(0,0,0, .2);
padding: 10px 10px 10px 10px;
}
#leftNav {
      background: #eee;
      border: 4px solid white;
      box-shadow: 0 0 1px rgba(0,0,0, .4);
	  padding: 8px 2px 2px 5px;
	  
}
#leftNav a:link {	
color: black;
text-decoration:none;
}
#leftNav a:hover {
	color:red;	
}

#leftNavC {
      background: #DCdCdC;
      border: 4px solid white;
      box-shadow: 0 0 1px rgba(0,0,0, .4);
	  padding: 8px 2px 2px 5px;
	  
}
#leftNavC a:link {	
color: black;
text-decoration:none;
}
#leftNavC a:hover {
	color:red;	
}

#lieferB {
	width:100%;
   min-height: 500px;
}
#lieferA {
	width:100%;
   min-height: 500px;
   border: 0px solid #DDD;
margin:0 auto;
}

#liefer {
	width:100%;
	margin-left: 6%;
  margin-right: auto;
}

.lieferBox {
background: #eee;
border: 1px solid #DDD;
background: -moz-linear-gradient(top, #EEE, #FFF);    
background: -webkit-linear-gradient(top, #eee, #fff);
background: -ms-linear-gradient(top, #eee, #fff);
background: -o-linear-gradient(top, #eee, #fff);
box-shadow: 1px 2px 4px rgba(0,0,0, .2);
padding: 8px 2px 2px 5px;
max-width:236px;
min-width:108px;
min-height:210px;
float:left;
margin:0px 22px 20px 0;
}

#lieferBILD {
width:100%;
border:0px;
padding:0px 8px 8px 0px;
}
#lieferBILD img {
	max-width:100%;
	padding:0px 5px 5px 0px;
}
.lieferBox img {
	
	padding:5px 5px 5px 0px;
}

.lieferBox a:link {
	color:black; 
text-decoration:none;
}


/* FOOTER */

footer a {
	color:#fff;
}

footer
{
        position:relative;
        clear:both;
        width:100%;
        min-height:350px;
        background:#333333;
}

footer .wrapper
{
        line-height:25px;
        margin: 0 auto;
        padding-top:30px;
        width:auto;
		height:auto;
        max-width:1000px;
        font-size:14px;
}

footer .wrapper .column
{
        font-family: 'Open Sans', sans-serif;
        color:#fff;
        float:left;
        width:290px;
        margin-right:20px;
}

footer .wrapper .column.midlist ul li
{
        display:block;
        width:auto;
        padding:0 0 10px 25px;
        margin-bottom:10px;
        border-bottom: 1px solid #444444;
        
}

footer .wrapper .column.midlist ul li a:hover
{
        color:red;
}
footer .wrapper .column.midlist ul li a:link
{
        color:white;
}

footer .wrapper .column.rightlist ul li
{
        display:block;
        width:auto;
        margin-bottom:15px;
}

footer .wrapper .column.rightlist ul li a span
{
        margin-left:95px;
        display:block;
}

footer .wrapper .column.rightlist ul li a img
{
        transition: border .25s ease;
        float:left;
        border:3px solid #444444;
}

footer .wrapper .column.rightlist ul li a img:hover
{
        border-color: #5e5e5e;
}

footer .wrapper .column h4
{
        font-size: 16px;
        color: #fff;
        border-bottom: 1px solid #444444;
        padding: 0 0 10px 0;
        margin-bottom: 10px;
}

#copyright
{
        background: #1D1D1D;
        height:auto;
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
}
#copyright .wrapper
{
        font-family: 'Open Sans', sans-serif;
        padding-top:25px;
        color: #5e5e5e;
        font-size:14px;
        position:relative;
}
#copyright .wrapper .social
{
        position:absolute;
        right:0;
        top:25px;
}
#copyright .wrapper .social a
{
        transition: opacity .25s ease;
        opacity: 0.3;
        margin-left: 12px;
        display:block;
        float:left;
}
#copyright .wrapper .social a:hover
{
        opacity: 0.7;
}
#copyright .wrapper a
{
        color: #ABABAB;
}

#copyright .wrapper a:hover
{
        color: #fff;
}

@keyframes stylie-transform-keyframes {
  0% {transform:translateX(30px) translateY(46px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translateX(260px) translateY(-150px) rotate(0deg) translate(-50%, -50%);}
}

@keyframes stylie-transform2-keyframes {
  0% {transform:translateX(40px) translateY(40px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translateX(50px) translateY(40px) rotate(0deg) translate(-50%, -50%);}
}


.hidden
{
        position:absolute;
        clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
          clip: rect(1px, 1px, 1px, 1px);
}


.command-button {
  padding: 0 1rem;
  height: 2.125rem;
  text-align: center;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px #d9d9d9 solid;
  color: #262626;
  cursor: pointer;
  display: inline-block;
  outline: none;
  font-size: .875rem;
  line-height: 100%;
  margin: .15625rem 0;
  position: relative;
  height: auto;
  text-align: left;
  font-size: 1.325rem;
  padding-left: 4rem;
  padding-top: 8px;
  padding-bottom: 4px;
}
.command-button a:link {
	color:black; 
text-decoration:none;
}
.command-button.default {
  background-color: #008287;
  color: #fff;
}
.command-button:hover {
  border-color: #787878;
}
.command-button:active {
  background: #eeeeee;
  color: #262626;
  box-shadow: none;
}
.command-button:focus {
  outline: 0;
}
.command-button:disabled,
.command-button.disabled {
  background-color: #eaeaea;
  color: #bebebe;
  cursor: default;
  border-color: transparent;
}
.command-button * {
  color: inherit;
}
.command-button *:hover {
  color: inherit;
}
.command-button.rounded {
  border-radius: .325rem;
}
.command-button > [class*=mif-] {
  vertical-align: middle;
}
.command-button img {
  height: .875rem;
  vertical-align: middle;
  margin: 0;
}
.command-button.loading-pulse {
  position: relative;
  padding: 0 1.325rem;
}
.command-button.loading-pulse:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: scaleout 1s infinite ease-in-out;
          animation: scaleout 1s infinite ease-in-out;
}
.command-button.loading-pulse.lighten:before {
  background-color: #fff;
}
.command-button.loading-cube {
  position: relative;
  padding: 0 1.325rem;
}
.command-button.loading-cube:before,
.command-button.loading-cube:after {
  content: "";
  background-color: #333;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 50%;
  left: 3px;
  margin-top: -8px;
  -webkit-animation: cubemove 1.8s infinite ease-in-out;
          animation: cubemove 1.8s infinite ease-in-out;
}
.command-button.loading-cube:after {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}
.command-button.loading-cube.lighten:before,
.command-button.loading-cube.lighten:after {
  background-color: #fff;
}
.command-button.dropdown-toggle {
  padding-right: 1.625rem;
}
.command-button.dropdown-toggle.drop-marker-light:before,
.command-button.dropdown-toggle.drop-marker-light:after {
  background-color: #ffffff;
}
.command-button.primary {
  background: #2086bf;
  color: #ffffff;
  border-color: #2086bf;
}
.command-button.primary:active {
  background: #1b6eae;
  color: #ffffff;
}
.command-button.success {
  background: #60a917;
  color: #ffffff;
  border-color: #60a917;
}
.command-button.success:active {
  background: #128023;
  color: #ffffff;
}
.command-button.danger,
.command-button.alert {
  background: #ce352c;
  color: #ffffff;
  border-color: #ce352c;
}
.command-button.danger:active,
.command-button.alert:active {
  background: #9a1616;
  color: #ffffff;
}
.command-button.info {
  background: #59cde2;
  color: #ffffff;
  border-color: #59cde2;
}
.command-button.info:active {
  background: #1ba1e2;
  color: #ffffff;
}
.command-button.warning {
  background: #fa6800;
  color: #ffffff;
  border-color: #fa6800;
}
.command-button.warning:active {
  background: #bf5a15;
  color: #ffffff;
}
.command-button.link {
  background: transparent;
  color: #2086bf;
  border-color: transparent;
  text-decoration: none;
}
.command-button.link:hover,
.command-button.link:active {
  background: transparent;
  color: #114968;
  border-color: transparent;
}
.command-button small {
  display: block;
  font-size: .8rem;
  line-height: 1.625rem;
  margin-top: -0.3125rem;
}
.command-button .icon {
  left: 1rem;
  top: 50%;
  margin-top: -1rem;
  position: absolute;
  font-size: 2rem;
  height: 2rem;
  width: 2rem;
  margin-right: .625rem;
}
.command-button.icon-right {
  padding-left: 1rem;
  padding-right: 4rem;
}
.command-button.icon-right .icon {
  left: auto;
  right: 0;
}

#indexBOX {
	margin:auto;
	width:100%;
  min-height:260px;
}


#infobox  {
max-width: 95%;
min-width:320px;
margin:0  auto;
background-color: #FFFFFF;
height:auto;
box-shadow: 1px 1px 5px #888;
border:2px;
}

#infobox a:link {
	color:black; 
text-decoration:none;
}


.pi {
font-size:17px;
line-height:1.3em;
float:left;
width:400px;
text-align: left;

}
.pinsel {
	text-align: left;
	margin:auto;
	min-height:170px;
	max-height:500px;
	list-style-image: url(/img/li_pinsel.png);
	padding:20px;
}

.hoehe { height: 60px;width:100px;}
.color_tone { height: 60px;}
.color_value { height: 60px;border:1px solid #000;}
.farben a:link {
	color:black; 
text-decoration:none;
}

.responsiveContainer {
  position: relative;
  padding-bottom: 56%;
  height: 0;
  overflow: hidden;
}

.responsiveContainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



div.table {
    display: table;
    width: calc(100% - 10px);
    border: 0px solid black;
    padding: 5px;
  }
  div.spalteH { 
    display: table-cell;
    border: 1px solid black;
    width: 45%;
    padding: 5px;
	font-weight: bold;
  }
  div.spalte { 
    display: table-cell;
    border: 1px solid black;
    width: 45%;
    padding: 5px;
  }
  div.spalteV { 
    display: table-cell;
    border: 0px solid black;
    width: 45%;
    padding: 5px;
  }
  div.tr { 
      display:table-row; 
    }
  a.anders:link {
  color:#00FF00;
  }
 a.anders:visited {
  color:#00FF00;
  }
 a.anders:hover {
  color:red;
  font-weight:bold;
  }