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

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




@media only screen and (max-width:990px) {
	#container, #footer, #header, #menu { /*b2ox-sizing:border-box; wi2dth:100%;*/ width:initial; } /* Don't use "box-sizing:border-box" with "width:100%", use "width:initial" alone instead (https://aastudio.fr/box-sizing.html) */
	#co2ntainer { padding: 6px 7px; }
	#m2enu { overflow:hidden; }
}




@media screen and (min-width: 851px) {
  #menu ul.menu1 li:hover > ul {display:block !important; } /* potrzebne, gdy chowam podmenu JS */
  /*#menu ul.menu1 ul { display:none !important;}*/ /* JS bedzie to obslugiwal */
}




@media only screen and (max-width:850px) {
  #sidebar, #content { /*d2isplay:none;*/ width:auto; float:none; }
  
  #content{padding:0}
  
  #content img{ max-width:100%; height:auto !important; }
  
  #content table{ max-width:100%; }
  #content table{ display:block; overflow-x:auto; height:auto !important; }

  #header span {display:none}
  #logo { /*di2splay:inline-block;*/ }

  #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 {/*di2splay:none;*/ visibility:hidden; opacity:0; height:0; /*pa2dding:0;*/ overflow:hidden;} /* bez udzialu JS i z animacja */
  #checkbox_menu_trigger:not(:checked) ~ #container #sidebar {/*di2splay:none;*/ visibility:hidden; padding:0; /*po2sition:absolute;*/ opacity:0; height:0; overflow:hidden; margin:0; transition:0.7s;} /* jw */
  #checkbox_menu_trigger:focus + label > * , #m2enu_trigger:active {outline: #08f solid 3px} /* zrobienie "mrowek" na okolo pseudoguzika */
    
  #menu {height:auto; width:100%; display:block;}
  #menu li {text-align:center}
  #menu ul.menu1 {/*wi2dth:100%*/}
  #menu ul.menu1 > li {display:block; background: url(./images/menu_bg.png) no-repeat; background-size:100% 46px; margin-top:15px;}
  #menu ul.menu1 > li:first-child { margin-top:0px; }
  #menu ul.menu1 > li > a { display:inline-block; line-height:46px; /*pad2ding:14px 10px; he2ight:auto;*/}
  #menu ul.menu1 > li > a[role=button] , #menu ul.menu1 > li > a[style*="cursor"] { display:block; }
  #menu ul.menu1 li ul { position:static; margin-bottom:25px; width:90%; margin-left:auto; margin-right:auto; }
  #menu ul.menu1 li:hover > ul {display:none;} /* JS bedzie to obslugiwal */
  
  
  #sidebar {text-align:center;}
  .title_sidebar, #sidebar li {width:100%;}
  .title_sidebar {background-size:98% 40px; }
  #sidebar nav ul  { width:auto; }
  #sidebar li {background: url();}
  #sidebar {border-bottom: 1px solid grey; margin-bottom:30px; }
  

  #menu , #sidebar {transition:0.7s;}  /* do animacji ("powolne" pojawianie sie) */
  

  
  #loginA {position:static !important;}  


  .strzalkaD { display:inline !important; position:absolute; cursor:s-resize; padding:0 20% 0 10pt !important; background:none !important; color:gold; /*outline:1px solid red;*/ }
  .strzalkaG { cursor:n-resize; }
  .strzalkaD:before {content:" \2193 "}
  .strzalkaG:before {content:" \2191 "}
  .strzalkaD { line-height:42px; height:100%; top:0; right:auto; } /* korekta wysokosci wybranego znaku strzalku */
  .strzalkaD:focus , a:focus + .strzalkaD , a:focus .strzalkaD { right:auto }


  #calendar {
    /*o2verflow:hidden;*/
    overflow-x:auto;
  }

  #calendar .cld-title{
    font-size: smaller;
  }

  #calendar select{
    background: white;
  }
  
}



@media only screen and (max-width:590px) {
  #footer {line-height:normal; }
  
}



@media only screen and (max-width:420px) {
  #header {background-image:url('') !important; }
}



@media only screen and (max-width:360px) {
  #wr2apper { width: 345px; }
  #header { width: 345px; }
  
  #checkbox_menu_trigger + label {z-index:999}
}


@media only screen and (max-width:320px) {
  body {margin:1px;}
}



@media only screen and (min-width:1400px) {
  ht2ml, bo2dy , #wra2pper , #co2ntent { transform: scale(1.2);}
  
  body { font-size: 15px; }
  
  #menu ul.menu1 > li > a { font-size: 109%; }
  #menu ul.menu1 ul { font-size: 105%; width:220px; }
  #menu ul.menu1 ul li a { padding-top: 15px; padding-bottom: 15px; }
  #menu ul.menu1 > li ul li ul { left:220px; }  
  #menu { margin: 20px auto 10px; background-size:100% 56px; height:56px;}
  #menu ul.menu1 > li > a { padding:0 28px; height:56px; }
  
  #container { width: 1350px; }
  
  #sidebar { width:250px; }
  .title_sidebar { width: 90%; font-size:25px }
  #sidebar nav a { font-size:16px; }
  
  #content { font-size:16px; padding-left: 295px; line-height:27px; }
  
  #footer {
    width: 1350px;
    font-size: 12px;
    background-size:100%;
  }  
  
}