html {  
  --white:  #fff;

  --red:  #d00;

  --blue:  #007dc2;

  --violet:  #8e00b7;

  --purple: #242ccb;

  --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.clean-25 {width:100%;height:25px;clear:both}

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

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



div#pripravujeme {
  margin: auto;
  text-align:center;
  position:absolute;
  display:inline-block;
  padding: 1em;
  bottom: 0; left: 0;
  /*bottom: 0;*/ right: 0;
  /* width:auto;  */
  height: auto; 
  background: rgba(0,0,0,0.30); 
  z-index:2; 
  color: #ff6;
}

div#pripravujeme p{
    text-align:center;
    color: #ff6;
  font-size:28px;
}



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: var(--white);
    }



div.container {
    margin: 0px auto;
    text-align:justify;
    padding: 60px 10px 60px 10px;
    width:100%;
    min-height: 100vh;
    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;
}




input[type=button].yellow{
background: var(--orange);
border:none;
color: var(--white)!important;
padding: .5em;
cursor:pointer;
font-family: Palatino-Linotype-Bold;
}

.bold { font-family: Palatino-Linotype-Bold}


#navigace {
    width:100%;
    color:#d309be;
    font-size: 18px;
    text-align:left;
    padding: 5px 10px 0px 5px;
    position:fixed;
    z-index:15;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, .4);
    font-family: Palatino-Linotype-Bold;
    /* display:none; */

}


.light {height: 80px; background: var(--white); box-shadow: none; transition: all .5s;}
.dark {height: 80px; background: var(--white); box-shadow: none; transition: all .5s;}


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

.light a.navmenu:hover{
    color: var(--red);
    border-bottom: 1px solid var(--red);
    transition: all .5s;
}


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

.dark a.navmenu:hover{
    color: var(--red);
    border-bottom: 1px solid var(--red);
    transition: all .5s;
}


a.hmenu{
    font-size: 18px;
    letter-spacing: 1px;
    padding: 0px 0px 5px 0px;
    margin: 12px 0px 0px 10px;
    color:var(--white);
    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(33.3% - 200px); left: 0;
          /*bottom: 0;*/ right: 0;
          z-index:10;
          /*cursor:pointer;*/
          width: 339px;
          height:400px;
          background: url('../img/logo-big-solarni-studio.png');
          background-position: center center;
          background-repeat: no-repeat;
          background-size: 339px 400px;
          transition: background .5s;
          }


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

div#intro-minor-logo a {color:var(--white)}

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: var(--red);
          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: var(--white);
          text-align: left;
          font-weight: normal;
          font-family: Palatino-Linotype-Bold;
          font-size: 26px;
          letter-spacing: 1px;
          padding: 70px 10px 70px 10px;
          position:relative;
          top:-50px;
          margin-top: 30px;
          }

       h1 span {
            position:relative;
            top:-12px;
            }
 
  
         
          
          h2 {
          color: var(--red);
          text-align: left;
          font-weight: normal;
          font-family: Palatino-Linotype;
          font-size: 35px;
          letter-spacing: 0px;
          margin: 10px 10px 10px 0px;

          }            

          
       h3 {
          color: var(--blue);
          text-align: left;
          font-weight: normal;
          font-family: Palatino-Linotype;
          font-size: 25px;
          letter-spacing: 0px;
          margin: 30px 10px 0px 0px;
          } 



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

        

       li{
       padding-left: 0px; 
       padding-right: 20px;
       font-size: 22px;
       color: var(--orange);
       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: 22px; color: #444;text-align: left; padding-bottom: 0px; line-height: 28px}
       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: Palatino-Linotype-Bold;
        }

strong.group{
        font-weight: normal;
        font-family: Palatino-Linotype-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: var(--white); transition: color .5s}
a#to_down:hover, a.icons:hover {text-decoration: none; color: var(--orange); transition: color .3s}

a.icons2 {text-shadow: 1px 1px 1px #444; text-decoration: none; color: var(--white);}


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: auto; position:fixed; right: 20px; top: 20px; z-index:10; background: var(--white);  padding: .5em; border-radius: 3px; box-shadow: 2px 2px 5px #000; color: var(--red); transition: all .35s}

div#facebook:hover  {color: var(--blue); transition: all .35s}

/* div#facebook a { text-decoration: none; color: var(--red); font-size: 16px; font-family: Palatino-Linotype-Bold; transition: color .35s} */

/* div#facebook a:hover, div#facebook:hover  { color: var(--blue); 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: var(--blue); padding: 0px 5px 0px 5px; transition: background .5s, color .5s}

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

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

div.mapa{text-align:center;margin:auto }

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

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

input#submit,input.submit{font-size:22px; margin:auto; border:none; background: var(--blue); color: var(--white); text-align:center; font-family: Palatino-Linotype-Bold; padding: 5px; border-radius: 5px; cursor:pointer;  transition: all .3s }

input#submit:hover,input.submit:hover {background: var(--red); transition: all .3s}

label {cursor:pointer; border-bottom: 2px solid transparent;white-space: break-spaces;}
label:hover {border-bottom: 2px solid var(--orange)}

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: var(--blue); color:var(--white)!important; text-align:center; font-family: Palatino-Linotype-Bold; clear:both; padding:5px;  border-radius:3px; }
p.msgf{background: var(--red); color:var(--white)!important; border: 3px solid var(--orange); text-align:center; font-family: Palatino-Linotype-Bold; clear:both; padding:4px;  border-radius:3px; }


img.img {display:inline-block; opacity: .85; padding:0px; border: 1px solid var(--blue); transition: opacity 1s}
img.img:hover {opacity: 1; border: 1px solid var(--red); transition: opacity .5s}

  

/* ------------------------------------------------------------------------ */

div.o-nas{
  margin: 0px auto;
  text-align:center;
	display:flex;
	flex-flow: row wrap;
	justify-content: center;
  width:80%;
  padding: 2em;
	}


  div.o-nas > div{
	width: 50%;
  padding:0;
	}


  div.o-nas > div img{
	height: 70vh;
  box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, .4), 
  20px 20px 0px 0px rgba(0, 0, 0, .2)
	}

  div.o-nas > div:first-child{

    background: url('../img/elipsy.png');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 80% auto;
  }


