@media (max-width:1180px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:980px){
  .topnav{display:none}
  .mobile-menu{display:inline-flex;margin-left:auto}
  .sidebar{transform:translateX(-100%);transition:.2s transform}
  body.sidebar-open .sidebar{transform:translateX(0)}
  .main{margin-left:0;width:100%;padding-left:18px;padding-right:18px}
}

@media (max-width:700px){
  .hero{padding:30px 22px}
  .hero h1,.hero p{max-width:100%}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .topbar{padding:0 12px}
  .brand small{display:none}
  .main{padding-top:calc(var(--topbar-height) + 18px)}
  table.dataTable{min-width:820px}
}

@media print{
  .topbar,.sidebar,.no-print{display:none!important}
  .main{margin:0;width:100%;padding:0}
  body{background:white}
  .hero{box-shadow:none}
  .container{width:100%;max-width:none}
}