Media Queries not working in Internet Explorer 11
instead
@media screen and (min-width: 1024px){
...
}
use this
@media all and (min-width: 1024px) {
...
}
Although nested media queries are allowed in CSS3 (but not 2.1) I can imagine that this is exactly the sort of thing that has cross-browser issues.
I don't understand why you are testing min-width twice but consider putting them in the same query, comma-separated to signify an OR:
@media screen and (min-width: 1024px), screen and (min-width: 64.000em) {
//if *either* of these are matched then apply these rules
//...
}