[Velux] media queries not working?

Hi all, apologies but since this site is locked by the GSA I’m struggling with doing CSS editing the way I normally would. Anyone have any idea why these media queries aren’t working? I’m trying to do a few things here, but none of them work (individually or as a group). I’ve also done this with em and with px, and a range of pixel sizes (from 480 to 1000). Nothing’s happening at all. Please help if you can!!!
1: remove the hero/header image when the screen gets smaller
2: put a logo up as the background when the screen gets smaller
3: force the navigation menu into hamburger mode a little earlier than it’s currently doing

@media (max-width: 45em) {
.site-title a {
background: transparent url(“https://www.400yaahc.gov/files/2020/12/cropped-cropped-400-COMMISSION-DRUM5-4-transparent-small.png”) no-repeat scroll 0 0 !important;
overflow: auto;
}
}

@media screen and (max-width: 45em) {
nav.main_menu {
display: block !important;
}
}

@media only screen and (max-width: 45em) {
#site-header {
display: none !important;
}
}

@media screen and (min-width: 60em) {
.menu-toggle {
display: none;
}

.main-navigation ul.nav-menu {
border-top: solid 1px #ededed;
border-bottom: solid 1px #ededed;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
}

.main-navigation ul.nav-menu li {
display: inline-block !important;
margin: auto 5px auto 5px;
}
}`

The page I need help with: [log in to see the link]