html {
  --orange:  #f06101;
  --center: text-align:center; margin: 0px auto; 
}



div#inner {opacity:0}


div#black {position:absolute;width:100%; height: 100vh; background: linear-gradient(to bottom, rgba(0,0,0,0.60), rgba(0,0,0,0.50), rgba(0,0,0,0.25), rgba(0,0,0,0.50), rgba(0,0,0,0.75));   z-index:2;}

div.clean {width:100%;height:100px;clear:both}

div.clean-10 {width:100%;height:10px;clear:both}

div.break {width:100%;height:1px;clear:both}
   
div.item {position:static; margin:auto; width: 100%; height:100vh;}    



div#inline-menu {display:block;}
img#hamburger, #facebook3 {display:none}


div#contains {
    margin: 0px auto;
    text-align:justify;
    padding: 0px 10px 40px 10px;
    width:100%;
    overflow: auto;
    height:auto;
    background: #fff;
    }

div.section {
    margin: 0px auto;
    text-align:justify;
    padding: 0px 10px 40px 10px;
    width:80%;
    min-height: 80vh;
    overflow: visible;
    }


div#foot{
box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;
width:100%;
margin: 0px auto;
text-align:center;
padding:0px;
background: #444;
}

div#foot-inner{
box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;
width:80%;
margin: 0px auto;
text-align:center;
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
border-left: 1px solid #666;
border-right: 1px solid #666;
padding:0px;
}

div#foot-inner div.grey{
background: #444;
min-height: 250px;
padding: 1em;
}


div#ft1 {grid-row: 1; grid-column: 1;}
div#ft2 {grid-row: 1; grid-column: 2;}
div#ft3 {grid-row: 1; grid-column: 3;}
div#ft4 {grid-row: 2; grid-column: 1;}
div#ft5 {grid-row: 2; grid-column: 2;}
div#ft6 {grid-row: 2; grid-column: 3;}
div#ft7 {grid-row: 3; grid-column: 1 / 4;}

div#foot-inner div.grey2{
background: #fff;
min-height: 30px;
padding: 1em;
text-align:center;
}

div#foot-inner div.yellow{
background: #f06101;
min-height: 250px;
padding: 1em;
}

div#foot-inner div.grey *{
color: #fff;
}

div#foot-inner div.yellow *{
color: #fff;
}

div#foot-inner div.yellow input[type=submit], input[type=button].gray{
background: #444;
border:none;
color: #fff!important;
padding: .5em;
cursor:pointer;
font-family: Candara Bold;
}


input[type=button].yellow{
background: #f06101;
border:none;
color: #fff!important;
padding: .5em;
cursor:pointer;
font-family: Candara Bold;
}

.bold { font-family: Candara Bold}


#navigace {
    width:100%;
    color:#d309be;
    font-size: 18px;
    text-align:left;
    padding: 0px 10px 5px 5px;
    line-height: 16px;
    position:fixed;
    z-index:15;
}

/*
.light {height: 60px; background: rgba(245, 64, 31, 1); transition: background .5s;}
.dark {height: 60px; background: rgba(245, 64, 31, 1); box-shadow: none; transition: background .5s;}
*/

//.light {height: 60px; background: rgba(0, 0, 0, .4); border-bottom: 1px solid rgba(0, 0, 0, .5); transition: background .5s;}
/*.dark {height: 60px; border-bottom: 1px solid rgba(0, 0, 0, 0); background: rgba(0, 0, 0, .75); box-shadow: none; transition: background .5s;} */
.light {height: 60px; background: #f06101; box-shadow: none; transition: background .5s;}
.dark {height: 60px; background: #f06101; box-shadow: none; transition: background .5s;}


.light a.navmenu{
    font-size: 18px;
    letter-spacing: 1px;
    padding: 0px 0px 5px 0px;
    margin: 12px 0px 0px 10px;
    color:#fff;
    text-shadow: 1px 1px 1px #222;
    text-decoration:none;
    transition: color .5s, border .5s;
    display:inline-block;
    border-bottom: 1px solid rgba(255, 255, 255, 0);
}

.light a.navmenu:hover{
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 1);
    transition: color .5s, border .5s;
}


.dark a.navmenu{
    font-size: 18px;
    letter-spacing: 1px;
    padding: 0px 0px 5px 0px;
    margin: 12px 0px 0px 10px;
    color:#fff;
    text-shadow: 1px 1px 1px #222;
    text-decoration:none;
    transition: color .5s, border .5s;
    display:inline-block;
    border-bottom: 1px solid rgba(255, 255, 255, 0);
}

.dark a.navmenu:hover{
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 1);
    transition: color .5s, border .5s;
}


