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
    //...
}