/* --------------------------------------------------------------------------------------------------------
 * specifically responsive
 */
.gridtable { width: 100%; }
.gridtable tr {
  display: block;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-gap: 3px;
  margin-bottom: 3px;
}
@media screen and (max-width:480px) { /* portrait smartphones */
  .gridtable tr {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-gap: 3px;
    margin-bottom: 3px;
  }
}
@media screen and (min-width:480px) and (max-width:720px) { /* landscape smartphones and tablets*/
  .gridtable tr {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-gap: 3px;
    margin-bottom: 3px;
  }
}
/* 
* 
*/ 
@media screen and (min-width:1250px) {
  .container-main {margin-left: 250px; transition: margin-left 0.8s ease;}
  .sidebar {left: 0px;  transition: left 0.8s ease;}
  .container-nav .hamburger-lines {display: none;}
  .container-nav .checkbox {display: none;}
}
@media screen and (max-width:1250px) {
  .container-main {margin-left: 0px; transition: margin-left 0.4s ease;}
  .sidebar {left: -250px;  transition: left 0.4s ease;}
  .container-nav .hamburger-lines {display: flex;}
  .container-nav .checkbox {display: block;}
}