ember-responsive desktop hover not triggered

The mobile version works, the desktop not and I have tested that its the desktop by changing the breakpoints so its only Mobile or Desktop. Copying the Mobile CSS to the Desktop CSS fails, the hover over the links is not triggered and there are no console log errors for JS or CSS, any help appreciated.

Component HBS

<div class="navbar">
  <div id="mobile-menu">
    <!-- <img id="mobile-menu-icon" src='assets/images/36-512_white_hamburger.png'> -->
    <img id="mobile-menu-icon" src='assets/images/x-mark-5-512.png'>
  </div>
  <div class="menu">
    <div class="header-links">
      <span>
        
        Home
        
      </span>
    </div>
    <div class="header-links" id="the-monkees">
      <span>
        
          The Monkees
        
      </span>
    </div>
    <div class="header-links">
      <span>
        
          Our Music
        
      </span>
    </div>
    
      <div class="header-links">
          <span>
          
            Play >
          
        </span>
      </div>
    
    <div class="header-links">
      <span>
      
        Live Shows
      
    </span>
    </div>
    <div class="header-links">
      <span>
      
        Contact/Book Us
      
    </span>
    </div>
  </div>
</div>

app.css

/* application styles */

/*Main Windows All Formats*/

body {
  margin: 0;
  background-color: #fb851b;
}

#appview {
  background: url('images/The-Monkees161207-015.jpg');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  margin: 0;
}

/*All Formats*/

/*Close Window Button*/

.square-x:hover {
  cursor: pointer;
}

/*Home Play Button*/

#home-play-icon:hover {
  cursor: pointer;
}

/*Social Footer*/

.icons-div:hover {
  cursor: pointer;
}

#twitter-div:hover {
  cursor: pointer;
}


/*Navbar Mobile*/

.media-mobile .navbar {
  display: flex;
  top: 0;
  z-index: 0;
}

.media-mobile .header-links {
  flex-direction: column;
  white-space: nowrap;
  z-index: 999;
  padding: 5px 5px 5px 20px;
  background: rgba(0,0,0,0.5);
  visibility: show;
}

.media-mobile #mobile-menu {
  height: 25px;
  width: 25px;
  padding-top: 5px;
  padding-left: 5px;
}


.media-mobile #mobile-menu-icon {
  height: 25px;
  resize: both;
  /*visibility: hidden;*/
}

.media-mobile .header-links a {
    color: #FFFFFF;
    font-size: 3vw;
    font-family: "Impact", Charcoal, sans-serif;
    text-transform: capitalize;
    text-decoration:  none;
    padding-left: 0px;
    padding-right: 5px;
}

.media-mobile .header-links a:hover {
  color: #fb851b;
}

.media-mobile #the-monkees a {
  font-size: 3.5vw;
  color: #fb851b;
}

.media-mobile #the-monkees a:hover {
  color: #ffffff;
}


/*Page Body*/

.media-mobile #container {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 633px;
}

.media-mobile #home-play-icon {
  height: 75px;
  resize: both;
}

.media-mobile .box #home-video {
  height: 240px;
  resize: both;
  padding-top: 2%;
  padding-bottom: 2%;
  padding-left: 4%;
  padding-right: 4%;
  background: rgba(0,0,0,0.9);
}

.media-mobile #modal-x {
  position: absolute;
  height: 20px;
  resize: both;
}



/*Social Footer Mobile*/


.media-mobile #social-footer-container {
  text-align: right;
  width: 100%;
}

.media-mobile .icons-div {
  display: inline-block;
  display: none;
}

.media-mobile #twitter-div {
  display: inline-block;
  height: 30px;
  width: 18px;
  overflow: hidden;
}

.media-mobile #twitter-graphic {
  height: 30px;
  width: 30px;
  padding-left: 1px;
  /*padding-right: 1px;*/
  border-radius: 8px;
}

.media-mobile .icons-graphics {
  height: 30px;
  resize: both;
  padding-left: 1px;
  padding-right: 1px;
  border-radius: 8px;
}

.media-mobile #login a {
    font-family: "Impact", Charcoal, sans-serif;
    font-size: 2vw;
    text-decoration: none;
    color: rgba(0, 0, 0, 0);
    transition-delay: 5s;
}


/*##########*/

/*Navbar Desktop*/

.media-desktop .navbar {
  width: 100%;
  position: fixed;
  top: 0;
}

.media-desktop .menu {
  display: flex;
  justify-content: center;
}

.media-desktop .header-links {
  flex-direction: row;
}


/*Hide mobile close button for desktops*/

.media-desktop #mobile-menu {
  height: 0px;
  width: 0px;
  overflow: hidden;
  position: fixed;
  top: 0;
  padding-top: 5px;
  padding-left: 5px;
}

.media-desktop #mobile-menu-icon {
  height: 25px;
  resize: both;
  display: none;
}

.media-desktop .header-links a {
    color: #ffffff;
    font-size: 4vh;
    font-family: "Impact", Charcoal, sans-serif;
    text-transform: capitalize;
    text-decoration:  none;
    padding-left: 30px;
    padding-right: 30px;
}

.media-desktop .header-links a:hover {
  color: #fb851b;
}


.media-desktop #the-monkees a {
  font-size: 5vh;
  color: #fb851b;
}

.media-desktop #the-monkees a:hover {
  color: #ffffff;
}

/*Desktop Page Body*/


.media-desktop #container {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 633px;
  position: relative;
}

.media-desktop #home-play-icon {
  height: 100px;
  resize: both;
}

.media-desktop .box #home-video {
  height: 480px;
  resize: both;
  padding-top: 2%;
  padding-bottom: 2%;
  padding-left: 4%;
  padding-right: 4%;
  background: rgba(0,0,0,0.9);
}

.media-desktop #modal-x {
  position: absolute;
  height: 30px;
  resize: both;
}


/*Social Footer Desktop*/

.media-desktop #social-footer-container {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
}

.media-desktop .icons-div {
  flex-direction: row;
}

.media-desktop #twitter-div {
  flex-direction: row;
}

.media-desktop #twitter-graphic {
  height: 50px;
  resize: both;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 8px;
}


.media-desktop .icons-graphics {
  height: 50px;
  resize: both;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 8px;
}

.media-desktop #login a {
    font-family: "Impact", Charcoal, sans-serif;
    font-size: 1em;
    text-decoration: none;
    color: rgba(0, 0, 0, 0);
}