Tried the new file, didn't make a difference.

I can't explain this at all, but I've solved it.

I changed the style below:

@media only screen and (min-width: 35em) {
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
/* Clear Floated Elements + Fix */
.clear {clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0;}
.clearfix:before,.clearfix:after{content: '.'; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0;}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
/*END DONT CHANGE*/
}

To this:

@media only screen and (min-width: 35em) {

}

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }

.ir br { display: none; }

.hidden { display: none !important; visibility: hidden; }

.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

.invisible { visibility: hidden; }

/* Clear Floated Elements + Fix */

.clear {clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0;}

.clearfix:before,.clearfix:after{content: '.'; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0;}

.clearfix:after {clear: both;}

.clearfix {zoom: 1;}

/*END DONT CHANGE*/

Moved it outside of the media query. It was put there by mistake by the looks of it.

Yep, I knew it had to be something stupid.

The moral of the story is, don't write bloated CSS files...

Thanks for the advice anyway though!