html {
  --yellow: #ffd800;
  --yellow-rgb: 255, 216, 2;
  --green:  #115621;
  --green-rgb: 17, 86, 33;
}



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

    
div.item {
position:static; 
margin:auto; 
width: 100%; 
height:100vh;
background:url('../img/slideshow/3.jpg');background-position:center center;background-repeat:no-repeat;background-size:cover;
}    

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

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

div.section-o-nas {
    box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;
    margin: 0px auto;
    text-align:justify;
    padding: 0px;
    width:100%;
    min-height: 100vh;
    overflow: visible;
    background: #fff;
    }
    
div.section-o-nas > div{
    box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;
    margin: 0px auto;
    text-align:justify;
    padding: 0 20px 0 20px;
    width:80%;
    min-height: 100vh;
    overflow: visible;
    background: #fff;
    }    
    
    
div.section-nase-sluzby {
    box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;
    margin: 0px auto;
    text-align:justify;
    padding: 0 0 0 0;
    width:100%;
    min-height: 100vh;
    overflow: visible;  
    background:linear-gradient(to bottom, rgba(0,0,0,0.50), rgba(0,0,0,0), rgba(0,0,0,0.0), rgba(0,0,0,0.0), rgba(0,0,0,0.0), rgba(0,0,0,0), rgba(0,0,0,0.50)), url('../img/slideshow/2.jpg');
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed;
    }
    
div.section-nase-sluzby > div{
    box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;
    margin: 0px auto;
    text-align:justify;
    padding: 20px 50px 50px 50px;
    width:600px;
    min-height: 300px;
    overflow: visible;
    background: rgba(0, 0, 0, .50);
    position:relative;
    top:25vh;
    box-shadow: 2px 2px 5px #222;
    border: 1px dotted #222; 
    }
    
div.section-reference {
    box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;
    margin: 0px auto;
    text-align:justify;
    padding: 0px;
    width:100%;
    min-height: 100vh;
    overflow: visible;
    background: #fff;
    }
    
div.section-reference > div{
    box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;
    margin: 0px auto;
    text-align:justify;
    padding: 0 20px 0 20px;
    width:80%;
    min-height: 100vh;
    overflow: visible;
    background: #fff;
    }    
    
    
div.section-kontakt {
    box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;
    margin: 0px auto;
    text-align:justify;
    padding: 0 0 0 0;
    width:100%;
    min-height: 100vh;
    overflow: visible;
    background:linear-gradient(to bottom, rgba(0,0,0,0.75), rgba(0,0,0,0.50), rgba(0,0,0,0), rgba(0,0,0,0.0), rgba(0,0,0,0.0), rgba(0,0,0,0.50), rgba(0,0,0,0.75)), url('../img/slideshow/1.jpg');    
    background-position:center center;
    background-repeat: repeat, repeat;
    background-size:cover;
    background-attachment:fixed;
    }
    
div.section-kontakt > div{
    box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;
    margin: 0px auto;
    text-align:justify;
    padding: 0px 20px 20px 20px;
    width:80%;
    min-height: 300px;
    overflow: visible;
    background: rgba(0, 0, 0, .50);
    position:relative;
    top:15vh;
    box-shadow: 2px 2px 5px #111;
    border: 1px dotted #222; 
    }    
    
    
    