a.hmenu{
    font-size: 18px;
    letter-spacing: 1px;
    padding: 0px 0px 5px 0px;
    margin: 12px 0px 0px 10px;
    color:#fff;
    text-decoration:none;
    transition: border .8s;
    display:inline-block;
    border-bottom: 1px solid rgba(0, 0, 0, 0);
}



div#major-logo {display:block;
          margin: auto;
          text-align:center;
          position:absolute;
          top: calc(50% - 160px); left: 0;
          /*bottom: 0;*/ right: 0;
          z-index:10;
          /*cursor:pointer;*/
          width: 400px;
          height:320px;
          background: url('../img/logo-new.png');
          background-position: center center;
          background-repeat: no-repeat;
          background-size: 400px 320px;
          transition: background .5s;
          }

#input-draht-elektroosmose{
          display:block;
          margin: auto;
          text-align:center;
          position:absolute;
          /* top: 0;  */
          right: 0; 
          bottom: 5%; 
          left: 0; 
          z-index:9999;
          cursor:pointer;
          width: 300px;
          height:auto;
}


div#intro-minor-logo {
          position:absolute;
          top:6px;
          left: 10px;          
          z-index:10;          
          color: #fff;
          text-shadow: 1px 1px 1px #222;
          line-height:24px;
          }

div#intro-minor-logo a {color:#fff}

div#minor-logo { 
          position:absolute;
          top:5px;
          left: 5px;         
          z-index:10;
          cursor:pointer;
          width: 159px;
          height:50px;
          background: url('../img/logo-small.png');
          background-position: center center;
          background-repeat: no-repeat;
          background-size: 134px 50px;
          }
          