/* ------------------------------------------------------------------------ */


  div.solaria{
  margin: 0px auto;
  text-align:center;  	
  width:80%;
  padding: 1em;
  background: rgba(255, 255, 255, .97);
  box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, .4), 
  20px 20px 0px 0px rgba(0, 0, 0, .2);
	}


  div.solaria-flex{
  display:flex;
	flex-flow: row wrap;
	justify-content: space-between;
  /* justify-content: center; */
	width: 100%;
  padding:1em;
  gap: 3em;
	}

  div.solaria-flex div{
	width: calc(45% - 1.5em); 
	}

  div.solaria-flex div p{
  text-align:justify;
	}







  /* ------------------------------------------------------------------------ */


  div.solaria2{
  margin: 0px auto;
  text-align:center;  	
  width:80%;
  padding: 1em;
  background: rgba(255, 255, 255, 1);
	}


  div.solaria2-flex{
  display:flex;
	flex-flow: row wrap;
	/* justify-content: space-between; */
  justify-content: space-evenly;
	width: 100%;
  padding:1em;
  gap: 3em;
	}

  div.solaria2-flex div{
	width: calc(40% - 1.5em); 
	}

  div.solaria2-flex div p{
  text-align:justify;
	}



/* ------------------------------------------------------------------------ */


  div.galerie{
  margin: 0px auto;
  text-align:justify;  	
  width:80%;
  /* padding: 1em;  */
	}



  /* ------------------------------------------------------------------------ */


  div.cenik{
  margin: 0px auto;
  text-align:center;  	
  width:80%;
  padding: 1em;
  background: rgba(255, 255, 255, .97);
  box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, .4), 
  20px 20px 0px 0px rgba(0, 0, 0, .2);
	}



/* -------------------------------------------------------------------------- */

div#kontakt{
  width:80%;
  margin: 0px auto;
  text-align:justify; 
  /*margin-top:50px;*/
	display:flex;
	flex-flow: row wrap;
	justify-content: space-between;
  background: #fff;
  margin-bottom: 40px;
  /* box-shadow: 2px 2px 5px #ddd; */
	} 

  div#kontakt h2{
    text-align:left!important;
	}
    
div#kontakt div{
    padding: 0px 30px 0px 30px;
	width:50%;
	}
 
div#kontakt div._100_{
    padding: 0px 0px 50px 0px;
	width:100%;
	} 
 
div#kontakt div div{
    padding: 0px;
	width:100%;
	} 
    
/* div#kontakt p{
    text-align:left;
    margin-top: 10px;
    line-height:22px;
	} 
     */
    
       
img.social {width:40px;height:40px;margin-top: 10px}
a.social {text-decoration:none} 

.instagram-text {position:relative; top: -5px}


div.flex-kontakt{
	display: -ms-flexbox;
	display:flex;
	flex-flow: row wrap;
	justify-content: start;
    -ms-flex-pack: center;
	}
 
div.flex-kontakt2{
	display: -ms-flexbox;
	display:flex;
	flex-flow: row wrap;
	justify-content: start;
    -ms-flex-pack: center;
	} 
    
div.flex-kontakt p {width:50%} 
div.flex-kontakt2 div._50_ {width:50%!important;} 

    table.kontaktni-formular {width: 100%; margin: auto; text-align:center; margin-top:0px; margin-bottom:15px;}
    table.kontaktni-formular td {font-size: 22px; line-height:36px; color:#555}
    input[type=text], input[type=number], input[type=password], textarea, select {width: 100%; padding:8px; border: 1px solid #666; border-radius: 5px;  color:#555;font-size: 18px;}
    
    :focus {
      outline: none;
    }

    input[type=text]:focus, textarea:focus {border: 1px solid var(--blue); background:#fafafa;}
    
    .star-kontakt {color: var(--red); font-family: Amiri-Bold; font-size: 40px; position:relative; top:12px; font-weight:normal}








/* 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%;
    gap:1em;
	}

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: 600px;
       border: 1px solid #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: var(--orange);
color: var(--white);
border: 2px solid transparent; 
border-radius: 5px;
cursor:pointer;
font-size: 18px;
font-family: Palatino-Linotype-Bold;
transition: background .25s, color .25s, border .25s;
}

div.anfrage:hover {
background: #f5f5f5;
color: var(--orange);
border: 2px solid var(--orange); 
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: var(--orange);*/
  background: rgba(0, 0, 0, .85);
   padding: 0;
  line-height:30px;
  /*width:400px;*/
}

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



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


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: Palatino-Linotype-Bold;
  background: #ddd;
}

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

table.tblZellenradschleusenMassblatt1 td.formoption{
  position:absolute;
  margin-left:-15px;
  background:var(--white);
  border: none;
}


div.adult {display:inline-block;position:relative;top:-15px;height:60px;padding:0px 15px 0px 18px;border-left:1px solid var(--white);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: Palatino-Linotype-Bold;
}

.e-icons {color: var(--orange); 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: var(--white);
	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: Palatino-Linotype-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: Palatino-Linotype-Bold;
    
}

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

.gray {color: #aaa}

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

option:disabled {color: #ccc; }