:root{
    --hlavni-barva: #92cc4e;
    --druha-barva: #01a708;
}
body {
    background: url("images/bg_body.png");
    max-height: 700px;
} 
#main{
    width: 900px;
    height: 600px;
    background: radial-gradient(#FFFFFF, var(--hlavni-barva));
    margin: auto;
    border: 5px  var(--hlavni-barva);
    border-style: solid;
    border-radius: 5px;
    //font-family: verdana;
}
#top{
    width:900px;
    height:70px;
    background-color:var(--hlavni-barva);
}

#down{
    width:900px;
    height:100px;
    background-color:var(--hlavni-barva);
}
#content{
    width:900px;
    height:430px;
    background-image: url('images/intro.png');
    background-size: contain;
}
#content_left,#content_right{
    width:300px;
    height:430px;
    float:left;
    box-shadow: green 2px 2px 3px inset;
}
#content_right{
	box-shadow: green -2px 2px 3px 0px inset;
}
.obaly{
    width:10px;
    height:430px;
    float:right;
    font-size: 15px;
    font-weight: bold;
    line-height: 60px;
    text-align: center;
}
#obal_right{
	float:left;
	
}

#content_mid{
    width:300px;
    height:430px;
    background-color:var(--hlavni-barva);
    float:left;
}
.con{visibility:hidden;}
#obr{
   width:250px;
   height:250px;
   margin:auto;
   margin-top:40px;
   //border:1px solid;
   border-radius: 5px;
   background-size: contain;
   background-repeat:no-repeat;
   background-position: center;
}
.box{
    width: 100%;
    height: 60px;
    background-color: var(--hlavni-barva);
    margin-top: 22px;
    
    cursor: pointer;
    display: none;
    
}
.box_r{
	float:left;
	box-shadow: var(--hlavni-barva) 1px 1px 4px 0px;
	border-right: 6px  ;
	border-right-color:var(--hlavni-barva);
	border-right-style:solid;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.box_l{
	float:right;
	box-shadow:var(--hlavni-barva) -1px 1px 4px 0px;
	border-left: 6px;
	border-right-color:var(--hlavni-barva);
	border-left-style:solid;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.box:hover{
	color:lime;
}
.but {
    width: 50px;
    height: 50px;
    list-style: none;
    cursor: pointer;
    border-radius: 5px;
    margin: 8px 10px;    
    box-shadow: 1px 1px 3px;
    float: left;
    background-size: contain;
    background-repeat:no-repeat;
    background-color: var(--druha-barva);
}
.butt {
    width: 50px;
    height: 50px;
    
}


.but:hover{
 box-shadow: 1px 1px 1px;   
}
#bt_dalsi{
	width: 150px;
    height: 40px;
    margin: 20px 0 0 75px;
    font-size: 15px;
    font-weight: bold;
    line-height: 40px;
    text-align: center;
    display:none;   
}
#bt_help{
 background-image: url('images/help.png');
 float: right;   
}
#bt_solo{
 background-image: url('images/bt_solo.png');
 box-shadow: 2px 2px 3px inset;
 float: right;   
}
#bt_test{
 background-image: url('images/bt_test.png');
 float: right;   
}
#bt_zver{
 background-image: url('images/bt_zver.png');
}
#bt_savci_cr{
 background-image: url('images/bt_savci_cr.png');
}
#bt_savci_zoo{
 background-image: url('images/bt_savci_zoo.png');
}
#bt_ptaci_cr{
 background-image: url('images/bt_ptaci_cr.png');
}
#bt_plazi_cr{
 background-image: url('images/bt_plazi_cr.png');
}
#bt_ohroz_cr{
 background-image: url('images/bt_ohroz_cr.png');
}
#otazka,#hod{
   width: 600px;
   height: 50px;
   //border:1px solid;
   //border-radius: 5px;
   margin: auto;
   font-size: 20px;
   font-weight: bold;
   line-height:50px;
   text-align:center;
   
}
#hod{
   display:none;
}
#popup_demo{
    width: 600px;
    position: relative;
    top: -450px;
    background: var(--druha-barva);
    padding: 5px;
    border-radius: 6px;
    box-shadow: 1px 1px 3px;
    color: #000;
    margin: 0 auto;
    text-align: justify;
    z-index: 100;
    display:none;
}
#popup_text{
    font-size: 20px;
    margin: 5px;
    font-weight: bold;

}
#kriz{
   float:right;
   margin:10px;
   cursor: pointer;
}