div.h1{   
          width: auto;
          height:50px;       
          background: #f06101;
          border-radius:3px;
          margin-bottom:50px;
         }


      h1 {          
          background: url('../img/solingen-qualitat.png'), url('../img/intro/qr-code-elmeso.png');  
          background-position: calc(100% - 200px) 28px, calc(100% - 10px) 15px;
          background-repeat: no-repeat, no-repeat;
          background-size: 140px 90px, 120px 120px;
          overflow: visible;
          width: auto;
          height:120px;
          color: #fff;
          text-align: left;
          font-weight: normal;
          font-family: Candara Bold;
          font-size: 26px;
          letter-spacing: 1px;
          padding: 70px 10px 70px 10px;
          position:relative;
          top:-50px;
          //border: 1px solid #aaa;
          margin-top: 30px;
          }

       h1 span {
            position:relative;
            top:-12px;
            }
 
  
         
          
          h2 {
          background: #444 ;
          color: #fff;
          text-align: left;
          font-weight: normal;
          font-family: Candara Bold;
          font-size: 23px;
          letter-spacing: 0px;
          padding: 10px 10px 10px 10px;
          border-radius:3px;
          text-shadow: none;
          /*margin-top: 100px;*/
          margin-top:50px;
          }  
          
           h2.produkte {
          background: #444;
          color: #fff;
          text-align: center;
          margin:0px auto;
          font-weight: normal;
          font-family: Candara Bold;
          font-size: 23px;
          letter-spacing: 0px;
          padding: 10px 10px 10px 10px;
          //border: 2px solid #f06101;
          border-radius:3px;
          text-shadow: none;
          margin-top: 100px;
          margin-bottom: 30px;
          }   

          
       h3 {
          color: #444;
          text-align: left;
          font-weight: normal;
          font-family: Candara Bold;
          font-size: 22px;
          letter-spacing: 0px;
          //text-indent: 20px;
          margin-top: 0;
          } 

         h3.center {
          color: #444;
          text-align: center;
          font-weight: normal;
          font-family: Candara Bold;
          font-size: 22px;
          letter-spacing: 0px;
          //text-indent: 20px;
          margin: 50px 0;
          } 

        ul{margin-top:20px; margin-bottom:20px; margin-left: 20px; }

        

       li{
       padding-left: 0px; 
       padding-right: 20px;
       font-size: 22px;
       color: #f06101;
       list-style-type: '✔  ';
       margin-bottom: 0px;
       text-align:left;
       }
       
       ul.list{margin-top:30px; margin-bottom:30px; margin-left: 50px; }
       
       li.list{
       padding-left: 0px; 
       padding-right: 20px;
       font-size: 18px;
       color: #444;
       list-style-type: decimal;
       margin-bottom: 10px;
       }
       
       p {font-size: 18px; color: #444;text-align: left; padding-bottom: 0px; line-height: 24px}
       li > span {font-size: 18px; color: #444;text-align: left; padding-bottom: 0px;}

.invisible{
    position: fixed;
    top: 0px;
    right: -1200px;
    transition: right .5s;
    }

.visible{
    position: fixed;
    top: 0px;
    right: 0px;
    transition: right .5s;
    }

strong {
        font-weight: normal;
        font-family: Candara Bold;
        }

strong.group{
        font-weight: normal;
        font-family: Candara Bold;
        padding: 5px;
        background: #ffa;
        display:block;
        }

a#to_home {text-decoration: none;}


a#to_down, a.icons {text-shadow: 1px 1px 1px #444; text-decoration: none; color: #fff; transition: color .5s}
a#to_down:hover, a.icons:hover {text-decoration: none; color: #f06101; transition: color .3s}

a.icons2 {text-shadow: 1px 1px 1px #444; text-decoration: none; color: #fff;}


div#upstairs {position:fixed; bottom: 20px; right: 20px; z-index:10;} 
img#up {width:40px; height:auto}


div#downstairs {display:block; margin: auto; text-align:center; position:absolute; left: 0; bottom: 5%; right: 0; z-index:10;}

div#facebook {display:block; width: 410px; position:fixed; right: 20px; top: 70px; z-index:10; background: #fff;  padding: .5em; border-radius: 3px; box-shadow: 2px 2px 5px #000 }


div#facebook a { text-decoration: none; color: #444; font-size: 16px; font-family: Candara Bold; transition: color .35s}
div#facebook a:hover { color: #f06101; transition: color .35s}
div#facebook span {margin-right: 10px; font-size:37px}

.visible3 {opacity: 1; cursor: pointer; transition: opacity 1s}
.invisible3 { opacity: 0; cursor: text; transition: opacity 1s}

.visible4 {opacity: 1; cursor: pointer; transition: opacity 1s}
.invisible4 { opacity: .5; cursor: text; transition: opacity 1s}

.visible5 {opacity: 1; transition: opacity 1s}
.invisible5 { opacity: 0; transition: opacity 1s}

a.zalozka {display:block;visibility:hidden;margin-top:30px;position:relative;top:-150px}
p.list {text-align:center;margin-top:30px;margin-bottom:30px;}
a.list {display:block;visibility:hidden;margin-top:30px;position:relative;top:-60px}

a.text:link, a.text:visited, .neodkaz {color: #f06101; padding: 0px 5px 0px 5px; transition: background .5s, color .5s}

a.text:hover, a.text:active, .neodkaz:hover {cursor:pointer;display:inline-block; color: #fff; background: #f06101; text-decoration: none; border-radius:3px; transition: background .5s, color .5s}

/*
.desktop {display:inline}
.mobile {display:none}
*/

div.mapa{text-align:center;margin:auto }
#mapa {width: 50%; height: 450px}

div.clear {height: 20px; clear:both;}

input, textarea, select{/*min-height:35px; */ border:1px solid #444; background:#fff; color:#444; padding:5px; font-size:16px; }
input.checkbox{position:relative; top:3px;}

input#submit,input.submit{font-size:18px; margin:auto; border:none; background: #f06101; color: #fff; text-align:center; font-family: Candara Bold; padding: 5px; cursor:pointer;  transition: all .3s }

input#submit:hover,input.submit:hover {background: #444; text-align:center;; transition: all .3s}


input.elektroosmose{font-size:22px; margin:auto; border:none; background: #f06101; color: #fff; text-align:center; font-family: Candara Bold; padding: 5px; cursor:pointer; border: 2px solid #fff; border-radius: 10px; transition: all .3s }

input.elektroosmose:hover {background: #fff; color: #f06101; border: 3px solid #f06101; text-align:center; transition: all .3s}



label {cursor:pointer; border-bottom: 2px solid transparent;white-space: break-spaces;}
label:hover {border-bottom: 2px solid #f06101}

input[type=text], textarea, select {width:430px}
input[type=text].inputmedium {width:331px}
input[type=text].inputsmall {width:95px}

input[type=text], textarea {outline-style: none}

input[type=text]:focus, textarea:focus { background: #eee; }

:-ms-input-placeholder {color:#aaa}
::-webkit-input-placeholder {color:#aaa}
::placeholder  {color:#aaa}

                                                              
p.msgr{background: #f06101; color:#fff!important; text-align:center; font-family: Candara Bold; clear:both; padding:5px;  border-radius:3px; }
p.msgf{background: #ff6; color:#f06101!important; border: 3px solid #f06101; text-align:center; font-family: Candara Bold; clear:both; padding:4px;  border-radius:3px; }


a.img {display:inline-block; opacity: .75; padding:0px; transition: opacity 1s}
a.img:hover {opacity: 1; transition: opacity .5s}

  
img#made-in-solingen {display:block;width:25%;height:auto;text-align:center;margin:0px auto;}   
img#qr-code-elmeso {display:block;width:150px;height:auto;text-align:center;margin:0px auto;margin-top:25px} 




/* vlevo
img#qr-code-elmeso-2 {position:absolute; display:block;width:120px;height:auto;margin-top: 40px;margin-left: 50px} 
*/


/* vpravo
img#qr-code-elmeso-2 {position:absolute; right: 0px; display:block;width:120px;height:auto;margin-top: 40px;margin-right: 50px}
*/

/* center */
img#qr-code-elmeso-2 {position:absolute; left:calc(50% - 60px); display:block;width:120px;height:auto;margin-top: 12px; z-index: 100}






div.flexbox{
	display:flex;
	flex-flow: row wrap;
	justify-content: center;
    width:100%;
	}

div.flexbox > div{
	width: 50%;
	}
    
div.formData{
	width: 430px;
    /*background:#eee;*/
    margin:auto;
    text-align:center;
	} 
    
div.formData2{
	width: 100%;
    /*background:#eee;*/
    margin:auto;
    text-align:center;
	}
    
div.formData2-inner{
	width: 40%;
    margin:auto;
    text-align:center;
	}           
    
iframe#mapa {
       margin: 0px auto;
       text-align:center;
       margin-top: 30px;
       margin-bottom: 30px;
       width: 100%;
       height: 400px;
       border: 1px solid #444;
       //background: #444;
       padding:1px;
       }    


div.grid-image {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
}

div.grid-image img {justify-self: center; align-self: center;  max-width: 300px; height: auto}

#g1 {grid-row: 1; grid-column: 1;}
#g2 {grid-row: 1; grid-column: 2;}
#g3 {grid-row: 2; grid-column: 1;}
#g4 {grid-row: 2; grid-column: 2;}
#g5 {grid-row: 1 / 3; grid-column: 3;}
#g6 {grid-row: 3; grid-column: 1 / 4;}

div.flex-image {
    display: flex;
    flex-flow: row wrap;
	justify-content: center;
    gap:1em;
    align-items: center;
    margin-bottom:2.5em;
}


div.flex-pdf {
    display: flex;
    flex-flow: row wrap;
	justify-content: center;
    column-gap:5em;
    row-gap:5em;
    align-items: flex-start;
    margin-bottom:2.5em;
}

div.flex-pdf div {text-align:center; width:300px}


div.flex-contain {
    display: flex;
    flex-flow: row wrap;
	justify-content: space-between;
    column-gap:5em;
    row-gap:1em;
    margin-bottom:2.5em;
}

div.flex-contain ul{max-width:600px}

img.mehr {width:125px; height: 48px; transition: width .25s, height .25s}
img.mehr:hover {width:135px; height: 48px; transition: width .25s, height .25s}


div.anfrage {
display: inline-block;
padding: .5em;
background: #f06101;
color: #fff;
border: 2px solid transparent; 
border-radius: 5px;
cursor:pointer;
font-size: 18px;
font-family: Candara Bold;
transition: background .25s, color .25s, border .25s;
}

div.anfrage:hover {
background: #f5f5f5;
color: #f06101;
border: 2px solid #f06101; 
transition: background .25s, color .25s, border .25s;
}

img.zyklone {width:600px; height:466px}



.invisible-popup-menu{/*position:absolute;*/  overflow: hidden; max-height: 0; transition:max-height .3s;    }
.visible-popup-menu{/*position:absolute;*/  overflow: hidden; max-height: 450px; transition:max-height .5s; border-left: 1px solid #000; border-bottom: 1px solid #000; border-right: 1px solid #000   }

div#produkte {
  display:flex;
  /*flex-flow: column wrap;*/
  flex-direction: column;
  justify-content: flex-start;
  text-align:left;
  align-self: top;
  position:absolute;
  margin-top: 16px;
  /*background: #f06101;*/
  background: rgba(0, 0, 0, .85);
   padding: 0;
  line-height:30px;
  /*width:400px;*/
}

div#produkte a {text-decoration:none; color: #fff; background: rgba(0, 0, 0 .85); padding: 0 1em 0 .5em; transition: color .5s, background .5s;}
div#produkte a:hover {background: #fff; color: #f06101; transition: color .5s, background .5s }



a[name] {position:relative; top:-50px}


div.tblZellenradschleusenMassblatt1{
  width: auto;
  /*overflow:auto;*/
  margin:50px 0 50px 0;
  padding:0 0 0 15px;
  }



table.tblZellenradschleusenMassblatt1 {
  width:100%;
  margin:auto;
  text-align:center;
  /*border: 1px solid #444;*/
  border-collapse: collapse;
  margin-bottom:15px;
  padding:0;
  /*position:relative;
  left: -15px;*/
}

table.tblZellenradschleusenMassblatt1 th{
  border: 1px solid #444;
  padding: .5em;
  font-weight: normal;
  font-family: Candara Bold;
  background: #ddd;
}

table.tblZellenradschleusenMassblatt1 td{
  border: 1px solid #444;
  padding: .5em;
  cursor:pointer;
}

table.tblZellenradschleusenMassblatt1 td.formoption{
  position:absolute;
  margin-left:-15px;
  background:#fff;
  border: none;
}


div.adult {display:inline-block;position:relative;top:-15px;height:60px;padding:0px 15px 0px 18px;border-left:1px solid #fff;margin-left:20px}

div.adult a {position:relative;top:15px}


div.mailUsers{
	display:flex;
	flex-flow: row wrap;
	justify-content: center;
    width:100%;
	}

div.mailUsers div{
	width: 50%;
    min-height:300px;
    padding:2em;
	}

div.mailUsers div:last-child{
	border-left: 1px solid #222;
	}

table.mailUsers{
  font-size: 18px;
}

table.mailUsers th{
  font-family: Candara Bold;
}

.e-icons {color: #f06101; transition: color .35s}
.e-icons:hover {color: #f00; transition: color .35s}

div#dark{
display:none;
/*height:1000px;*/
position:absolute;
top:0px;
left:0px;
z-index:1000;
width:100%;
background:#000;
opacity:0;
=filter: alpha(opacity=0);
overflow:none;
padding:0px;
}


div.effectwindow{
	padding:15px;
	display:none;
	position:absolute;
	box-shadow: 0px 0px 20px #000;
	opacity:0;
	background: #fff;
	z-index:1001;
	}  

table.newNewsletter td:first-child { text-align: right}
table.newNewsletter td:last-child { text-align: left}


table.newsletter {
  width:100%;
  margin:auto;
  text-align:center;
  border-collapse: collapse;
  margin-bottom:15px;
  padding:0;
}

table.newsletter th{
  border: 1px solid #444;
  padding: .5em;
  font-weight: normal;
  font-family: Candara Bold;
  background: #ddd;
}

table.newsletter td{
  border: 1px solid #444;
  padding: .5em;
}



table.newsletterDetail {
  width:75%;
  margin:auto; 
  text-align:center; 
  margin-top:50px;
}


table.newsletterDetail td{
    padding: .5em;
    text-align: left;
    padding: .5em;
}

table.newsletterDetail td:first-child{
    text-align:right;
    width: 30%;
    font-family: Candara Bold;
    
}

table.newsletterDetail td:last-child{
    background: #fafafa;    
}

.gray {color: #aaa}

.red {color: #d00; font-family: Candara Bold;}

option:disabled {color: #ccc; }