#page-work nav{ background-color: var(--brandcol-dark); }

#icon-twitter{ transition: color 0.5s ease; }
#icon-twitter:hover { color: #1DA1F2; transition: color 0.5s ease; }
#icon-linkedin{ transition: color 0.5s ease; }
#icon-linkedin:hover { color: #0A66C2; transition: color 0.5s ease; }
#icon-instagram{ transition: color 0.5s ease; }
#icon-instagram:hover { color:  #e95950; transition: color 0.5s ease; }
#icon-spotify{ transition: color 0.5s ease; }
#icon-spotify:hover { color: #1DB954; transition: color 0.5s ease; }
#icon-vimeo{ transition: color 0.5s ease; }
#icon-vimeo:hover { color: #79cdfc; transition: color 0.5s ease; }


nav {
width: 100vw;
background-color: none;
position: fixed;
top: 0;
z-index: 50;
transition: top 0.5s ease, background-color 0.5s ease;
}

nav li {
margin: 0px 30px;
}

nav a {
color: inherit;
}

.menu-space{
  display: inline-block;
  width: 10px;
}

#nav-default {
width: calc(100vw - 60px);
background-color: none;
transition: top 0.5s ease, background-color 0.5s ease;
padding: 30px 30px;
text-align: center;
}

.nav-link-desktop li{
  display: inline;
}

#nav-contact {
  position: absolute;
  top: 0;
  right: -580px;
  background-color: var(--brandcol-accent);
  transition: right 0.5s ease;
  padding: 30px 30px;
}



/*==== Nav Styles ====*/
.nav-left {
float: left;
}

.nav-right {
margin: 0 auto;
float: none;
white-space: nowrap;
}

.nav-right li{
  color: white;
  transition: color 0.25s ease;
}
  
.nav-right li:hover{
  color: var(--brandcol-accent);
  transition: color 0.25s ease;
} 

.nav-social {
position: absolute;
float: left;
bottom: 30px;
left: 30px;
width: auto;
display: inline;
white-space: nowrap;
}

/*==== Nav Scrolled ====*/
.nav-scrolled {
background-color: var(--brandcol-xdark);
transition: top 0.5s ease;
}

.nav-scrolled a {
color: var(--white);
}