CSS Media queries reading wrong width

I'm trying to set some styles on a page with basic CSS and when I refresh the page to see expected results, all I can see that chrome uses styles from another query which it shouldn't do, when I browse from my phone I see styles from @media (max-width:1220px) and (min-width:965px) when it should show styles from @media (max-width: 767px). Anyone had this problem before?

@@media (min-width:1221px) {

    //some style
}

/* Tablets and very small desktop screens (if some) */
@@media (max-width:1220px) and (min-width:965px) {

    //some style
}

/* Tablets and very small desktop screens (if some) */
@@media (max-width:964px) and (min-width:768px) {

    //some style
}


@@media (max-width: 767px){

    //some style
}