div.section-nase-sluzby div h2 {color: var(--yellow)}    
div.section-nase-sluzby div p {color: #fff} 
div.section-nase-sluzby div li {color: var(--yellow)}
div.section-nase-sluzby div li span {color: #fff}

div.section-kontakt div h2 {color: var(--yellow)}
div.section-kontakt div p {color: #fff} 
div.section-kontakt div li {color: var(--yellow)}
div.section-kontakt div li span {color: #fff}
div.section-kontakt a {color: var(--yellow)}
div.section-kontakt * {color: #fff}


a.zalozka1 {display:block;visibility:hidden;/*margin-top:100px*/ position:relative; top: -60px}
a.zalozka2 {display:block;visibility:hidden;/*margin-top:100px*/ position:relative; top: 0px}
a.zalozka3 {display:block;visibility:hidden;/*margin-top:100px*/ position:relative; top: -60px}  
a.zalozka4 {display:block;visibility:hidden;/*margin-top:100px*/ position:relative; top: 0px}    
            
div.section2 {
    margin: 0px auto;
    text-align:justify;
    padding: 90px 10px 40px 10px;
    width:80%;
    min-height: 80vh;
    overflow: visible;
    background: none;
    }

div.foot {margin: 0px auto; text-align:center; margin-top:50px}

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

.light {height: 60px; background: rgba(0, 0, 0, .15); border-bottom: 1px dotted #222;  transition: background .5s;}
.dark {height: 60px; /*background: rgba(17, 86, 33, .75);*/  background: var(--green); border-bottom: 1px solid #000; transition: background .5s;}


//#navigace:hover {background: rgba(255, 255, 255, .95); 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: var(--yellow);
    border-bottom: 1px solid var(--yellow);
    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-decoration:none;
    transition: color .5s, border .5s;
    display:inline-block;
    border-bottom: 1px solid rgba(0, 0, 0, 0);
}

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


a.hmenu{
    font-size: 18px;
    letter-spacing: 1px;
    padding: 0px 0px 5px 0px;
    margin: 12px 0px 0px 10px;
    color:#444;
    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% - 120px); left: 0;
          /*bottom: 0;*/ right: 0;
          z-index:10;
          cursor:pointer;
          width: 400px;
          height:157px;
          background: url('../img/logo-castka.png');
          background-position: center center;
          background-repeat: no-repeat;
          background-size: 400px 157px;
          transition: background .5s;
          }
          
div#major-logo:hover {
          background: url('../img/logo-castka2.png');
          background-position: center center;
          background-repeat: no-repeat;
          background-size: 400px 157px;
          transition: background .5s;
          }          
          

      img#logo-castka-small {
          z-index:10;
          cursor:pointer;
          width: auto;
          height:50px;
          margin-top:0px;
          }

      h2.yellow {
          background: var(--yellow);
          color: #444;
          padding: .25em .5em .25em .5em;
          display: block;
          text-align: left;
          font-weight: normal;
          font-size: 24px;
          letter-spacing: 1px;
          font-family: Candara Bold;
          }

      h3 {
          color: var(--green);
          text-align: left;
          font-weight: bold;
          font-size: 20px;
          letter-spacing: 1px;
          font-weight:normal;
          font-family: Candara Bold;
          margin-top: 0;
          }

        p, td {font-size: 18px; color: #444;text-align: left; padding-bottom: 0px; line-height: 24px}


        ul{margin-top:20px; margin-bottom:20px; margin-left: 20px; max-width: 70%; }
 
        div{font-size: 16px; color: #444;text-align: left; padding-bottom: 0px;}
        p.citace {font-size: 18px; color: #444; margin: 0px auto; background: #fafafa; padding: 15px; margin-top: 40px; margin-bottom: 40px}

       li{
       padding-left: 0px;
       font-size: 18px;
       color: #1c9dd9;
	     list-style-type:square;
       margin-bottom: 0px;
       }
       
       ul.list li {margin-bottom: 8px}
       li > span {color: #444;}
       


.invisible{
    position: fixed;
    top: 60px;
    right: -360px;
    transition: right .5s;
    }

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


strong {font-weight:normal; font-family: Candara Bold; letter-spacing: 1px;}


a#to_home {/*text-shadow: 1px 1px 1px #444;*/ text-decoration: none; background: rgba(var(--yellow-rgb), 0); color: var(--yellow); border:2px solid rgba(var(--yellow-rgb), 0); border-radius: 50%; transition: background .5s, color .5s, border .5s}
a#to_home:hover {text-decoration: none; color: var(--green); background: rgba(var(--yellow-rgb), 1); border:2px solid rgba(var(--yellow-rgb), 1);  transition: background .5s, color .5s, border .5s}

a#to_down {text-shadow: 1px 1px 1px #444; text-decoration: none; color: #fff; transition: color .5s}
a#to_down:hover {text-decoration: none; color: var(--yellow); transition: color .3s}

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

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

a.text:link, a.text:visited, .neodkaz {padding: 0 .25em; cursor:pointer;display:inline-block; min-height: 20px; background: rgba(var(--yellow-rgb), 0); color: var(--green); text-decoration: none; border-bottom: 1px solid rgba(var(--green-rgb), 1); transition: background .5s, border .5s}
a.text:hover, a.text:active, .neodkaz:hover {background: rgba(var(--yellow-rgb), 1); border-bottom: 1px solid rgba(var(--green-rgb), 0); transition: background .5s, border .5s}

img#house {float:right;margin-left:15px;margin-bottom:15px; width: 600px; height: auto}

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

.green {color: var(--green)}

div.clear {height: 20px; clear:both;}
                                                                                                   
input.text-format{margin:auto; background: var(--yellow); color: #444; text-align:center; font-weight:normal; font-size: 20px; font-family: Candara Bold; padding: 5px; cursor:pointer; letter-spacing: 1px; min-width: 30px }


table.kontaktni-formular {width: 100%; margin: auto; text-align:center; margin-top:0px; margin-bottom:30px;}
    table.kontaktni-formular td {font-size: 18px; line-height:36px}
    table.kontaktni-formular input[type=text], input[type=password], table.kontaktni-formular textarea, table.kontaktni-formular select {width: 100%; padding:4px; border: 1px solid rgba(255,255,255, .5);  background:rgba(255,255,255, 0.20); color:#fff;font-size: 14px; }
   
    
input[type=text], input[type=password], input[type=file], textarea, select {width: 100%; padding:4px; border: 1px solid #444;  background:rgba(0,0,0, 0.05); color:#444;font-size: 14px; }
    
  
    :focus {
      outline: none;
    }
    
    .star {color: var(--yellow)!important; font-size: 36px; position:relative; top:12px; font-weight:normal}
    
    input.submit{
    display:inline-block;
    font-size: 18px;
    font-family: Candara Bold;
    padding: 5px 5px 5px 5px;
    margin: 0px 0px 0px 10px;
    color: var(--green);
    border:none;
    cursor:pointer;
    text-decoration:none;
    background: var(--yellow);
    width:auto;
    border: 2px solid rgba(var(--yellow-rgb), 0);
    transition: color .5s, background .5s, border .5s;
    }
    
    input.submit:hover{border: 2px solid rgba(var(--yellow-rgb), 1); background: var(--green); color: var(--yellow); transition: color .5s, background .5s, border .5s}
    
    p.msgr {display:inline-block; color:#fff!important; background: var(--green); font-family: Candara Bold; padding: .25em .5em .25em .5em}
    p.msgr2 {display:inline-block; color: var(--yellow)!important; background: var(--green); font-family: Candara Bold; padding: .25em .5em .25em .5em}
    
    p.msgf {display:block; text-align:center; color:#b00!important; background: var(--yellow); font-family: Candara Bold; padding: .25em .5em .25em .5em}


div#foot{
width:100%;
margin: 0px auto;
text-align:center;
padding-top:10px;
padding-bottom:10px;
border-top: 1px solid #1c9dd9;
clear:both;
}

div.polozka {text-align:center; margin: auto; margin-top: 20px; margin-bottom: 10px}
.odebrat {color: #d00; font-weight:bold; font-size: 24px; cursor: pointer}
p.p-pridat {text-align:center; /*margin-right: 150px*/}
.pridat {cursor:pointer; color: #d00; text-decoration: none; border-bottom: 1px solid #d00; transition: border .5s}
.pridat:hover {color: #d00; text-decoration: none; border-bottom: 1px solid #fff; transition: border .5s}

p.admin-links {text-align:right}

div.img-obal {display:inline-block; margin: 0px 10px 10px 0px; text-align:right}
a.img {display:inline-block; opacity: .95; padding:0px; transition: opacity 1s}
a.img:hover {opacity: 1; transition: opacity .5s}

img.wimg{width:150px; height: auto; padding:3px; border:3px solid #fff;}
img.rimg{width:150px; height: auto; padding:3px; background:#fff ; border:3px solid #d00;}

div.flexcontain{
	display: -ms-flexbox;
	display:flex;
	flex-flow: row wrap;
	justify-content: center;
    -ms-flex-pack: center;
    column-gap:2em;
	}

div.flexitem{
	width: 40%;
    min-height:300px;
    margin-bottom: 20px;
	}
    

.blue {color: var(--green); font-weight: bold}


    ul.menu {margin-left: -40px; min-width:100%; box-sizing: border-box}
	
	li.menu-noactive {font-size: 16px; /*font-weight: bold;*/ list-style-type: none;  border-top:1px solid var(--green);}
    	
	li.menu-noactive a{margin:0; padding: .6em 0 .6em .6em; background: #fff; width:100%; color:#666; text-decoration:none; display:inline-block; transition: color .5s, background .5s}

  	li.menu-noactive a:hover{color: var(--green); background: var(--yellow); transition: color .5s, background .5s}
    
    li.menu-active {margin:0;padding:.6em 0 .6em .6em; font-size: 16px; /*font-weight: bold;*/ list-style-type: none; color: #fff; background: var(--green); border-bottom:1px solid var(--green);}
    
    
div.reference
	{ 
	display: grid;	
	grid-template-columns: 1fr 3fr; grid-template-rows: auto;
    display: -ms-grid;
	-ms-grid-columns: 1fr 3fr; -ms-grid-rows: auto;
    
 	margin:0px auto;
	padding:0px;
	width:100%;
  	min-height:150px;
  	text-align:center;
  	background:#fff;
	
  }    

div.reference-menu {width:100%; /*background:#eee;*/ margin-bottom: 20px; -ms-grid-row: 1; -ms-grid-column: 1;}
div.reference-obsah {width:100%; -ms-grid-row: 1; -ms-grid-column: 2; margin-top:30px}