Bootstrap 3.1.1 Media Queries Reversed? - css

Question

I have been experiencing an odd and really frustrating problem with certain page elements (use h1.brand different em sizes are being ignored as one example) that won't down size at responsive break points and even increase in size despite modified CSS using traditional Media Queries. When using Google Chrome developer tools it will show these elements as following the opposite or at least incorrect media query for a given screen size.
Help, I've searched and tried many different fixes with no luck,
Thanks for any help,
TVprodDude
Site is Live at tvadpros.com
Below is a couple of the media queries – placed at top of master css stylesheet - Maybe I have something wrong here:
#media (min-width: 480px) {
.container {
width: 440px;
margin-right: auto;
margin-left: auto;
}
h1.brand {
font-size: 2em;
padding-left: 20px;
padding-right: 20px;
}
}
/* Small Devices (tablets, 768px and up) */
#media (min-width: 768px) {
.container {
width: 720px;
margin-right: auto;
margin-left: auto;
}
.column {
/* float: left; */
margin-right: 10px;
margin-left: 10px;
}
h1.brand {
font-size: 3em;
padding-left: 20px;
padding-right: 20px;
}
/* .row {
overflow: hidden;
} */
ul.sdt_menu {
/*margin-left:500px; */
padding: 0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:12px;
width: 640px;
}
ul.sdt_menu a{
text-decoration:none;
outline:none;
}
ul.sdt_menu li{
float:left;
width:100px;
height:45px;
position:relative;
cursor:pointer;
}
ul.sdt_menu li > a{
position:absolute;
top:0px;
left:0px;
width:100px;
height:45px;
z-index:12;
background:transparent url(../images/overlay.png) no-repeat bottom right;
-moz-box-shadow:0px 0px 2px #000 inset;
-webkit-box-shadow:0px 0px 2px #000 inset;
box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img{
border:none;
position:absolute;
width:0px;
height:0px;
bottom:0px;
left:45px;
z-index:100;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
position:absolute;
top:15px;
left:0px;
width:100px;
height:45px;
z-index:15;
}
ul.sdt_menu li span.sdt_active{
position:absolute;
background:#111;
top:45px;
width:100px;
height:0px;
left:0px;
z-index:14;
-moz-box-shadow:0px 0px 4px #000 inset;
-webkit-box-shadow:0px 0px 4px #000 inset;
box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
margin-left: 8px;
text-transform:uppercase;
text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link{
color:#fff;
font-size: 15px;
float:left;
clear:both;
}
ul.sdt_menu li span span.sdt_descr{
color:#f5f5f5;
float:left;
clear:both;
width:95px; /*For dumbass IE7*/
font-size: 9px;
letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
display:block;
position:absolute;
width:100px;
overflow:hidden;
height:140px;
top:65px;
left:0px;
display:none;
background:#000;
}
ul.sdt_menu li div.sdt_box a{
float:left;
clear:both;
line-height:25px;
color:#0B75AF;
}
ul.sdt_menu li div.sdt_box a:first-child{
margin-top: 9px;
}
ul.sdt_menu li div.sdt_box a:hover{
color:#fff;
}
/* img.size-chg {
width: 140px;
height: 140px; */
}
/* End nav menu for min 768px width */
/* Medium Devices, Desktops, 992px and up */
#media (min-width: 992px)