#menu_trigger {display:none}
#checkbox_menu_trigger {display:none;}

#menu_trigger { margin:0px auto 14px auto; font-weight:bold; background-color:darkorange; color:lightyellow; text-align:center; cursor:s-resize; padding:4px; width:90%; border-radius:4px; transition:0.7s;}
#checkbox_menu_trigger:checked + label > #menu_trigger {background-color:darkred; color:darkorange; padding:7px; cursor:n-resize;}




@media only screen and (max-width:970px) {
  #gora, #dol, #wraper { max-width:100% }
  #container,  #dol, #menu { /*box-sizing:border-box; width:100%;*/ width:initial; } /* Don't use "box-sizing:border-box" with "width:100%", use "width:initial" alone instead (https://aastudio.fr/box-sizing.html) */
  #po2dstrony {width:70%}
  #menu { /*overflow:hidden;*/ /*max-width:85%;*/ right:1%; }
  #menu li { margin-right:5px }
}





@media only screen and (max-width:840px) {
  
  #menu {position:static; max-width:initial }
  
  #boczny, #podstrony { width:auto; float:none; }
  #boczny { /*display:none*/ background:white; border-radius:0; }
  #srodek { padding:0 2px 2px; }
  #podstrony{ padding:2px; border-radius:5px; margin:0 1px; }
  
  #podstrony img{ max-width:100%; height:auto !important; }

  #podstrony table{ max-width:100%; }
  #podstrony table{ display:block; overflow-x:auto; height:auto !important; }  

  #header h1 , #header , #search_top { display:none }

  #menu_trigger:not(.takitest) {display:block; cursor:pointer;}
  #checkbox_menu_trigger:not(.takitest) {display:block; position:absolute; margin-left:-9999px;} /* taki test (przegladarki), czy dzialac bedzie nastepna linijka */
  #checkbox_menu_trigger:not(:checked) ~ #menu {/*display:none;*/ visibility:hidden; opacity:0; height:0; pa2dding:0; overflow:hidden;} /* bez udzialu JS i z animacja */
  #checkbox_menu_trigger:not(:checked) ~ #srodek #boczny {/*display:none;*/ visibility:hidden; padding:0; po2sition:absolute; opacity:0; height:0; overflow:hidden; margin:0; transition:0.7s;} /* jw */
  .keybord #checkbox_menu_trigger:focus + label > * , #m2enu_trigger:active {outline:2px solid #08f;} /* zrobienie "mrowek" na okolo pseudoguzika */
    
  #menu { height:auto; width:100%; di2splay:block; ba2ckground-size:100% 100%; margin-bottom:1em;}
  #menu li , #menu a { text-align:center;  }

  #menu ul { margin-left:5%; }
  #menu ul > li { /*display:block;*/ float:none; width:90%;  }
  #menu ul > li:first-child { margin-top:0px; }
  #menu ul > li > a { di2splay:block; }
  #menu ul li ul { margin-bottom:25px; width:80%; margin-left:auto; margin-right:auto; margin-top:auto; }
  #menu ul li:hover > ul { /*position:static;*/ }
  
  
  
  #menu li li:hover { w2idth:auto; }
  #menu a { f2ont-size: 16px; }
  
  #boczny {text-align:center;}
  #title_sidebar, #boczny li { width:100%; }
  #title_sidebar {background-size:98% 40px; }
  #boczny li { background: url(); }
  #boczny {border-bottom: 1px solid grey; margin-bottom:30px; }
  

  #menu , #boczny {transition:0.7s;}  /* do animacji ("powolne" pojawianie sie) */
  
  #me3nu_oddzialy { display:block !important}
  #boczny { font-size: 110%; }
  #boczny a { text-decoration: none;  font-weight:bold; color:inherit; display: inline-block; }
  #boczny ul {margin-left:-60px; }

#boczny li:hover ,
#boczny a:focus 
{
  /*b2ackground: green;*/
  background: #85C226;
  color:white;
}

  
  
  #loginA {position:static !important;}  


  .strzalkaD { display:inline !important; position:absolute; cursor:s-resize; padding:0 20% 0 10pt !important; background:none !important; color:gold; out2line:1px solid red; }
  .strzalkaG { cursor:n-resize; }
  .strzalkaD:before {content:" \2193 "}
  .strzalkaG:before {content:" \2191 "}
  .strzalkaD { line-height:42px; height:100%; } /* korekta wysokosci wybranego znaku strzalku */
 
 .zajawka_obrazek img { max-width:initial !important; } 
}



@media only screen and (max-width:600px) {
  #godlo {left:-10px !important}
  #dol { line-height:normal }
}


@media only screen and (max-width:480px) {
  .zajawka_obrazek { overflow:hidden; max-width:50%; text-align:center; display:inherit; }
  .zajawka_obrazek img { margin: auto -50%; }
  
  .zajawka_obrazek.ver2 { max-width:100% }
}


@media only screen and (min-width:1500px) {
  body { font-size: 120%; }
  #gora, .wraper { max-width: 1467px; }
  
}